【问题标题】：Would a CSS max-height or a simple height cause quicker loading of images?CSS 最大高度或简单高度会导致更快地加载图像吗？
【发布时间】：2013-03-08 13:20:38
【问题描述】：

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

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

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

【问题讨论】：

当您在 CSS 中为图像指定高度和宽度时，它只是缩放图像。浏览器仍会请求并加载完整图像。
如果你的服务器上有一张全尺寸的图片（7-10M/张），改变CSS高度和宽度的尺寸不会减小图片文件的大小。您需要显示更轻量级的图像版本，然后如果您需要，可能还需要一个指向全分辨率图像的链接以供下载。

标签： html css

【解决方案1】：

解决加载时间问题

您必须在将照片上传到服务器之前对其进行压缩。在 Photoshop 中使用导出到网络，确保图像大小合理（我会说永远不会超过 1mb）；您还可以使用图像优化软件（在 Mac 中我会推荐 JPEGmini）。

您可以，如果您希望将大图像保存在您网站的文件夹中并链接到它们（以便在您允许的情况下下载它们）。

解决比例问题（方形与矩形）

您可以只使用其中一个属性，css 将计算另一个。例如，如果你只放

#image{
width:750px;
}

如果您将矩形图像与方形图像混合使用，这将解决“搞砸”的问题。祝你好运！

【讨论】：

这不会减少加载时间！请参阅其他答案，了解为什么这不会影响性能。
当然，我只是在回答他对方形与矩形照片的担忧（毕竟这是一篇 CSS 帖子）
是的，但他最关心的问题与 css 无关，如果您在服务器上使用第三方工具正确调整图像大小，则不会涉及 css。您的回答可能会给未来的用户留下这样的印象：如果他们设置静态 width 或 height，它将压缩图像并解决他们的性能问题。
很好.. 修正了答案:)
您所说的第三方工具可能是什么？ :)

【解决方案2】：

我的照片通常是 4300x3000 或 3000x4300（即 7-10 mb/照片）。

它与max-height 与height 几乎没有关系。性能损失来自图像的原始大小，导致浏览器：

下载大文件
针对大量像素执行缩放算法

我应该怎么做才能减少加载时间？有没有类似的东西自动调整大小会保持高宽比吗？

在您上传文件时创建文件的较小版本，并提供该较小版本。当用户点击小图片时，您可以选择打开原始版本。

您可以手动创建文件的一个或多个副本，并使用不同的文件名上传它们。

更优雅的解决方案是以编程方式创建文件的一个或多个副本（您没有指明服务器技术，但有很多可用选项）。例如，Facebook 会为您上传的每张图片创建六个副本，以便他们可以在不同的地方以正确的大小快速提供这些图片。

无论您是自动还是手动，您都可以选择调整/裁剪图像以达到所需的纵横比。

【讨论】：

既然你在谈论 FB，他们是如何创建那个画廊的，我的意思是我只需要带有照片图标的部分（你自己的小图片，当你点击它们时它们会展开）和展开部分，这就是我想要的......但是我如何在不冻结某些 PC 的情况下创建它？我上传了大照片的 FB 色调，但我仍然可以从我想要的每台电脑上打开它们....
两件事：1）FB使用background uploader，这样浏览器在上传时不会冻结。 2) 原始文件上传后，Facebook 会创建多个版本。有些被调整为非常小，以便它们可以快速加载。甚至可以压缩原始图像以加快传输速度。
我可以使用后台上传器吗？如何？
见stackoverflow.com/questions/2751795/ajax-file-upload和stackoverflow.com/questions/2320069/jquery-ajax-file-upload

【解决方案3】：

压缩

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

这是改善负载的唯一方法：减少图片重量。强制调整大小只是从服务器加载相同数量的数据。

提高调整后图像的质量：

如果您对提高调整后图像的质量感兴趣，可以看看这篇文章：

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

自动调整大小的背景

即使in the websites with a full background，加载 4.000 像素的图像也不是很常见的做法。它通常做的是加载大约 1800-2000 像素宽度的图片，然后使用 CSS 将图像调整为更大或更小的显示器。

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

响应式图片：

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

More information about it use.

【讨论】：

【解决方案4】：

如果您想更快地加载，您应该调整图像大小并加载这些调整后的图像。您可以在磁盘上同时保留大图像和小图像，并且仅在用户单击链接时才加载大图像。

【讨论】：