为 Web 提供缩放图像答案

【问题标题】：Serve scaled image for web为 Web 提供缩放图像
【发布时间】：2020-04-02 07:35:30
【问题描述】：

当我使用 http://gtmetrix.com/ 测试我的网站时，我遇到了“提供缩放图像”问题

比如我的图片尺寸是2000x3000，推荐是104x104px（我在我的css中将img的宽高设置为104x104px）。我尝试将所有图标图像的大小调整为 104x104。但是，那些图像看起来很模糊？我认为它不应该模糊，因为尺寸是正确的。

我的问题是我如何知道缩放图像的大小 1. img 有固定尺寸（我在我的 css 中将 img 的宽度和高度设置为 104x104px）=> 模糊问题 2. 响应式图片

我使用 Wordpress，任何可以解决问题的免费插件。我使用了 optimole，但它使我的图像变得模糊！

谢谢，

【问题讨论】：

你真的应该看看 scrset 钩子/过滤器。这是一篇很长的文章，但很有帮助：alexwright.net/blog/web-design/responsive-images-wordpress

标签： html css wordpress

【解决方案1】：

使用css属性如

object-fit: cover

用于图像标签和

background-size: cover /* it can be contain too, depending on the situation */

用于背景图像

【讨论】：

我已经用过了。这不是图像缩放错误，而是图像模糊

【解决方案2】：

为不同的窗口宽度使用“图片”HTML标签：

<picture>
    <source srcset="/img/blog/responsive-images-lg.png 730w">
    <source srcset="/img/blog/responsive-images-md.png 610w">
    <source srcset="/img/blog/responsive-images-sm.png 350w">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

【讨论】：