视网膜，懒惰的方式？

Posted 2023-05-07

【中文标题】视网膜，懒惰的方式？

【英文标题】：Retina, the lazy way?

【发布时间】：2014-10-26 01:59:26

【问题描述】：

我计划使用 Bootstrap 构建一个简单的静态站点，据我所知，它没有像 Foundation 那样对视网膜图像的内置支持。我很好奇，是什么阻止我将网站的所有图像制作成预期大小的两倍（例如 600x300），然后在将其放入代码中时将其缩小？

<img src="myImage.png"  >

我能想到的唯一问题是文件大小非常大的图像。在这种情况下，我可能需要找到一个可以很好地与 Bootstrap 配合使用的视网膜 JS 库。继续以懒惰为主题，希望能与 bower 和 grunt 一起将自己注入代码中。

【参考方案1】：

您可以尝试将lazySizes 与respimage 结合使用。您的代码如下所示：

<img
    data-sizes="auto"
    src="lqip-src.jpg"
    data-srcset="lqip-src.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />