提供响应式图像
向移动设备提供桌面尺寸的图像可导致数据量比实际需求高出 2-4 倍。应取代这种“一刀切”的方法,转而为不同的设备提供不同的图像。
调整图像大小 #
最流行的两个图像调整工具是 sharp npm package 和 ImageMagick CLI 工具。
Sharp package 非常适合用于自动调整图像大小(例如,为您网站上的所有视频生成多种尺寸的缩略图),它可以与构建脚本和工具轻松快速地实现集成。而 ImageMagick 则便于一次性调整图像大小,因为它完全从命令行使用。
sharp #
要将 Sharp 用作 Node 脚本,请将此代码另存为项目中的单独脚本,然后运行它以转换图像:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick #
要将某个图像的大小调整为其原始大小的 33%,请在终端中运行以下命令:
convert -resize 33% flower.jpg flower-small.jpg
要将某个图像的大小调整为 300 像素(宽) x 200 像素(高),请运行以下命令:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
您应该创建多少个图像版本? #
这个问题没有确切的“正确”答案。但是,提供 3-5 种不同大小的图像很常见。提供更多的图像尺寸对性能更好,但会占用服务器上更多的空间,并且需要编写更多的 HTML。
其他选项 #
Thumbor(开源)和 Cloudinary 等图像服务也值得一试。图像服务按需提供响应式图像(和图像处理)。Thumbor 需要安装在服务器上进行设置;Cloudinary 则会为您处理这些,无需服务器设置。两者都是创建响应式图像的简单方法。
提供多个图像版本 #
指定多个图像版本,浏览器将选择最好的一个来使用:
<img>
标签的 src
、srcset
和 sizes
属性都相互作用来实现这一最终结果。
“src”属性 #
src 属性使得此代码向不支持srcset
和 sizes
属性的浏览器提供帮助。如果浏览器不支持这些属性,其会回退到加载 src
属性指定的资源。
“srcset”属性 #
srcset
属性是以逗号分隔的图像文件名及其宽度或密度描述符的列表。
此示例使用宽度描述符。480w
是一个宽度描述符,告诉浏览器 flower-small.jpg
是 480 像素宽;1080w
是一个宽度描述符,告诉浏览器 flower-large.jpg
是 1080 像素宽。
“宽度描述符”听起来很花哨,但其实只是告诉浏览器图像宽度的一种方式。这使浏览器无需下载图像以确定其大小。
**额外的学分:**您无需为了提供不同的图像尺寸而了解密度描述符。但是,如果您对密度描述符的工作原理感到好奇,请查看分辨率切换代码实验室。密度描述符用于根据设备的像素密度提供不同的图像。
“尺寸”属性 #
尺寸属性告诉浏览器图像显示时的宽度。但是,尺寸属性对显示大小没有影响;您仍然需要 CSS。
浏览器使用此信息以及它对用户设备的了解(即设备的尺寸和像素密度)来确定要加载的图像。
如果浏览器无法识别“ sizes
”属性,它将退回到加载“ src
”属性指定的图像。(浏览器初始均设置为同时支持“ sizes
”和“ srcset
”属性,因此一个浏览器要么支持这两个属性,要么都不支持。)
**额外的学分:**如果您想要花哨,还可以使用尺寸属性来指定多个插槽大小。这适用于对不同视口大小使用不同布局的网站。请参阅此多槽代码示例以了解如何执行此操作。
(甚至更多)额外的学分 #
除了已经列出的所有额外学分(图像很复杂!),您还可以将这些相同的概念用于艺术指导。艺术指导是将外观完全不同的图像(而不是同一图像的不同版本)提供给不同视口的做法。您可以在艺术指导代码实验室了解更多信息。
验证 #
实现响应式图像后,您可以使用 Lighthouse 来确保不会遗漏任何图像。运行 Lighthouse 性能审核( Lighthouse > 选项 > 性能 )并查找适当大小的图像审核的结果。这些结果将列出需要调整大小的图像。