为 Web 压缩和调整图像大小

Question

所以我目前正在使用 php 后端和聚合物前端构建一个网站。客户希望能够为他们自己的事件提供新闻功能。为此，我想将所有图像转换为 webp 并创建一些不同的尺寸，以便我可以快速将它们提供给不同的浏览器（手机、平板电脑、桌面等）。但是，我一直无法在 PHP 或 JS 中找到执行此操作的好方法。 Squoosh 非常适合静态资产，但不适合用户生成的内容。任何帮助表示感谢！

Answer 1

调整大小必须在服务器端完成。您可以做的是使用图像标签的 srcset 和 sizes 属性来优化要使用的版本：

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />

（直接来自 Mozilla 文档）

Answer 2

我强烈推荐使用 Adobe Photoshop。有了这个，您可以手动 compress/resize 图片或批量提交。

Answer 3

我不知道您是否可以访问服务器，但一种方法是从 PHP 调用 ImageMagick。它需要 PHP 与服务器交互，这可能很危险，所以请记住这一点。

据我所知，ImageMagick 虽然不支持 webm，但我相信您已经理解了它背后的想法。

如果您不想PHP与服务器本身交互，您也可以扫描未转换/调整大小的图像，然后进行转换。在 linux 上可能是：find ./ -name "*.jpg" -exec CONVERT_FUNCTION{} \;

Answer 4

PHP有操作webp图片的函数。试试这个。

<?php
$im = imagecreatefromstring(file_get_contents('path/to/image.jpg')); // Create image identifier
imagewebp($im, 'path/to/image.webp'); // Generate webp image and save to location
imagedestroy($im); // Free up image identifier
?>

为 Web 压缩和调整图像大小

Compressing and Resizing Images for the Web

html

javascript

css

php

webp