目前主题里可以使用多张随机大图作背景,如果不做好图片压缩和优化,可能会严重影响网站流畅性。下面简单介绍两种比较便捷的优化方案。
优化说明
- 请使用
jpg
后缀名的背景图片; - 如果可以,使用
渐进式JPEG
,让图片加载时逐渐清晰; - 将图片品质尽量调低,一般可以压缩到几十kb(背景图半透明显示,因此细节并不重要);
下图1 为目前主题自带背景图的分辨率和文件大小展示,图2 为渐进式图片加载示例
优化方案
PhotoShop
- 电脑上如果装有 PhotoShop, 那用其来优化图片真是再好不过了
- PS 打开图片 → 文件 → 存储为 Web 所用格式 → JPEG 格式,品质 0,勾选
连续
(渐进式),最后存储,这样一张高压缩渐进式的 JPG 背景图就做好了
智图
- 智图 是腾讯 ISUX 出品的在线图片优化工具,可以方便的对比优化前后的图片,同时可以自行调节图片品质,除了不能设置
渐进式JPEG
, 其他基本满足背景图优化需要 - 进入网站后按提示上传图片,再调低图片品质,之后下载图片即可
因为主题背景图为
jpg
格式,其他格式请转为jpg
再上传到该网站优化。转换格式方法很多,比如用 Windows 自带的画图打开图片然后另存为 jpg
方案对比
- 原图为 420kb,智图选择最低品质(10)后约为 129kb;
- PhotoShop 选择品质 0,可以压缩到 62k,同时可以设为
渐进式JPEG
; - 因此,有条件的话更推荐使用 PS 压缩背景图。
相关链接
- 智图: http://zhitu.isux.us/
- TinyPNG: https://tinypng.com/
- 渐进式 jpeg(progressive jpeg) 图片及其相关 by 张鑫旭 on
2013/01/07
: http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/ - 呆毛王示例壁纸下载: http://moxfive.xyz/resources/saber.jpg
- 最人性化的壁纸网站: http://www.wallpaperpcmobile.com/