zoukankan      html  css  js  c++  java
  • ImageMagick 压缩图片 方法

    Images as a percentage of page weight for the Alexa top 10 global web sites  
    图片在站点所占的比重越来越重。更好的优化图片能够提高站点速度。降低宽带流量。 

    1.对用户上传图片进行缩放 

        对于用户自己上传的图片不能简单的 用css大小限制,由于这样每次载入图片时候还是会载入整幅大图。占用多余的宽带,而且影响页面载入速度。应该依据实际显示须要进行缩放。比方我想要用户相冊里的图片大小不能超过500x300: 

    用ImageMagick处理起来非常简单 

    [html] view plaincopy
     
    1. convert -resize "500x300>" input.jpg  output.jpg #假设图片比500x300小就保持原样,以防小图片被放大失真。    

    2.生成不同比例缩略图 

        一般相冊等应用,都会提供缩略图和预览图,这些缩略图相同不能简单的用css来大小限制,要为每一个图片生成不同比例的预览图。 

    3.去除多余信息 

        Exif信息是数码相机在拍摄过程中採集的一系列信息,这些信息放置在我们熟知的jpg文件的头部,也就是说Exif信息是镶嵌在JPEG图像文件格式内的一组拍摄參数,主要包含摄影时的光圈、快门、ISO、日期时间等各种与当时摄影条件相关的讯息,相机品牌型号,色彩编码,拍摄时录制的声音以及全球定位系统(GPS)等信息。简单的说,它就好像是傻瓜相机的日期打印功能一样,仅仅只是Exif信息所记录的资讯更为详尽和完备。只是,具有Exif信息的JPEG图像文件要比普通的JPEG文件略大一点。还有就是像PS这样的软件处理过的图片会有“program comments”。假设不是专业的摄影类站点,这些信息是没实用的,能够去掉: 

    [html] view plaincopy
     
    1. convert -strip input.jpg output.jpg    

    4.调节压缩比 

        大多时候,我们的站点并不须要那么清楚的图片,适量调节JPG图片的压缩比会降低图片大小,肉眼并不会分辨出质量被压缩后的图片。通常75%是最佳比例。 

    [html] view plaincopy
     
    1. convert -quality 75% input.jpg output.jpg    


    上面几个步骤能够一次搞定: 

    [html] view plaincopy
     
    1. convert -resize "500x300" -strip -quality 75% input.jpg output.jpg    


    上面说的都是针对JPG格式的处理方式,以下说一下BMP,GIF,PNG等格式的处理。 
    对于BMP直接转成JPG就能够了。再依照上面的方式处理。 

    而GIF和PNG貌似有些特殊。GIF的一些特性(动画效果,透明等)是JPG沒有的,能够依据实际情况选择转或不转,假设转换成jpg,取第一帧仅仅须要这样: 

    [html] view plaincopy
     
    1. convert -format jpg input.gif input.jpg   


    PNG也能够通过降低PNG图片color数量的办法达到压缩的目的。可是这样的办法压缩出来的图像能够明显看出来失真,而且呈锯齿状。 
    对于真实世界的PNG图片(通常指照片),一般先转换成JPG,再通过上面的办法来压缩。 

    可是要注意一点,透明或半透明的PNG图片在转换成JPG时透明部分会变成黑色。。。建议做用户头像时候不要转成JPG。。非常难看~~~ 
    本人头像就是深受毒害。。 

    关于图片扩展名 

    发现大部分站点喜欢把用户上传的图片(头像,相冊等)都统一转成特定格式(一般都是jpg)。这样做的潜在弊端就是在用像ImageMagick这样的软件处理的时候会依据扩展名做隐式格式转换。 
    个人认为在保存图片的时候不加扩展名处理起来更灵活一些。 

    注:把上面的命令行用mini_magick改写用到rails里非常easy的。mini_magick本质就调用系统命令行嘛~~ 

    links: 
    本文所说的都是对用户上传的图片处理,对站点自身的图片(header,banner等)处理《Even Faster Websites》一书第十章里面写的非常具体了: 
    http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756 

    许多其他ImageMagick使用方法: 
    http://www.imagemagick.org/script/index.php 

  • 相关阅读:
    【目录】循序渐进学.Net Core Web Api开发系列
    UML各种图总结-精华
    UML各种线的含义
    最新10大Python面试常问的问题,60%的人都不会
    Java—线程池ThreadPoolExecutor案例详解,高薪必备
    HashMap 的 7 种遍历方式与性能分析,高薪必学
    DelayQueue核心源码解析,Java面试必学
    Spring源码-循环依赖,Java架构师必学
    JAVA编程思想,去掉别扭的if,自注册策略模式优雅满足开闭原则,80%的人都不知道
    用Python实现植物大战僵尸游戏,很酷
  • 原文地址:https://www.cnblogs.com/mfryf/p/3519587.html
Copyright © 2011-2022 走看看