不仅网站的加载时间会影响其在搜索引擎中的排名，加载时间越长，流失访问者的可能性就越大。带宽使用量中很大一部分——尤其是对于电子商务网站——来自图像。因此，图像大小是网站速度的一个重要组成部分。本文将介绍优化图像以提高加载速度的方法。
文件类型
优化图像时，首先要考虑的最简单因素是文件格式。某些图像文件格式更适合特定的图像。例如，JPG 最适合用于摄影图像。而 PNG 则最适合用于颜色较少或使用了透明度的简单图像。24 位 PNG 最适合包含摄影元素和简单图形的图像。对于颜色少于 256 种的图像，8 位 PNG 可以进一步减小文件大小。
对摄影图像使用 JPG。
对简单图像使用 PNG-8。
当简单图像与摄影元素结合时，使用 PNG-24。
还有其他图像格式如 TIF、GIF 和 SVG 可以使用。但大多数网络图形使用的是 JPG 和 PNG。一个基本的经验法则是：对任何摄影类图像使用 JPG，对其他所有图像使用 PNG。如果你不确定该使用哪种文件格式，可以尝试将同一张图像分别保存为 JPG 和 PNG，然后比较质量和文件大小。
保存方法
图像优化的另一个重要考虑因素是保存方法。许多应用程序在保存图像时提供优化选项，如压缩、元数据（即大小、分辨率和创建日期）以及色彩配置文件。如果你使用 Adobe 软件进行图像编辑，请在优化图像时使用“用于 Web 和设备”（Save for Web & Devices）对话框。
在使用“用于 Web 和设备”对话框时，你可以预览压缩后的图像效果，编辑元数据，调整图像大小，并预览图像的文件大小。这使你能够轻松比较保存为 PNG-8、PNG-24 或 JPG 文件格式时生成的文件大小差异。
放大此图像
Adobe 软件产品中的“Web 和设备”预览。
“用于 Web 和设备”还允许你将图像转换为适用于网络的 sRGB 色彩模式。有时你可能会处理使用 CMYK 色彩模式或针对印刷优化的色彩模式的图像。由于 CMYK 色彩模式使用四种颜色（青色、品红色、黄色和黑色），而 RGB 使用三种颜色（红色、绿色和蓝色），因此以 CMYK 色彩模式保存会略微增加图像文件大小。
如果你不使用 Adobe 软件进行图像编辑，可以考虑使用 RIOT——Radical Image Optimization Tool。RIOT 是一款适用于 Windows 的免费软件，可对 JPG、GIF 和 PNG 图像进行优化。RIOT 可以压缩图像、删除元数据并调整图像色彩，从而减小图像文件大小。
放大此图像
RIOT 是一款免费的 Windows 应用程序，有助于优化图像。
图像调整大小
始终优先以正确的尺寸保存图像，而不是依赖浏览器进行缩放。如果浏览器将一张 1024×1024 像素的图像缩放到 250×250，用户仍然需要下载较大的 1024×1024 尺寸的图像。请确保上传正确尺寸的图像，而不要依赖浏览器来调整大小。
多次使用同一张图像
减少图像带宽消耗的另一种方法是在整个网站中多次使用相同的图像。例如，网站的每个页面都可以使用相同的标志、菜单图像和页眉图像。这意味着用户只需下载一次该图像，之后在浏览其他页面时，浏览器即可从缓存中显示该图像。
你也可以以类似的方式优化某些背景图像。例如，如果你使用的是纹理背景，或许可以创建一个较小的可重复平铺图像，而不是使用单个大图像。渐变背景图像也适用同样的原则。
精灵图与预加载
一种有助于减少加载时间的实用做法是使用 CSS 精灵图（CSS sprites），即通过 CSS 代码显示较大图像的一部分。该技术常用于按钮的鼠标悬停状态。例如，使用精灵图可以在网站上显示图像的一部分作为按钮，并在用户鼠标悬停时显示该图像的另一部分。
虽然精灵图通常用于交互式菜单和按钮，但它们也可以用于从单个图像文件中显示多个网站图像。这样浏览器只需下载一个图像，而不是像三四个这样的多个图像。
除了精灵图之外，还可以使用 JavaScript、jQuery、Ajax 或 CSS 对图像进行预加载。当图像被预加载时，浏览器会下载或“预加载”该图像，随后在用户访问时立即显示。对于图像密集型网站，尤其是包含照片画廊的网站，预加载可以显著缩短加载时间。
使用 CSS 替代图像
有时，减少图像加载时间的最佳方法是根本不使用图像。CSS 的改进使得浏览器能够仅通过纯 CSS 渲染某些“图像”。现在可以使用 CSS 生成圆角矩形、渐变、阴影和透明图像。需要注意的是，并非所有浏览器都支持这些技术，在用 CSS 替换图像之前，应仔细考虑浏览器兼容性问题。