使用ImageMagick对图片进行全面压缩
图片在网站所占的比重越来越重。更好的优化图片可以提高网站速度。减少宽带流量。
1.对用户上传图片进行缩放
对于用户自己上传的图片不能简单的 用css限制大小,因为这样每次加载图片时候还是会加载整幅大图。占用多余的宽带,并且影响页面加载速度。应该根据实际显示需要进行缩放。比如我想要用户相册里的图片大小不能超过500x300:
用ImageMagick处理起来很简单
- convert -resize “500x300>“ input.jpg output.jpg #如果图片比500x300小就保持原样,以防小图片被放大失真。
convert -resize "500x300>" input.jpg output.jpg #如果图片比500x300小就保持原样,以防小图片被放大失真。
2.生成不同比例缩略图
一般相册等应用,都会提供缩略图和预览图,这些缩略图同样不能简单的用css来限制大小,要为每个图片生成不同比例的预览图。
3.去除多余信息
Exif信息是数码相机在拍摄过程中采集的一系列信息,这些信息放置在我们熟知的jpg文件的头部,也就是说Exif信息是镶嵌在JPEG图像文件格式内的一组拍摄参数,主要包括摄影时的光圈、快门、ISO、日期时间等各种与当时摄影条件相关的讯息,相机品牌型号,色彩编码,拍摄时录制的声音以及全球定位系统(GPS)等信息。简单的说,它就好像是傻瓜相机的日期打印功能一样,只不过Exif信息所记录的资讯更为详尽和完备。不过,具有Exif信息的JPEG图像文件要比普通的JPEG文件略大一点。还有就是像PS这种软件处理过的图片会有“program comments”。如果不是专业的摄影类网站,这些信息是没有用的,可以去掉:
- convert -strip input.jpg output.jpg
convert -strip input.jpg output.jpg
4.调节压缩比
大多时候,我们的网站并不需要那么清晰的图片,适量调节JPG图片的压缩比会减少图片大小,肉眼并不会分辨出质量被压缩后的图片。通常75%是最佳比例。
- convert -quality 75% input.jpg output.jpg
convert -quality 75% input.jpg output.jpg
上面几个步骤可以一次搞定:
- convert -resize “500x300” -strip -quality 75% input.jpg output.jpg
convert -resize "500x300" -strip -quality 75% input.jpg output.jpg
上面说的都是针对JPG格式的处理方式,下面说一下BMP,GIF,PNG等格式的处理。
对于BMP直接转成JPG就可以了。再按照上面的方式处理。
而GIF和PNG貌似有些特殊。GIF的一些特性(动画效果,透明等)是JPG没有的,可以根据实际情况选择转或不转,如果转换成jpg,取第一帧只需要这样:
- convert -format jpg input.gif input.jpg
convert -format jpg input.gif input.jpg
PNG也可以通过减少PNG图片color数量的办法达到压缩的目的。但是这种办法压缩出来的图像可以明显看出来失真,而且呈锯齿状。
对于真实世界的PNG图片(通常指照片),一般先转换成JPG,再通过上面的办法来压缩。
但是要注意一点,透明或半透明的PNG图片在转换成JPG时透明部分会变成黑色。。。建议做用户头像时候不要转成JPG。。很难看~~~
本人头像就是深受毒害。。
关于图片扩展名
发现大部分网站喜欢把用户上传的图片(头像,相册等)都统一转成特定格式(一般都是jpg)。这样做的潜在弊端就是在用像ImageMagick这样的软件处理的时候会根据扩展名做隐式格式转换。
个人觉得在保存图片的时候不加扩展名处理起来更灵活一些。
注:把上面的命令行用mini_magick改写用到rails里很容易的。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对图片进行全面压缩相关推荐
- Python 利用聚类算法对图片进行颜色压缩
背景 最近看到其他公众号发的一篇文章<三个印度人改变压缩算法,一意孤行整个暑假,却因"太简单"申不到经费>,DCT是最原始的图像压缩算法 全称为Discrete Cos ...
- ImageMagick高清压缩图片-GraphicsMagick+im4java
之前有写过imageMagick压缩图片的文章,但是那篇文章中用到的是jmagick. JMagick是一个开源API,利用JNI(Java Native Interface)技术实现了对ImageM ...
- 使用react-cropper结合图片压缩方法对图片进行裁剪压缩处理
最近项目要使用图片裁剪上传,因为项目采用的是react+antd,所以第一时间想到的是ImgCrop插件,但是这不满足项目需求,项目要求的是能够缩放裁剪框,最后确定了采用react-cropper来实 ...
- 前端性能优化-对图片进行后压缩发向后端
思路是使用filereader读取input的上传的图片,返回一个base64 传到img实例,绘制到canvas上并通过toDataURL方法进行压缩 获取到返回的base64文件,我们接口要传fi ...
- android图片压缩上传系列-基础篇
开发中遇到需要上传图片的场景还是很常见的,这就涉及到图片的压缩处理.如果不进行压缩,势必造成消耗大量的流量,下载图片的速度慢等. 关于android如何压缩,网上的资料也是很多,但大多数都是代码片段, ...
- 基于奇异值分解(SVD)的图片压缩实践
文章目录 1. 前言 2. 原理简介 2.1 SVD定义 3. 实践代码 4. 参考文献 1. 前言 数字图片在计算机中是以矩阵形式存储的.所以可以通过矩阵理论和矩阵算法对数字图像进行分析和处理.本文 ...
- 实战:轻量级分布式文件系统FastDFS(GraphicsMagick图片压缩)
轻量级分布式文件系统FastDFS--实现用户头像上传/压缩屏幕适配 一.需求分析 1.1 业务场景: 用户上传的头像图片大小不一.手机和PC等设备显示尺寸也存在差异,因此需要能根据http请求指定的 ...
- vue 实现压缩图片上传到oss
我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样.你可能选择使用 ...
- 最详细的Android图片压缩攻略
Mr.Louis的博客地址: https://blog.csdn.net/weixin_44005563 最近在研究图片压缩原理,看了大量资料,从上层尺寸压缩.质量压缩原理到下层的哈夫曼压缩,走成华大 ...
最新文章
- P2119 魔法阵(优化枚举,数学运算优化)难度⭐⭐⭐★
- 扩有mysql的磁盘_为提高MySQL性能而在磁盘IO方面的设置
- 批量查询,mget语法,mget批量查询(来自学习资料,第26节)
- 以正确的方式招募数据科学家!
- pat甲级什么水平_转让河北工程设计建筑行业(建筑工程)甲级资质
- AlertDialog(对话框)
- 【English】20190430
- ARM汇编初探---汇编代码中都有哪几类指令---ARM伪指令介绍
- vmd分解matlab程序,matlab中使用VMD(变分模态分解)
- 用友数据库服务器如何修改,用友u8数据库服务器怎么设置
- PMP学习笔记 第12章 项目采购管理
- w ndows7旗舰版镜像下载,win7旗舰版32位原版iso
- 股票大作手操盘术---择时
- 挣脱注意力经济:为什么应该练习数字极简主义?
- NetApp AFF A 系列全闪存存储阵列
- 【题解】将军令 Luogu P3942 (未完成)
- linux挂死oops定位问题
- FreeTpye库学习笔记:将矢量字体解析为位图
- GStreamer教程-基础教程2:GStreamer概念
- 利用机器学习进行放假预测
热门文章
- (C语言)实现基于PHP的某公司自来水收费管理系统
- 【图文并茂】六十多个 vscode 插件,助你打造最强编辑器
- jira是干什么_jira是什么
- 使用数字芯片将5V转3.3V方案电路图
- uva 10977 Enchanted Forest 魔幻森林
- 英属泽西发行“金猪送福”邮票 草原剪纸花开海外
- 孟:解密获取网站访客QQ号码的方法及原理
- java 纳秒 秒_如何使用TimeUnit枚举将纳秒转换为秒?
- 万字详解!Git 入门最佳实践 !
- 计算机在英语教学中的应用课题,浅谈信息技术在英语教学中的应用