MENU

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

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

  • 本篇文章主要告诉大家如何通过对网站图片的优化来加快网站的访问速度以及友好程度。
  • 另外介绍了一款我常用的客户端图片优化神器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. AdviseRed AdviseRed     Windows 10 /    Google Chrome

    快点给老子更!!!!!!!!@(滑稽)

  2. 括弧 括弧     Android Oreo /    QQ浏览器

    想给你一个善意的提醒(没有恶意),管好你女朋友,别让别人议论纷纷了,看你有点傻,好自为之

    1. 左岸 左岸     Android Pie /    Google Chrome

      @括弧感谢

  3. 日月明 日月明     MacOS /    Google Chrome

    屁股图令人瞩目@(滑稽)

    1. 左岸 左岸     Android Pie /    Google Chrome

      @日月明守望屁股@(滑稽)

  4. 一起微笑 一起微笑     Android Pie /    Google Chrome

    不限流量vps@(呵呵)

    1. 左岸 左岸     MacOS /    Google Chrome

      @一起微笑主要是为了加载速度,其次流量::quyin:1huaji::

  5. wordpress建站吧 wordpress建站吧     MacOS /    Google Chrome

    我是冲着那个小图图来的

    1. 左岸 左岸     MacOS /    Google Chrome

      @wordpress建站吧哈哈哈,我也很喜欢那个小图图@(滑稽)

  6. 崔先森 崔先森     Ubuntu /    Google Chrome

    哥们,每一张都手动,你这得有多高要求啊OωO

    1. 左岸 左岸     Windows 10 /    Google Chrome

      @崔先森为了美观OωO,毕竟头图比例是固定的,不裁一下难免显示不当 ::quyin:heng::

  7. 线上抢房 线上抢房     MacOS /    Google Chrome

    可以,可以,学习了

    1. 左岸 左岸     MacOS /    Google Chrome

      @线上抢房稳稳的老哥 ::quyin:1huaji::

  8. 响石潭 响石潭     Windows 7 /    FireFox

    学习,正好为图片大困扰,感谢分享

    1. 左岸 左岸     MacOS /    Google Chrome

      @响石潭互相学习,您的主页头图尺寸稍大,7张图片大部分都在500K左右,确实需要优化一下

    2. 响石潭 响石潭     Windows 7 /    FireFox

      @左岸嗯嗯,谢谢

    3. 左岸 左岸     MacOS /    Google Chrome

      @响石潭不客气 ::quyin:OK::

  9. 马也随笔 马也随笔     Windows 7 /    FireFox

    技术这块懂得不多,博客图片比较少。有时候写景色的时候,会压缩后上传。

    1. 左岸 左岸     MacOS /    Google Chrome

      @马也随笔像我写东西经常引用图片啥的,对这种工具依赖性挺大的,总之只要是图片,还是压缩一下比较好 ::quyin:heng::

  10. 演员 演员     Android Oreo /    QQ浏览器

    有意思!

    1. 左岸 左岸     MacOS /    Google Chrome

      @演员嘿嘿 ::quyin:1huaji::