Web图片优化指导：最佳图片显示效果与用户体验

avatar

在当今的网页设计中，图片不仅是网站视觉吸引力的关键因素，而且对用户体验和网站性能至关重要。在上一篇文章中图片优化入门：前端工程师的图片效率指南我们介绍了图片的常见格式、压缩技术及性能评估指标，这些技术和指标可以帮助我们优化图片资源，提高网页的加载速度和性能。在本文中，将介绍一些最佳实践和技术，以确保您的网站以最佳方式显示图片，并提升用户体验。

精准控制图片宽高比

在网页设计中，图片的宽高比是一个重要的因素，精准控制图片宽高比可以帮助浏览器在加载页面时更有效地分配空间，并提前计算好图片的尺寸和位置，从而加快页面加载速度。此外，指定宽高比还可以减少不必要的重绘和回流，优化页面渲染性能。

在下面的代码中，我们未指定图片的宽高比，浏览器内的图片在加载时会出现抖动和重绘的情况。

<div class="image-container">
  <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png" alt="Image" />
</div>
<div>
  Next Content
</div>

<style>
  .image-container{
    background: #f0f0f0;
  }
  .image-container img {
    width: 100%;
    display: block;
  }
</style>

without_aspect_ratio.gif

从上面的动画中我们可以看到，图片在加载时出现了抖动和重绘的情况，这是因为浏览器在加载图片时无法提前计算好图片的尺寸和位置，导致页面的重绘和回流。为了避免这种情况，我们可以通过指定图片的宽高比来确保图片在加载时不会出现抖动和重绘。

without_aspect_ratio_info.png

从上面的图片信息我们可以看到该图片的宽高比为95:43，我们可以通过CSS padding-top 或 aspect-ratio 属性来指定图片的宽高比.

使用 padding-top 属性：

一个简单的公式可以帮助我们计算出 padding-top 的值： padding-top = 图片宽度 * 图片的高度比 / 图片的宽度比。

<div class="image-container">
  <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png" alt="Image" />
</div>
<div>
  Next Content
</div>
<style>
  .image-container {
    position: relative;
    background: #f0f0f0;
    /* 
      因为我们的图片宽高比为 95: 43, 所以 padding-top 的值我们应设为 100% * 43 / 95 
    */
    padding-top: calc(100% * 43 / 95);
  }
  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

使用 aspect-ratio 属性：

<div class="image-container">
  <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png" alt="Image" />
</div>
<div>
  Next Content
</div>
<style>
  .image-container {
    background: #f0f0f0;
  }
  .image-container img {
    width: 100%;
    display: block;
    /* 
      使用 aspect-ratio 属性指定图片的宽高比
    */
    aspect-ratio: 95 / 43; 
  }
</style>

with_aspect_ratio.gif

可以看到，通过指定图片的宽高比，我们可以避免图片加载时的抖动和重绘，提高页面的渲染性能。需要注意的是，使用 aspect-ratio 属性需要浏览器支持，目前主流浏览器已经支持该属性，但在一些旧版本浏览器中可能不支持。此外我们还可以CSS 的一些其他属性来控制图片展示的方式，比如 object-fit 可以控制图片的填充方式，object-position 可以控制图片的位置。image-rendering 可以控制图片的渲染方式等。

响应式图片显示

响应式图片显示是确保图片在不同设备和屏幕尺寸下都能以最佳方式呈现的关键因素之一。通过采用一些最佳实践和技术，可以确保网站在各种设备上都能提供优质的图片显示，从而提升用户体验。

使用 srcset 属性

当涉及到在网页中呈现图片时，可以使用 srcset 属性。 这个属性允许指定一系列备选图像，并且根据设备的 像素密度 来选择最适合的图像加载，从而确保在各种 像素密度 的屏幕上都能获得最佳的显示效果。让我们更深入地了解一下如何使用 srcset 属性来实现响应式图片加载。

srcset 属性的语法为 srcset="图片Url 像素密度描述符|图像宽度描述符, ..."，像素密度描述和图像宽度描述符 用于指定像素密度和备选图像的宽度。浏览器会根据设备的像素密度和图像的宽度来选择最适合的备选图像进行加载，以提供最佳的显示效果和性能。

  • 像素密度

