web图像_Web图像优化的基本介绍

web图像

Images are an essential ingredient of most websites. The visual quality of pictures has a direct impact on the brand image and the message those images convey. And the weight of images usually accounts for a 40-60% of the data transferred on the web.

图片是大多数网站的重要组成部分。图片的视觉质量直接影响品牌形象以及这些形象传达的信息。而且图像的重量通常占网上传输的数据的40-60％。

This usually has the largest impact on loading time over other resources like JavaScript. So, whether we're creating or running a website, we should put in place an image transformation and optimization pipeline.

与其他资源(例如JavaScript)相比，这通常对加载时间有最大的影响。因此，无论是创建网站还是运营网站，都应该建立图像转换和优化管道。

There are many options to do this, from in-house developments based on open source libraries and suites – like ImageMagick – to cloud-based tools and APIs.

从基于开源库和套件的内部开发(例如ImageMagick)到基于云的工具和API，有很多选择。

Whatever tool we use in our deployment, there are four main tasks that, at the very least, any pipeline should accomplish.

无论我们在部署中使用什么工具，至少有四个管道都应完成四个主要任务。

调整图像大小。 (Resize images. )

Image resizing is the first and most important step. It brings a big impact on weight with no visual quality penalty, as long as we don't make it smaller than the displaying resolution.

调整图像大小是第一步，也是最重要的一步。只要我们不使其小于显示分辨率，它就会对重量产生重大影响，而不会影响视觉质量。

We should always set and enforce a maximum image resolution in our website, for instance 2000 px width. Ideally, we'd make our website responsive by setting different breakpoints and delivering images that fit in our users' displays.

我们应该始终在网站上设置并强制使用最大图像分辨率，例如2000 px宽度。理想情况下，我们将通过设置不同的断点并提供适合用户显示的图像来使我们的网站具有响应能力。

If you need help on choosing your breakpoints, check out this article on the best image sizes for web.

如果您在选择断点时需要帮助，请查看有关适用于Web的最佳图像尺寸的本文。

转换为正确的格式。 (Convert to the right format. )

JPEG is the default format in the web. PNG may work better with graphic designs featuring solid colors, but in these cases it may yield lower weight with better quality.

JPEG是网络中的默认格式。 PNG在具有纯色的图形设计中可能会更好地工作，但是在这些情况下，它可能会产生重量更轻，质量更好的图形。

You may consider offering WEBP for Chrome, Edge, Firefox and Android users, keeping JPEG as fallback for Safari and iOS. It may save 10-30% of image weight with very similar quality, perhaps some more blur and less ringing.

您可以考虑为Chrome，Edge，Firefox和Android用户提供WEBP，而将JPEG作为Safari和iOS的后备。它可以以非常相似的质量节省图像重量的10％至30％，也许更多的模糊和更少的振铃。

For an up to date revision you may check out this article on image formats for web.

有关最新版本，您可以查看有关Web图像格式的本文。

正确压缩图像。 (Compress images properly. )

We can do this with a powerful open source suite like ImageMagick and simply set a quality factor (typically 75 to 85) for JPEG (and WEBP) images. You can still use a perceptual metric to better protect quality and further squeeze weight – this is an option available in some cloud image optimization tools.

我们可以使用功能强大的开源套件(例如ImageMagick)来做到这一点，并且只需为JPEG(和WEBP)图像设置质量因子(通常为75到85)。您仍然可以使用感知指标来更好地保护质量并进一步压缩重量-这是某些云图像优化工具中可用的选项。

摆脱元数据。 (Get rid of metadata. )

From shooting to editing, images accumulate metadata, like exif data. While they may be useful for editing and management purposes, they have no impact on how images show in our web. Their weight can easily get 20 KB or more per image.

从拍摄到编辑，图像会累积元数据，例如exif数据。尽管它们可用于编辑和管理目的，但它们对图像在我们的网络中的显示方式没有影响。每张图像的重量很容易达到20 KB或更多。

We should get rid of metadata before publishing on the web. We only have to make sure that images are coded with the proper orientation and with a sRGB profile, adhering to good color management practices.

在网络上发布之前，我们应该删除元数据。我们仅需确保以正确的方向和sRGB配置文件对图像进行编码，即可遵循良好的色彩管理规范。