2

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

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

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

4

4 回答 4

4

压缩

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

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

提高调整后图像的质量：

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

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

自动调整大小的背景

即使在具有完整背景的网站中，加载 4.000 像素的图像也不是很常见的做法。通常所做的是加载大约 1800-2000 像素宽度的图片，然后使用 CSS 将图像调整为更大或更小的显示器。

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

响应式图像：

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

有关它使用的更多信息。

于 2013-03-19T17:48:38.223 回答
3

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

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

  1. 下载一个大文件
  2. 针对大量像素执行缩放算法

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

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

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

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

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

于 2013-03-19T17:48:48.193 回答
1

You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.

于 2013-03-19T17:48:59.287 回答
1

To resolve loading time

You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).

You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).

To resolve the ratio issue (square vs rectangle)

You can just use one of the properties and css will calculate the other. For example, if you put only 

#image{
width:750px;
}

This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!

于 2013-03-19T17:51:35.020 回答