Question

使用<img />元素/标记将图像放入网络文档时，是否应将图像切片和编辑以适合文档的尺寸，或者它们应按原样放置width应修改height属性以满足需要。

例如，如果我有一个图像，比如“bldg_pic.png”，它的宽度为2000px，高度为1500px，我想将它放在一个400px X 300px <div>中，如果我离开图像不变，并按

进行

<img src="bldg_pic.jpg" width="400" height="300" alt="Building Picture" />

因此加载的实际图像为2000px X 1500px，但显示为400px X 300px。或者我只是编辑图像并将其缩小到400px X 300px并使用相同的代码。

我认为在放置图片时，浏览器只会为图片插入“占位符”，如果前面设置了height和width属性，则浏览器会知道“空间/”记忆“应该保留给它。

我寻求应该使用哪种方法，他们的任何表现/最佳实践问题是否相关？

Answer 1

始终调整图片大小。也可以动态调整图像大小。

SLIR是一个很棒的库。你拿slir文件夹，把它放在你的网站根目录中。访问图像时，您可以执行以下操作：

    <img src="/slir/w400/path/to/image.png" width="400" />

让我们假设/path/to/image.png是4000px宽，SLIR不仅会压缩图像，还会调整它的大小，并将此请求的缓存版本存储在服务器上的文件夹中 - 再次请求时，它将提供缓存版本。

如果您需要有关文件权限的任何帮助，请询问。

祝你好运！

Answer 2

从最佳做法的角度来看，您应该将图片大小调整为您想要显示的大小。您的访问者可能不乐意加载大图像，从而浪费他们的带宽（想想智能手机）并增加负载时间，甚至不知道他们可以访问更大的图像。或者，您可能希望将已调整大小的图像链接到完整版本。

根据我的经验，有些浏览器在自己调整图像时会使图像看起来分散（例如在某些情况下是IE7），所以再次更好地使图像成为您想要显示的尺寸。

Answer 3

您必须将图像重新调整为实际需要的大小。请不要使用2000px 1500px图像。

原因如下：

如果您需要两个不同的尺寸，则应创建两个不同尺寸的图像。

您还可以使用工具优化图片，以便在浏览器中快速加载，而不会降低图像质量。

以下是一些可以帮助您的工具：

希望我的回答能帮到你！

Answer 4

两者都做（虽然如果尺寸正确，指定宽度/高度并不是必需的。）

虽然您可以使用width和height属性来缩小较大的图片，但它会无缘无故地影响您网站的性能和带宽。

调整图片大小和（在Photoshop中），保存网页/设备。

另外，如果您要将图像放在一起显示为一个，请确保在css中使用display:block以避免图像底部的间距。

Answer 5

图片应调整为您正在使用的尺寸并针对网络进行优化。我建议使用较小的格式（例如.jpg或.gif）而不是.png，这样可以在不损失质量的情况下使用.p /