像素密度描述符用于指定备选图像的像素密度。通常使用的像素密度描述符有以下几种：

  1. 1x：表示标准像素密度，即每个逻辑像素对应一个物理像素。
  2. 2x：表示两倍像素密度，即每个逻辑像素对应四个物理像素。
  3. 3x: 表示三倍像素密度，即每个逻辑像素对应九个物理像素。
<div class="image-container">
  <img 
    src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=600x0_q90_" 
    srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=400x0_q90_ 1x, https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=800x0_q90_ 2x, https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=1140x0_q90_ 3x" alt="Responsive Image"
  >
</div>

在上面的代码中，我们为 srcset 属性提供了三个不同分辨率的图片源，分别对应 像素密度 比为 1x、2x 和 3x。浏览器会根据设备的像素密度最适合的图片进行加载。我们可以看到在 iPhone XR 及 iPhone 14 Pro Max 设备中分别加载了 2x 和 3x 对应的图像源地址。

ppi_2x.png

ppi_3x.png

  • 图像宽度

图像宽度描述符用于指定备选图像的宽度。这样浏览器就可以根据设备的视口宽度选择最适合的备选图像加载。例如，在下面的示例中，我们为 srcset 属性提供了三个不同宽度的图片源，分别对应着不同的视口宽度：

<div class="image-container">
  <img 
    src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=600x0_q90_" 
    srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=400x0_q90_ 400w, https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=800x0_q90_ 800w, https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=1140x0_q90_ 1140w" alt="Responsive Image"
  >
</div>

different_width.gif

可以看到，在不同的视口宽度下，浏览器会选择最适合的备选图像进行加载，以确保图片在不同设备上都能以最佳方式显示。此外我们还可以使用 sizes 属性来指定图片在不同视口宽度下的显示尺寸。

w 用来描述图像的宽度，以便浏览器根据视口大小选择最合适的图像。这个宽度描述符并不是指实际的像素数 px，而是提供一个指导，告诉浏览器在不同宽度条件下应该使用哪个备选图像。

使用 picture 元素

除了 srcset 属性外，还可以使用 <picture> 元素来实现更精细的响应式图片加载。<picture> 元素通过包含一个或多个 <source> 元素和一个 <img> 元素来为不同的媒体条件（如视口宽度、设备像素比等）提供不同的图像源，从而更好地控制图片的显示, 以适应不同的设备和屏幕尺寸。

  • media 属性

<source> 元素的 media 属性用于指定备选图像的媒体查询条件，以便根据不同的媒体条件选择最适合的图像加载。例如，我们可以根据设备的视口宽度选择最适合的备选图像进行加载。

<div class="image-container">
  <picture>
    <source media="(max-width: 400px)" srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=400x0_q90_">
    <source media="(max-width: 800px)" srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=800x0_q90_">
    <source media="(max-width: 1140px)" srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=1140x0_q90_">
    <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=600x0_q90_" alt="Responsive Image">
  </picture>
</div>

media_different_width.gif

在上面的代码中，我们为 <source> 元素提供了三个不同宽度的图片源，并且根据设备的视口宽度选择最适合的备选图像进行加载。在不同的视口宽度下，浏览器会选择最适合的备选图像进行加载，以确保图片在不同设备上都能以最佳方式显示。

media 属性用于指定备选图像的媒体查询条件，以便根据不同的媒体条件选择最适合的图像加载。媒体查询可以基于多种条件，如视口尺寸、设备类型、分辨率、设备方向等。

  • type 属性

<source> 元素的 type 属性用于指定备选图像的 MIME 类型，以便浏览器根据不同的 MIME 类型选择最适合的图像加载。例如，我们可以根据图像的 MIME 类型选择最适合的备选图像进行加载。

<div class="image-container">
  <picture>
    <source type="image/webp" srcset="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?format=webp&dis_rule=400x0_q90_">
    <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?dis_rule=600x0_q90_" alt="Responsive Image">
  </picture>
</div>

在上面的代码中，我们为 <source> 元素提供了一个 webp 格式的图片源，并且根据图像的 MIME 类型选择最适合的备选图像进行加载。在支持 webp 格式的浏览器中，会加载 webp 格式的图片，否则会加载 png 格式的图片。

