MENU

利用Imagine进行网站图片压缩优化

March 1, 2019 • Read: 10935 • 网站优化

  • 本篇文章主要告诉大家如何通过对网站图片的优化来加快网站的访问速度以及友好程度。
  • 另外介绍了一款我常用的客户端图片优化神器Imagine,全平台支持。

一. 为何要优化网站图片?

图像作为大部分网站的关键组成部分,通常占用了加载时间的百分之50以上,无论是论坛还是个人博客,对于网站图片的优化都很重要,如果你想加快你的网站访问速度,以及减少流量的损耗,那么这一步对你来说是必不可少的!
看到有些网站的背景图或是头图动辄1、2M,单加载图片的时间就要几秒钟了,就等的很着急 ::quyin:angry:: 。我的原则是色彩较少的图片控制在50k以下,大图片控制在200k以下。这样无论是图片大小还是观感都可以保证。

二. 如何优化网站图片?

首先,如果有开启了CDN的童鞋,请务必要开启cdn中的成本控制中的WebP自适应(以又拍云为例),可以大大减少网络传输消耗以及加快加载速度!

  • 设置界面QQ20190301-124143@2x.png

然后可以通过图片压缩工具压缩图片大小。之前我用过很多工具,诸如Ps快速导出为PNG-8、TinyPngSquoosh等,PS太重量且步骤繁杂,后两者或是不能批量处理,或是存在不能自定义质量的限制,虽然可用,但不尽如人意,相对于这种网页端,我还是更倾向于客户端的软件。我一直在寻找,好用的软件在哪里?

直到我遇到了Imagine!这是一款用于压缩PNG和JPEG的桌面应用程序,具有现代友好的UI。配合之前讲过的PicGo我的图片压缩以及上传环节变得极为有效率!

特征

  • 多格式(JPEG,PNG,WebP)
  • 格式转换
  • 跨平台
  • GUI
  • 批量优化
  • 多语言支持
  • 功能(支持批量操作:导入、处理、保存)QQ20190301-121833@2x.png
  • 实操界面(可以看到压缩效果)QQ20190301-131246@2x.png
  • 效果对比

优化前 PNG 1MBPNG 928KB
优化后 WebP 100KBWebP 100KB
这里第一张图片没有经过处理,可以看出有什么区别吗?

对于网站头图,一定要掌握,像是handsome的头图比例为8:3,我的文章头图几乎都是自己手动裁,并且优化过的,我自认为观感还不错。

另外正确利用img标签的width 属性来调整你图片的大小也非常重要,可以使网页变得美观优雅!

图片较多的网站还可以选择懒加载LazyLoad来节省流量的损耗,这也是绝大部分美图站、论坛以及门户网站采取的策略。

三. 下载地址

Leave a Comment

33 Comments
  1. 刘大喵 刘大喵     Windows 7 /    Internet Explore

    直都在用这个,挺不错的

    1. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵嘿嘿,确实还是个好东西 ::quyin:1huaji::

  2. 枫灵er 枫灵er     Windows 7 /    Internet Explore

    我是习惯性把图片传到微博,还能顺带加水印,二者那哪个会更好点啊

    1. 左岸 左岸     MacOS /    Google Chrome

      @枫灵er可以先用软件优化图片再用PicGo传到微博图床的,我看你网站摄影集的图片质量都不是很高,微博没给你用原图 ::quyin:1huaji:: ,我试了用这个软件可以把2.1M的摄影作品转化为WebP格式只有200k,同时质量还有保证! ::quyin:witty::

    2. 枫灵er 枫灵er     Windows 7 /    FireFox

      @左岸好,那抽空整一下,其实我没用插件传照片来着,从来手传,因为我把照片都放在了一个特定的相册专辑里面

    3. 左岸 左岸     MacOS /    Google Chrome

      @枫灵er手动传有画质损失还不方便,PicGo可以直接返回html或者markdown代码 ::quyin:1huaji::

  3. 芸玖 芸玖     Windows Vista /    Opera

    我怀疑你放的是同一张图片 ::quyin:1huaji::

    1. 左岸 左岸     MacOS /    Google Chrome

      @芸玖你看我认真的脸 ::quyin:1huaji::

  4. 微信抢房 微信抢房     Windows 7 /    FireFox

    不错,这样网站访问速度的确快了

    1. 左岸 左岸     MacOS /    Google Chrome

      @微信抢房我觉得你网站头图的大小控制的很不错 ::quyin:1huaji::

  5. ohmyga ohmyga     iPhone /    Safari

    ::quyin:1huaji:: Get√

    1. 左岸 左岸     MacOS /    Google Chrome

      @ohmyganice,沙发坐稳了 ::quyin:1huaji::