我想在 HTML 网页上显示大量图像，但想先显示低分辨率图像，然后在几秒钟后显示高分辨率图像。
原因是无法确定客户端互联网连接速度，所以我需要优化我的网站加载图像的方式。
我实际上已经通过 Stackoverflow 上的这个链接 Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
尝试运行答案中找到的示例 javascript 代码，但似乎不起作用。
然后我读到了Progressive JPEG's，但也不知道该怎么做。
如有任何帮助，我们将不胜感激。
【问题讨论】：
标签： javascript html image
这取决于您如何生成/创建图像，以确定它们是否是渐进式的。如果您的图像不是渐进式的，并且您安装了 ImageMagick（许多 Linux 系统都安装了），您可以使用此命令将图像从非渐进式（也称为 baseline JPEG）转换为渐进式并在您的网站上试用：
convert nonProgressive.jpg PJPEG:Progressive.jpg
ImageMagick 可从here 免费获取 Windows、OSX、Linux。
另一种最小化图像大小的方法是使用jhead，以下命令会从图像中删除所有 EXIF 信息以使其更小 - 删除的信息包括 GPS 坐标、拍摄照片的日期和时间、相机型号和焦距和快门速度。
jhead -purejpg image.jpg
更新答案
为了回答您关于制作所有图像的进一步问题，我不是在这里告诉您该怎么做！这是您的网站——您可以随心所欲。我只是建议您在图像上尝试一下，看看您是否喜欢结果和性能。如果您想将所有图像应用到它上，这很容易，可以使用标准工具，也可以使用 GNU Parallel，它可以通过使用所有 CPU 内核在很短的时间内完成这项工作。无论你做什么，我都会urge you to make a backup first 以防出现任何问题，或者你后来决定渐进式、EXIF 剥离的 JPEG 不适合你。
因此，在进行备份后，假设您的网站位于 /var/www 中，您可以执行以下选项之一：
find /var/www -iname "*.JPG" -exec convert "{}" "PJPEG:{}" \;
或同样，使用 EXIF 剥离，以及颜色配置文件，剥离：
find /var/www -iname "*.jpg" -exec convert "{}" -strip "PJPEG:{}" \;
或者你可以使用 GNU Parallel，像这样使用你所有的 CPU 内核：
find /var/www -iname "*.jpg" | parallel convert "{}" -strip "PJPEG:{}"
【讨论】：