将图像放置在网站中

Question

当使用<img />元素/标签将图像放置在Web文档中时,是否应将图像切片和编辑以适合文档的尺寸,或者应将它们按原样放置,但应修改width和height属性以满足需要.

例如,如果我有一个图像,比如"bldg_pic.png",它的宽度为2000像素,高度为1500像素,而且我想将它放置在一个400像素的X 300像素中<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

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

https://github.com/lencioni/SLIR

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

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

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

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

祝好运!