了解 WordPress 等 CMS 和其他网站生成器如何实现 让自适应图片更易于使用
当然,与手动保存每张图片的备用图片并借助 Squoosh.app 在开发过程中自动执行图片压缩,但存在一些局限性。首先,你可能无法 始终完全控制整个网站中使用的图片,因为网络上大多数向用户显示的图片都是内容问题 由用户或编辑者上传,而不是与开发资产(如 JavaScript 和样式表。
这通常需要多个流程来管理图片: 制作并维护网站(背景、图标、徽标等)以及其他内容,这些内容与通过使用生成的图片素材资源相关 例如,编辑团队在帖子中嵌入的照片或用户上传的头像。虽然上下文可能 不同,最终目标都是相同的:根据开发团队定义的设置自动编码和压缩。
幸运的是,您从本地开发工作流中学到的图像处理库可用于任意数量的 上下文。虽然在处理自适应图片标记时,可能没有万能的方法,但这些系统可提供合理的 默认值、配置选项和 API 钩子来简化其实现过程。
静态网站生成器
与任务运行程序相比,Jekyll 或 Eleventy 等静态网站生成器处理图片的方式有一些相似之处。使用 这些工具需要对资源进行管理,包括 CSS 缩减或转译和捆绑 代码。正如您想象的那样,这意味着这些工具可让您使用许多库以同样的方式处理图片资源, 一些示例。
Eleventy 的官方图片插件使用 Sharp 来提供大小调整、生成多种源大小、重新编码和压缩的功能,就像您在本文中学到的一些任务一样。
与任务运行程序不同,静态网站生成器可以直接深入了解这些库的配置和使用情况, 以及为生产网站生成的标记,这意味着它在自动处理响应式图片方面可以做得更多 标记。例如,当作为用于显示图片的短代码的一部分进行调用时,此插件会根据 传递给 Sharp 的配置选项
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
然后,可以使用此短代码来代替默认的图片语法:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
如上所示,如果配置为输出多种编码,则生成的标记将是包含以下内容的 <picture>
元素:
相应的 <source>
元素、type
属性和 srcset
属性已填充
生成候选大小。
<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
当然,此插件无法生成有效的 sizes
属性,因为它不知道最终的尺寸和位置
但在生成标记时接受一个输入作为输入,这是 RespImageLint 的另一个作业。
框架
客户端渲染框架需要使用任务运行程序或打包器(如 Webpack)来修改、编码和压缩图片资源
。例如,自适应加载器也会使用 Sharp 库来重新保存图片素材资源。然后,您可以
然后 import
将您的图片作为对象:
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
然后,您可以通过 React 的图片组件等抽象使用这些导入的图片,或者填充您的自适应图片, 图片标记:
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy"
/>
执行客户端渲染的框架非常适合 Lazysizes 和 sizes="auto"
,因此几乎可以
自动响应式图片
内容管理系统
WordPress 是最早采用原生自适应图片标记的应用之一,自从推出之后,该 API 就开始逐步改进。 在 WordPress 4.4 中引入,支持 WebP 并控制输出 MIME 类型。WordPress 核心旨在使用 ImageMagick PHP 扩展程序 (或者,如果没有 GD 库)。
通过 WordPress 管理界面上传图片后,源图片将用于在
操作方式与在本地计算机上大致相同。默认情况下,WordPress 输出的所有图片
并根据主题中配置的图片大小生成 srcset
属性。
您可以为生成的图片配置两个关键设置,即压缩质量和输出 MIME 类型。
例如,如需将所有生成的图片的默认压缩质量设置为 70
,请使用以下命令:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
为了获得更好的压缩效果,请使用以下代码将上传的 JPEG 图片的输出格式切换为 WebP:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
鉴于 WordPress 全面了解所有备选方案
以及它根据上传的图片生成的编码,就可以提供辅助函数,比如
wp_get_attachment_image_srcset()
至
检索为图片附件生成的完整 srcset
值。
您可能已经猜到了,使用 sizes
属性就更加棘手了。缺少任何信息
关于如何在布局中使用图片的信息,WordPress 目前默认为 sizes
值,该值实际表示“此图片
应占据 100% 的可用视口,不超过来源的固有尺寸 - 这是可预测的默认值,但不是正确的
适用于任何实际应用请务必使用 wp_calculate_image_sizes()
在模板中设置上下文适合的 sizes
属性。
当然,有无数的 WordPress 插件专门用于为开发团队和用户等加快现代图片工作流。
也许最令人兴奋的是,Jetpack 的 Site Accelerator(以前称为“Photon”)等插件
可以为编码提供服务器端协商,确保用户能够收到
而无需使用 <picture>
和 type
标记模式,浏览器也能够支持这些 API。它是通过使用图片内容来实现的
分发网络 - 一种可供您使用的技术,独立于 CMS。
Shopify 等托管的 CMS 解决方案也是如此,但机制本身会有所不同:提供类似的
用于生成替代图片来源和相应 srcset
属性的钩子
和艺术指导(通过 <picture>
元素)。