图像延迟加载：实心矩形而不是模糊图像
Images lazy loading: solid rectangle instead of fuzzy image
我试图以一种懒惰的方式在我的网站上显示几张图片，我尝试了两种选择：
选项 1：
<img class="lazyload" loading="lazy" data-src="myimage" width="250" height="225" title="This is an image">
选项 2：
<img class="lazyload" loading="lazy" src="fuzzy.jpg" data-src="myimage.jpg" width="250" height="225" title="This is an image">
两者都正常，'myimage.jpg' 需要一点时间才能加载。然而，在最终加载之前，浏览器显示第一个丑陋的“无图像”图标。对于第二个，我花费资源加载 'fuzzy.jpg' 图片。是的，它只有 5-kb 大小，但我想知道是否有一种 SEO 友好的方法来显示（例如）由浏览器创建的 'light blue' 矩形，带有某种 CSS 背景颜色 属性.
您无需请求即可内嵌 SVG 图像。这意味着它们将加载初始 HTML 并且不会占用额外的资源。如果您愿意（根据显示的内容），您可以使它更复杂，因为 SVG 非常轻量级。 How to inline SVG in the image, and other stuff
编辑：如果您愿意，您也可以使用 Data URLs 嵌入常规图像。但一般不实践。
我试图以一种懒惰的方式在我的网站上显示几张图片，我尝试了两种选择：
选项 1：
<img class="lazyload" loading="lazy" data-src="myimage" width="250" height="225" title="This is an image">
选项 2：
<img class="lazyload" loading="lazy" src="fuzzy.jpg" data-src="myimage.jpg" width="250" height="225" title="This is an image">
两者都正常，'myimage.jpg' 需要一点时间才能加载。然而，在最终加载之前，浏览器显示第一个丑陋的“无图像”图标。对于第二个，我花费资源加载 'fuzzy.jpg' 图片。是的，它只有 5-kb 大小，但我想知道是否有一种 SEO 友好的方法来显示（例如）由浏览器创建的 'light blue' 矩形，带有某种 CSS 背景颜色 属性.
您无需请求即可内嵌 SVG 图像。这意味着它们将加载初始 HTML 并且不会占用额外的资源。如果您愿意（根据显示的内容），您可以使它更复杂，因为 SVG 非常轻量级。 How to inline SVG in the image, and other stuff
编辑：如果您愿意，您也可以使用 Data URLs 嵌入常规图像。但一般不实践。