HTML：以低分辨率渲染高分辨率图像

Question

我有一个文件夹，里面有一堆大小约为 1080p 的图像。在那个文件夹中，我有一个 index.php 可以显示所有图像，每行缩小到 4 个图像。但是，图像仍然呈现为全尺寸和分辨率，因此有时加载所有这些图像需要一段时间。我想渲染图像，但以较低的分辨率来加快加载时间。这可能吗？另外，可以用 HTML 5 的 video 元素做类似的事情吗？

您可以在http://quantumquantonium.ddns.net/images_and_videos/screenshots/epic查看我要加载较低质量图像的网站

Answer 1

在这种情况下使用 php imagick 插件

例子：

<?php

header('Content-type: image/jpeg');

$image = new Imagick('image.jpg');

// If 0 is provided as a width or height parameter,
// aspect ratio is maintained
$image->thumbnailImage(100, 0);

echo $image;

?>

在这里阅读更多：php.net/manual/en/book.imagick.php

Answer 2

单独使用 html 是不可能的，但使用 php 插件可以即时转换图像大小。