gpt4 book ai didi

javascript - 延迟加载图像而不损害 SEO

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:48:11 24 4
gpt4 key购买 nike

我们的网站上有一个产品详细信息页面,其中包含产品大图的预览。问题是因为它太大和高分辨率,加载和呈现在我们的页面上需要时间。现在我已经阅读了有关图像放大的内容,或者从我的理解来看,它的工作方式更像是延迟加载图像。所以他们的概念是他们生成一个非常小的版本,就文件大小和图像尺寸而言,大图像的版本并将其设置为图像的初始预览。然后将其调整为与大图像的原始尺寸相同。所以它被拉伸(stretch)了,他们把它弄模糊了。他们等待加载较大的图像,然后在完成加载后用它替换较小的图像。我在多个博客和新闻网站上看到过这个,这似乎是一个很好的解决方案。但我担心的是,这会影响我们页面的 SEO 吗?如果是这样,是否有一种方法可以在不损害我们页面的 SEO 的情况下实现这种行为?

最佳答案

我了解到您在优化图片方面遇到了问题。为了解决这个问题,我建议您应用以下技术:

  • srcset 属性添加到 img 元素。 <强> srcset 属性扩展了 img 元素的功能。如果浏览器不支持 srcset 属性,默认使用 src 属性导入图像文件。如果浏览器支持 srcset 属性,您可以在收到请求之前指定图像来源和条件列表(以逗号分隔)。因此,只有那些与设备参数匹配的图像才会被下载和显示。
  • Art direction 在响应式图像中使用 picture 元素。如果您希望图像根据设备的特性(艺术指导效果)而变化,请使用元素 picture 。 picture 元素指定了一种声明性解决方案,以提供同一图像的多个版本,具体取决于设备的各种特性:大小、分辨率、目标等。

<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.jpghead-small-2x.jpg(也取决于设备的屏幕分辨率)被应用。如果我们谈论的是小于 450 像素的屏幕宽度和具有向下兼容性的设备,则将不支持 picture 元素。在这种情况下,浏览器使用 img 元素在屏幕上显示图像(必须启用)。

  • 具有相对尺寸的图像。如果最终图像大小未知,则很难为图像源选择像素密度描述符。特别是,这指的是根据浏览器的宽度按比例拉伸(stretch)并根据它改变大小的图像。在这种情况下不表示固定的图像大小和像素密度。相反,您可以通过向宽度添加句柄来确定正在处理的图像的大小。这将允许浏览器自动计算最佳像素密度并选择要加载的正确图像。

<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">

此示例显示的图像占视口(viewport)宽度的一半(应用 viewport 时,sizes = "50vw")并且取决于浏览器的宽度及其逻辑和比例物理像素。因此,浏览器可以选择在任何大小的窗口中正确显示的图像。

请注意,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 .

关于javascript - 延迟加载图像而不损害 SEO,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47448008/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com