关于主题背景图的压缩与优化

  目前主题里可以使用多张随机大图作背景,如果不做好图片压缩和优化,可能会严重影响网站流畅性。下面简单介绍两种比较便捷的优化方案。

优化说明

  • 请使用 jpg 后缀名的背景图片;
  • 如果可以,使用 渐进式JPEG,让图片加载时逐渐清晰;
  • 将图片品质尽量调低,一般可以压缩到几十kb(背景图半透明显示,因此细节并不重要);

    下图1 为目前主题自带背景图的分辨率和文件大小展示,图2 为渐进式图片加载示例

Yelee Background info. Progressive JPEGs

优化方案

PhotoShop

  • 电脑上如果装有 PhotoShop, 那用其来优化图片真是再好不过了
  • PS 打开图片 → 文件 → 存储为 Web 所用格式 → JPEG 格式,品质 0,勾选 连续 (渐进式),最后存储,这样一张高压缩渐进式的 JPG 背景图就做好了

image Compression by PhotoShop

智图

  • 智图 是腾讯 ISUX 出品的在线图片优化工具,可以方便的对比优化前后的图片,同时可以自行调节图片品质,除了不能设置 渐进式JPEG , 其他基本满足背景图优化需要
  • 进入网站后按提示上传图片,再调低图片品质,之后下载图片即可

    因为主题背景图为 jpg 格式,其他格式请转为 jpg 再上传到该网站优化。转换格式方法很多,比如用 Windows 自带的画图打开图片然后另存为 jpg

智图

方案对比

  • 原图为 420kb,智图选择最低品质(10)后约为 129kb;
  • PhotoShop 选择品质 0,可以压缩到 62k,同时可以设为 渐进式JPEG
  • 因此,有条件的话更推荐使用 PS 压缩背景图。

相关链接

  1. 智图: http://zhitu.isux.us/
  2. TinyPNG: https://tinypng.com/
  3. 渐进式 jpeg(progressive jpeg) 图片及其相关 by 张鑫旭 on 2013/01/07: http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/
  4. 呆毛王示例壁纸下载: http://moxfive.xyz/resources/saber.jpg
  5. 最人性化的壁纸网站: http://www.wallpaperpcmobile.com/
文章目录
  1. 1. 优化说明
  2. 2. 优化方案
    1. 2.1. PhotoShop
    2. 2.2. 智图
    3. 2.3. 方案对比
  3. 3. 相关链接