自动响应图像

Question

我的工作流程效率低下，无法生成响应图像。我要做的是（1）安装一个虚拟的Wordpress，（2）当我想在我的网站中包含一个图像时，将原始图像上传到该虚拟站点的媒体库（通常是6200x4100左右的非常大的图像），（ 3）打开chrome复制包含srcset的标签，（4）列出srcset中所有文件的列表，并将其保存到文本文件，（5）xargs -n 1 curl -O

这似乎是一个复杂的过程，但是仍然比手工完成每个过程要好。但是，必须有一种更有效的方法来自动执行此操作，对吗？

<img width="1568" height="1045" 
    src="img/some_image-1568x1045.jpg" alt="" 
    srcset="img/some_image-300x200.jpg 300w, 
            img/some_image-768x512.jpg 768w, 
            img/some_image-1024x683.jpg 1024w, 
            img/some_image-1536x1024.jpg 1536w, 
            img/some_image-1568x1045.jpg 1568w, 
            img/some_image-2048x1365.jpg 2048w" 
    sizes="(max-width: 1568px) 100vw, 1568px">

我希望自动生成上述代码，但更重要的是从命令行自动生成实际图像，但是不确定如何这样做，并且不熟悉并且无法找到用于此目的的任何工具。

Answer 1

您可以尝试https://responsivebreakpoints.com

• 确定最佳图像断点
• 生成代码
• 创建响应图像的.zip

此外，要自动使用构建工具和映像CDN，请参见https://web.dev/fast/#optimize-your-images