HTML/CSS/JavaScript/PHP - 使图像文件尽可能小

问题描述

我在 Bing 上注意到他们结果中的一张图片的文件大小为 10kb。

但是，如果您在网络浏览器中访问图像的 URL 并将其保存，则为 1,000kb。

当图像以 img 标签加载到网页上时，如何减小图像的文件大小并使其尽可能小？我想让图片文件尽可能小，以提高我网站的性能。

// Img element is 10kb when inspected with developer tools

<img height="280" width="472" data-src-hq="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM" role="presentation" data-priority="2" id="embD38817586" class="rms_img" src="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM" data-bm="101">


// Original file is 1000kb when saved to the computer

https://bing.com/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM

解决方法

您可以从原始图像制作缩略图，这样它会加载一个较小的版本，然后链接完整版本以供下载。

有很多方法可以实现这一点，您可以从头开始创建，使用库、插件等。

如果您只想缩小文件大小，而不是创建缩略图，我建议使用 tinypng 来轻松快速地缩小图像大小。

filesize html javascript