Html 在网站中放置图像

当使用元素/标记将图像放置在web文档中时，应将图像进行切片和编辑以适应文档的尺寸，还是应按原样放置图像，但应修改宽度和高度属性以适应需要

例如，如果我有一个图像，比如bldg_pic.png，宽2000px，高1500px，我想把它放在一个400px X 300px的盒子里，我是否应该保持图像不变，并按如下操作

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

我假设在放置图像时，浏览器实际上只是为图像插入一个占位符，如果高度和宽度属性设置在前面，浏览器知道应该为其保留多少空间/内存

---

我寻找应该使用哪种方法，以及它们的任何性能/最佳实践问题是否与此相关？

尽管如果宽度/高度是正确的大小，则指定宽度/高度并不是真正必要的

虽然您可以使用宽度和高度属性使大型图像变小，但它会影响站点的性能和带宽，这是没有充分理由的

调整图像大小，并在photoshop中，为web/devices保存

---

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

从最佳实践的角度来看，您应该将图像大小调整为要显示图像的大小。您的访问者可能不喜欢加载大图像，从而浪费了带宽，增加了加载时间，甚至不知道他们可以访问更大的图像。或者，您可能希望将调整大小的图像链接到全尺寸版本

---

根据我的经验，一些浏览器在自己调整图像大小时会使图像看起来不完整，例如在某些情况下使用IE7，因此最好还是将图像设置为您想要显示的大小。

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

原因如下：

当您在html宽度和高度中进行缩放时，浏览器仍在下载完整图像，并需要更多时间加载 若你们将较大的图像尺寸调整为很小的尺寸，那个么它在浏览器中就不好看了 如果需要两个不同的尺寸，则应创建两个具有不同尺寸的图像

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

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

粉碎它：

暴动：

---

希望我的回答能帮助你

始终调整图像的大小。动态调整图像大小也是可能的

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

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

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

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

---

祝你好运

图像大小应调整为您正在使用的确切大小，并针对web进行优化。我建议使用较小的格式，如.jpg或.gif，而不是.png，因为这样做可能不会降低质量。

图像会按原样发送给客户端。您可以指定宽度=4高度=3，但仍将发送相同的大图像。如果您想让页面加载更快，可以将图像的其他压缩版本另存为缩略图。当所有答案都正确且有用时，很难选择接受哪个答案是正确的。谢谢大家。我不推荐SLIR Smart Lencioni图像大小调整器，因为它会给服务器带来额外的过载。服务器需要动态调整大小。您必须将图像大小重新调整到所需的大小。这可能会有帮助，如果您需要动态重新调整大小，请不要使用它。谢谢您的帮助和详细的回答。这是真的。SLIR确实会增加服务器资源的开销。然而，只有一次。一旦图像被请求一次，它就会保存该请求的“缓存”版本。假设您有一个1000x1000 IMG，但您只需要将其用作100x100图像。第一次请求该图像时，它将获取1000x1000图像并调整其大小。然后，它会保存100x100版本，因此每次在第一次之后，它都只是一次又一次地请求100x100图像-如果手动调整大小，情况也是如此。

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