文档中心 >Google PageSpeed

优化图片

概览

尽量减小图片尺寸,以缩减用户等待资源加载的时间。适当地设置图片的格式并进行压缩可以节省大量的数据字节空间。这样可以为那些网络连接较慢的用户节约时间,还可以为有流量套餐限制的用户节省成本。

什么是优化Web图像?

你用Photoshop或Illustrator、Fireworks程序创建的图像看起来是惊人的,但往往文件都非常大。这是因为,图像的制作格式使得它们更易于手工以不同的方式进行操作。

随着每个图像体积以兆字节般的增大,如果你把这些图像放到网页上,网页的加载会变得非常缓慢。

优化您的Web图像意味着以对网页友好的格式保存或编译你的图片,这取决于图像包含什么内容。

图像保存数据不只是我们在屏幕上看到的像素等。这些数据可以增加不必要的尺寸从而导致用户等待图像下载需要更长的加载时间。

如果你还没有优化,那么在好处方面来说,优化图片应该是你网页速度优化早期要做的事。

它是如何工作的?

简单来说,优化图像是通过删除不必要的保存在图像中的数据,从而减少图像的大小,这要以用在网页哪里为基础。

通过Web优化图像可以减少高达80%的总页面加载大小。

我们要知道压缩有两种形式,有损和无损。

保存有损格式的图片看起来比原始图像略有不同。请记住,这只是在非常接近的样子可见。有损压缩对网页来说是非常好的,因为图像使用少量的存储器,但也可以是充分地像原始图像。

保存无损格式的图像保留所有需要产生原始图像的信息。出于这个原因,这些图片承载大量的数据,因此是一个非常大的文件。

我们也可以通过保存为相应的尺寸优化Web图像。使用CSS在网页里调整图像大小是有帮助的,但问题是Web浏览器还是会下载整个原始文件,然后调整它的大小和显示。

你能想象采用一张海报大小的图像,但使用它只作为一个缩略图?一个小小的只有20像素的图像,却需要加载整个原始海报的时间,我们其实可以只需要装载一个20像素的图像的时间。

为什么优化图片这么重要?

优化图片是如此重要的最主要的原因是,因为90%的大多数网站都依赖于图像,所以有很多的图像文件。使用未经压缩的图像和不正确的格式,会大大减慢你的网页加载时间。

怎样优化网页图片?

图像的全面优化可以说是通往完美的一个艺术,因为有很多各种各样的你可能会处理的图像。下面是最常见的优化您的网页图片的方法。

  • 减少图像周围的空白。 一些开发人员使用空白的填充这是万万要不得的。裁剪图像,删除图像周围任何空白,并使用CSS来填充。
  • 使用正确的文件格式。如果你有图标,或者没有太多颜色的图形,可以保存为GIF这种较少颜色的图形。如果你有更详细的图形,可以使用JPG文件格式,降低质量保存图像。
  • 以适当的尺寸保存图像。如果您正在使用HTML和CSS来调整您的图像,那么不要这样。以期望的大小保存你的图像,从而减少文件大小。

要调整图片大小,你将不得不使用一些程序。对于基本的压缩,您可以使用一个简单的编辑程序如GIMP。对于更高级的优化,你可以使用Photoshop,Illustrator或Fireworks来保存特定的文件。

Google建议

您应对所有图片进行基本优化和高级优化。基本优化包括裁剪不必要的区域,将颜色深度降至可接受的最低水平,移除图片评论以及将图片保存为恰当的格式。您可以使用任意图片编辑程序(例如,GIMP)执行基本优化。高级优化包括对JPEG和PNG文件执行进一步的压缩(无损压缩)。

使用图片压缩工具

市面上有许多工具可用来对图片文件执行进一步的无损压缩,且不会对图片质量造成任何影响。可以使用webkaka的在线图片压缩优化工具。

选择恰当的图片文件格式

您应测试一下哪种格式最适合您的图片,尽管我们在下面推荐了一些较高级别的格式:

  • PNG格式几乎一直优于GIF格式,尽管某些旧版浏览器只能为PNG格式提供部分支持。
  • 为较小或简单的图形(例如,小于10x10像素的图形或调色板小于3色的图形)以及包含动画的图片使用GIF格式。
  • 为所有摄影风格的图片使用JPG格式。
  • 请勿使用BMP格式或TIFF格式。

JPG图片保存为“标准式”还是“渐进式”?

JPG图片保存时可以选择不同的形式,“标准式”和“渐进式”,“标准式”图片是从上到下逐渐显示,“渐进式”图片是先显示图片轮廓,,再由模糊逐渐变清晰。

两种方式各有优点和缺点,但是请注意,“渐进式”图像在IE里的表现是相当糟糕的,对于“渐进式”图像,IE浏览器根本不预先显示低分辨率的模糊图片轮廓,而是一片空白!只有当图片完全加载完后,才唰的一下显示整张图片。这给用户的体验是很坏的。详细分析和演示请看文章:JPG图片保存时慎用“渐进式浏览器显示”格式

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/docs/insights/OptimizeImages