草庐IT

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

coder 2024-03-02 原文

我们的网站上有一个产品详细信息页面，其中包含产品大图的预览。问题是因为它太大和高分辨率，加载和呈现在我们的页面上需要时间。现在我已经阅读了有关图像放大的内容，或者从我的理解来看，它的工作方式更像是延迟加载图像。所以他们的概念是他们生成一个非常小的版本，就文件大小和图像尺寸而言，大图像的版本并将其设置为图像的初始预览。然后将其调整为与大图像的原始尺寸相同。所以它被拉伸(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.jpg 或 head-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/

javascript损害strongsectionnoreferrercssseolazy-loading

有关javascript - 延迟加载图像而不损害 SEO的更多相关文章

  1. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  6. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  7. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  8. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  9. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  10. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

随机推荐