html - CSS 最大高度或简单高度会导致更快地加载图像吗？

Question

我正在将一些照片放在我的网站上，但我不知道哪种语法可以更快地加载它们。我的照片通常是 4300x3000 或 3000x4300(每张照片 7-10 MB)。我正在使用

#image {
    max-height:500px;
    max-width:750px;
}

当我在低端 PC 上查看我的网站时，加载需要很长时间。我不想使用固定的 height 和 width，因为我的照片可以大到 2500x2500，这会造成困惑。我应该怎么做才能减少加载时间？是否有类似“自动调整大小”的东西可以保持高宽比？

Answer 1

压缩

您应该使用一些外部软件压缩图像(如果您不使用除 HTML 和 CSS 之外的任何其他语言)。我会推荐Photoshop或 GIMP .

这是提高负载的唯一方法:降低图像权重。强制调整大小只是从服务器加载相同数量的数据。

提高调整后图像的质量:

如果您有兴趣提高调整后图片的质量，可以看看这篇文章:

http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/

自动调整大小的背景

加载 4.000 像素的图像甚至不是很常见的做法 in the websites with a full background .它通常做的是加载大约 1800-2000 像素宽度的图片，然后使用 CSS 优选地使图像适应更大或更小的显示器。

这里有一篇关于它的文章: http://css-tricks.com/perfect-full-page-background-image/

响应式图片:

您还可以根据您选择的预定义分辨率加载不同的图像。不过，您需要为每张图片准备多个版本。

More information about it use.