html - 增强响应式图像的性能

Question

我有一个响应式页面，我正在尝试优化页面加载时间。我在页面上运行了 yslow 扩展，其中一个建议是向图像插入宽度和高度属性，以便它可以在加载 css 之前渲染图像:(示例)

<img src="example.png" width="50px" height="50px" />

我的问题是，有没有一种方法可以实现类似的东西，但要保留页面上图像的响应属性？

Answer 1

您可以在 CSS 文件中设置图像的宽度和高度，并使用媒体查询对其进行调整。

您可以将图片设置为父容器的背景:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

后台方法与 sprite 配合得很好，这是另一种加快页面速度的方法。