如何处理 HTML 页面中的大图像答案

【问题标题】：How to handle large image in HTML page如何处理 HTML 页面中的大图像
【发布时间】：2010-08-24 02:56:39
【问题描述】：

我有一个大约 3500 x 2500 像素和 4 MB 大小的大型 JPEG 图像。

我想在 HTML 页面中显示此图像，使其占据屏幕的 3/4，并对其进行压缩，以便快速加载，但不会过多影响质量。

这可行吗？

【问题讨论】：

在哪些方面可行？

【解决方案1】：

是的，但不是在 HTML 中。您将需要运行某种服务器端脚本来减小图像的大小在通过网络传输到浏览器之前。可以做这样的事情的语言包括（按字母顺序，所以我不会被指责偏袒）Perl、PHP、Python、Ruby 和许多其他语言。但是，它需要一些编程经验或学习意愿（通过阅读网站和/或书籍）。我建议反对在 StackOverflow 上问一个问题，基本上是问怎么做。

【讨论】：

【解决方案2】：

不，用 HTML 来做是不可行的。 HTML 不压缩图像。它可以通过指定高度和宽度属性来调整图像大小，但它们看起来不太好。

您必须手动调整图像大小。

【讨论】：

【解决方案3】：

HTML

<img class="big_image" src="x.jpg"> 
<!-- don't set width and height in the HTML -->

CSS

img.big_image {width:75%; -ms-interpolation-mode:bicubic;} 
/* don't set the height and it will be proportionally scaled */

图像将被缩放到第一个定位的祖先的 75%。（任何包含 position:relative; 或 position:absolute; set 的包含元素，希望这是 body 元素。您可能还必须在 CSS 中将 body 和 html 的宽度设置为 100%。我不确定。

MS css 特定的东西适用于 IE7 及更高版本，因为默认情况下它们使用最近邻插值。这很愚蠢。

图像已经非常压缩。可能它更适合作为 jpeg 或 png，尝试两者，看看哪个更小。

【讨论】：

【解决方案4】：

如果您希望 jpg 占据屏幕的 ¾，您不能假设每个人的浏览器窗口大小都相同。当用户更改窗口大小时，您可能希望调整图像大小。

使用 CSS 3 属性 background-size 可以使您的图像拉伸以适应屏幕，但它不适用于所有浏览器。否则，您可以使用一些聪明的 Javascript 来完成。

缺点是，无论您决定使用何种技术，您都会遇到图片质量/尺寸问题。如果你把你的图片保持在 3500px，在大屏幕上看它会很干净，但是下载起来会很长。如果图片太小，加载速度会很快，但您会在大屏幕上看到像素。

我认为大多数人使用的屏幕分辨率在 1024 像素到 1280 像素之间。所以也许你应该开始围绕这些尺寸进行测试。

【讨论】：