首页 > 其他分享 >使用ImageMagick为你的网站减重

使用ImageMagick为你的网站减重

时间:2022-12-16 17:34:19浏览次数:58  
标签:减重 ImageMagick 网站 convert JPG jpg input PNG 图片


Images as a percentage of page weight for the Alexa top 10 global web sites 

 


图片在网站所占的比重越来越重。更好的优化图片可以提高网站速度。减少宽带流量。 



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


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


用ImageMagick处理起来很简单 


Im代码   ​​​

1. convert -resize "500x300>"



2.生成不同比例缩略图 

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


3.去除多余信息 

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

Im代码   ​​​


    1. convert -strip input.jpg output.jpg


    4.调节压缩比 

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

    Im代码   ​​​

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


    上面几个步骤可以一次搞定: 


    Im代码   ​​​

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


    上面说的都是针对JPG格式的处理方式,下面说一下BMP,GIF,PNG等格式的处理。 


    对于BMP直接转成JPG就可以了。再按照上面的方式处理。 


    而GIF和PNG貌似有些特殊。GIF的一些特性(动画效果,透明等)是JPG没有的,可以根据实际情况选择转或不转,如果转换成jpg,取第一帧只需要这样: 

    Im代码   ​​​

    1. 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,网站,convert,JPG,jpg,input,PNG,图片
    From: https://blog.51cto.com/u_3457306/5948022

    相关文章

    • 网站打不开如何解决?教你4个方法搞定它!
      网站打不开如何解决?教你4个方法搞定它!网站如果打不开了,会影响正常的使用,并且对于SEO关键词排名还是有影响的,那么网站打不开如何解决?可能对于不懂技术的客户来说这是......
    • 北京博奥智源,分享网站运维需求说明
      项目技术及参数要求系统架构系统架构要求使用B/S技术,同时需要兼容手机端展示。部署方式校内本地化部署技术架构系统采用java+mysql数据库......
    • 保护网站安全一定要牢记这五点!
      在信息化高速发展的今天,无论是对于企业还是站长而言,保护网站的安全性都是重要的事情,因为网站不仅仅是企业的门面,更是收获客户的重要营销工具。那么如何有效的保护网站安......
    • 构建完美作品集网站十步走
      你有很多理由去建立自己的作品集。如果你是自由职业者,则你需要有个地方来汇报工作、方便他人联系。如果你是名学生(或者正在待业中),则有必要通过作品集告诉你的潜在客户你有......
    • 信息那么多,学一学如何从网站中提取目标数据
      当前,到网络中查找想要的信息是最大家普遍的行为之一,不管是工作调研还是单纯学习了解。与此同时,将查找的信息有效提取下来也是必不可少的环节,除了通用的复制粘贴,还有更多手段......
    • 服务器快速搭建AList集成网盘网站【宝塔面板一键部署AList】
      一,前言因为我的网盘里有很多的视频资源,他们分布在不同的网盘中,找起来非常的不方便,所以我使用Alist快速搭建了一个网盘合集在线网站,部署到了我的服务器上。效果图如下:(打码防......
    • 【卫朋】3000+ 字 | 2022年产品人必备的23个设计类网站(2.0版)
      卫朋丨第122篇原创文章阅读提示丨3061字5分钟常用资源,大家可先收藏资源在手,思路我有设计资源网站是产品人打基础的一个有效手段,是解答设计命题的思路参考。但资源诚可贵,实......
    • 【最新】网站下载工具,整站下载工具汇总
       【最新】网站下载工具,整站下载工具汇总整站下载,包括声音,图片,javascirpt等,下载之后可以在本地运行以下排序不分先后,以及是否好用 不过现在很多网站都加入了防爬虫的机制,以......
    • 本地IIS服务 | three.js网站如何设置默认为中文
      https://github.com/mrdoob/three.js下载zip压缩包(github下载网速慢的话,可以复制链接用迅雷试试)解压到C:\inetpub\wwwroot假设已经配置好网站http://localhost:898......
    • ecshop开发的外贸网站欣赏
       名称网址价格网站特点广州包包工厂​​www.haagendess.com.cn/​​4980专业,高贵,时尚上海自行车​​www.bestbikesupplier.com​​4980代码简洁,访问速度快深圳手机Iphone......