image_source@2x.png

type 属性用于指定备选图像的 MIME 类型，以便浏览器根据不同的 MIME 类型选择最适合的图像加载。这样可以确保在支持 webp 格式的浏览器中加载 webp 格式的图片，提高图片的显示效果和性能。

充分利用OSS图片处理能力

对象存储服务（Object Storage Service，简称 OSS）是一种存储海量文件的分布式存储服务，可以存储任意类型的文件，如图片、音频、视频、文档等。OSS 提供了丰富的图片处理能力，可以帮助用户对图片进行裁剪、缩放、旋转、水印等处理，以满足不同场景下的图片处理需求。

不同的 OSS 服务提供商提供了不同的图片处理能力也对应着不同的图片处理参数规则，用户可以根据自己的需求选择合适的 OSS 服务提供商。下面是一个使用汽车之家对象存储服务提供的图片处理能力对图片进行动态Webp及裁切压缩处理的示例：

<div class="image-container">
    <img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?format=webp&dis_rule=400x0_q90_" alt="OSS Image">
</div>

示例中的图片地址中我们使用了 format 参数来指定当浏览器支持Webp图片格式时加载Webp格式的图片，以提高图片的显示效果和性能。同时我们还使用了 dis_rule 参数来指定图片的宽度(400px)及清晰度(90%)以便在不同的视口宽度下选择最适合的备选图像进行加载。除了使用 format 及 dis_rule 参数外，我们还可以使用 OSS 提供的图片处理能力来对图片进行裁剪、缩放、旋转、水印等处理，以满足不同场景下的图片处理需求。

image_webp.png

image_crop.png

在 Chrome 开发者工具中我们可以看到，图片请求头中的 Accept 字段中包含了 image/webp，表示浏览器支持 Webp 图片格式，因此OSS服务返回了 Webp 格式的图片。这样可以提高图片的显示效果和性能，提升用户体验。

设置合理的图片缓存策略

合理的图片缓存策略对于提升网站性能至关重要。通过设置合适的缓存策略，浏览器可以减少对服务器的请求次数，从而加快页面加载速度，并减少带宽消耗。以下是一些关键的图片缓存策略：

  • 使用HTTP缓存头

合理的图片缓存策略对于提升网站性能至关重要。通过设置合适的缓存策略，浏览器可以减少对服务器的请求次数，从而加快页面加载速度，并减少带宽消耗。以下是一些关键的图片缓存策略：

  • Cache-Control：这是最常用的HTTP头，用于指定资源的缓存策略。常见的设置包括：

    • max-age：指定资源可以缓存的最大时间（以秒为单位）。例如，Cache-Control: max-age=31536000 表示资源可以缓存一年。
    • public 和 private：public 表示资源可以被任何缓存（如浏览器和CDN）缓存，private 表示资源只能被客户端缓存。
    • no-cache 和 no-store：no-cache 表示每次使用资源前都要重新验证其有效性，no-store 表示资源不应缓存。

  • ETag和Last-Modified

    • ETag：这是资源的唯一标识符，当资源内容变化时，ETag也会改变。浏览器可以通过ETag判断资源是否更新，如果没有更新，就可以使用缓存的版本。
    • Last-Modified：这是资源的最后修改时间，浏览器可以通过这个时间戳来判断资源是否需要更新。

  • 缓存更新策略： 对于频繁更新的图片资源，可以使用版本号或哈希值来管理缓存。例如，在图片URL中加入版本号（如image_v1.png），每次更新图片时更改版本号（如image_v2.png），确保用户总能获取最新的资源。

CDN 加速图片加载

使用内容分发网络（CDN）是加速Web图片加载的有效方法。CDN通过将图片分发到多个地理位置的服务器上，使得用户可以从离自己最近的服务器加载图片，CDN通常会缓存资源，并根据Cache-Control头来决定缓存策略。从而显著提图片的加载速度。

总结

通过精准控制图片宽高比、响应式图片显示、利用对象存储服务图片处理能力、设置合理的图片缓存策略和使用CDN加速图片加载等最佳实践和技术，可以确保网站以最佳方式加载及显示图片，以提升用户体验。希望本文对您有所帮助，欢迎留言分享您的看法和经验。

avatar
文章
阅读
粉丝