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

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

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

用ImageMagick处理起来非常简单

  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”。假设不是专业的摄影类站点,这些信息是没实用的,能够去掉:

  1. convert -strip input.jpg output.jpg

4.调节压缩比

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

  1. convert -quality 75% input.jpg output.jpg

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

  1. convert -resize "500x300" -strip -quality 75% input.jpg output.jpg

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

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

  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

ImageMagick 压缩图片 方法的更多相关文章

  1. vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法

    HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...

  2. js 压缩上传的图片方法(默认上传的是file文件)

    //压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...

  3. HTML-js 压缩上传的图片方法(默认上传的是file文件)

    //压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...

  4. Android压缩图片到100K以下并保持不失真的高效方法

    前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...

  5. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  6. 文件上传,服务端压缩文件方法,重点是png与gif图片的压缩,保证了透明度与动画

    /// <summary> /// 上传文件帮助类 /// </summary> public class ImageUploadHelper { #region SaveVi ...

  7. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  8. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  9. node.js中使用imagemagick进行图片裁剪压缩

    node.js中使用imagemagick进行图片裁剪压缩 安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...

随机推荐

  1. cocos2d-x学习资源汇总(持续更新。。。)

    引用地址:http://www.cnblogs.com/zilongshanren/archive/2012/02/17/2356516.html 我之前一直学习c++的,第一次接触cocos2d是o ...

  2. FormView用法

    功能描述: 学生可以对相应学校机构进行投诉建议. form表单 class SuggestForm(forms.Form): TYPE_CHOICES = ( (0, u'学校'), (1, u'学院 ...

  3. spring bean管理 笔记1

    轻量级,无侵入 Bean管理 1 创建applicationContext.xml 2 配置被管理的Bean 3 获取Bean pom.xml配置 <dependency> <gro ...

  4. JavaEE Tutorials (4) - 企业bean入门

    4.1创建企业bean52 4.1.1编写企业bean类53 4.1.2创建converter Web客户端53 4.1.3运行converter示例544.2修改Java EE应用55 4.2.1修 ...

  5. 【转】 随机梯度下降(Stochastic gradient descent)和 批量梯度下降(Batch gradient descent )的公式对比、实现对比

    梯度下降(GD)是最小化风险函数.损失函数的一种常用方法,随机梯度下降和批量梯度下降是两种迭代求解思路,下面从公式和实现的角度对两者进行分析,如有哪个方面写的不对,希望网友纠正. 下面的h(x)是要拟 ...

  6. Codeforces 41D Pawn 简单dp

    题目链接:点击打开链接 给定n*m 的矩阵 常数k 以下一个n*m的矩阵,每一个位置由 0-9的一个整数表示 问: 从最后一行開始向上走到第一行使得路径上的和 % (k+1) == 0 每一个格子仅仅 ...

  7. iOS开发进阶之 UIWebView

    刚接触IOS开发1年多,现在对于混合式移动端开发越来越流行,因为开发成本上.速度上都比传统的APP开发要好,混合式开发是传统模式与PC网页端相结合的模式.那么提到了 APP的混合模式开发,在Andro ...

  8. Android,机器狗应用

    源码如下: package com.wyl.jqr; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  9. IDEA 中使用Maven Compile 找不到本地 Jar

    本文地址:http://www.cnblogs.com/duwei/p/4656410.html 在IDEA 的子 Maven Module 中使用 compile 进行编译, 一开始提示从私有远程仓 ...

  10. Redis中的value包含中文显示的问题?

    linux 系统 redis不识别中文  如何显示中文 在Redis中存储的value值是中文“马拉斯加”Shell下get获取后展示的结果为:\xc2\xed\xc0\xad\xcb\xb9\xbc ...