1

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

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

这可行吗？

4

4 回答 4

1

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

于 2010-08-24T03:08:19.267 回答
1

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

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

于 2010-08-24T03:15:53.550 回答
1

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; 设置的元素，希望这是 body 元素。您可能还必须在 CSS 中将 body 和 html 的宽度设置为 100%。我不确定。

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

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

于 2010-08-24T03:23:55.267 回答
0

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

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

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

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

于 2010-08-24T03:12:28.773 回答