Question

我想在HTML网页上显示大量图片，但希望先显示低分辨率图像，然后在几秒钟后显示高分辨率图像。

原因是因为无法确定客户端互联网连接速度，所以我需要优化网站加载图片的方式。

我实际上已经在Stackoverflow Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?

上浏览了这个链接

尝试运行答案中找到的示例javascript代码但似乎没有用。

然后我读到Progressive JPEG's，但不知道该怎么做。

请提供任何帮助。

Answer 1

这取决于您如何生成/创建图像，以确定它们是否是渐进式的。如果您的图像不是渐进式的，并且安装了ImageMagick（很多Linuux都可以），您可以使用此命令将图像从非渐进式（也称为baseline JPEG）转换为渐进式，并在您的网站上进行试用：< / p>

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:{}"

几秒钟后显示低分辨率图像，然后显示高分辨率图像（HTML）

1 个答案: