我们的网站上有一个产品详细信息页面，它预览了该产品的大图。问题是因为它太大而且高分辨率，在我们的页面上加载和渲染需要时间。现在，我已经阅读了一些名为图像升级的内容，或者从我所理解的内容中读到的内容更像是对图像进行延迟加载。因此，概念是它们在文件大小和图像尺寸方面生成非常小的大图像版本，并将其设置为图像的初始预览。然后将其调整为与大图像的原始尺寸相同。所以它被拉伸了，它们模糊了。他们等待更大的图像加载，然后在加载后用它替换较小的图像。我在多个博客和新闻网站上都看到了这个，这似乎是一个非常好的解决方案。但我担心的是，这会影响我们网页的搜索引擎优化吗？如果是这样，有没有办法实现这种行为而不会损害我们页面的搜索引擎优化？
答案 0 :(得分：1)
我了解您在优化图片时遇到问题。为解决此问题，我建议您应用以下技术：
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
在上面的示例中，如果浏览器的宽度不小于800像素，则将使用 head.jpg 或 head-2x.jpg 格式（取决于设备的屏幕分辨率。如果浏览器的宽度为450到800像素，格式为 head-small.jpg 或 head-small-2x.jpg （也取决于设备的屏幕分辨率）被应用。如果我们讨论的屏幕宽度小于450像素，并且设备具有向下兼容性，则不支持图片元素。在这种情况下，浏览器使用img元素在屏幕上显示图像（必须启用它）。
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
此示例显示的视图占视口宽度的一半（尺寸=＆＃34; 50vw＆＃34;应用 viewport 时）并取决于视口的宽度浏览器及其逻辑和物理像素的比率。因此，浏览器可以选择将在任何大小的窗口中正确显示的图像。
请注意， JPG-JPEG 格式的图片的体积比 PNG 少约50％。因此，它们更容易加载。要更改图像格式并调整图像大小，您可以使用此工具Photo Editor Online。要压缩图像，您可以使用此工具 - JPEG and PNG compressors 。
最佳解决方案是使用 Accelerated Mobile Pages AMP 。请注意，在 image 元素的实现中，还使用了srcset属性。
Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN 。
您可以使用meta preload 预加载当前网页的图片，例如：<link rel="preload" href="//examples.com/images/img1.jpg" as="image">
阅读更多 Preload of W3C ++ Preloading content with rel="preload" of Moz 。
答案 1 :(得分：0)
对于搜索引擎优化我会假设你想要谷歌标准来回答我的答案。
延迟加载将有助于您的带宽，而不是您的SEO谷歌将通过整页加载时间判断您的网站。
我建议你压缩你的图像，这将是完全不同的。
如果您有任何图片，您可以加载20张照片，并且有一个按钮说加载更多，然后从那里延迟加载。 这将是一个很大的SEO提升，因为你现在加载一半你的网站。