新媒网 · 跨境数据社区

各位跨境实战精英，大家好！今天咱们不谈虚的，直奔主题，聊聊一个常常被大家忽略，却又至关重要的“流量发动机”——图片优化。

很多老铁在做SEO时，铆足了劲儿去抠关键词、写文案、搭外链，可回过头一看，网站访问速度还是慢吞吞，图片在搜索结果里也像个“小透明”。这究竟是为什么呢？其实，您可能忽视了图片的“魅力值”打造。

别担心，图片SEO远没有你想象的那么复杂。今天，作为您的实战导师，我将手把手带您拆解图片优化的每一个环节，让您的图片不仅仅是“好看”，更能为您引流，为您创收！

图片优化，究竟优化的是什么？

简单来说，图片优化就是让搜索引擎能更好地“看懂”您的图片，并在用户搜索时，将它们精准地呈现在眼前。听起来玄乎，但拆解开来，无非就是让您的图片：

• 加载飞快：用户体验是王道，没人喜欢慢吞吞的网站。
• 易于发现：无论是搜索引擎还是用户，都能轻松找到它。
• 信息量足：通过描述性文字（Alt Text），让机器和特定用户群体都能理解。
• 尺寸合适：不大不小，刚刚好，既保证清晰度又兼顾加载速度。

可能有人会觉得，这不过是一堆图片，至于这么大费周章吗？我的答案是：绝对值得！我们不光是在跟传统的谷歌图片搜索打交道，更是要把握住当下最火热的视觉搜索和AI驱动的流量入口。

比如，您要是卖黄水仙种子，精心优化的产品图不光会在谷歌图片搜索里大放异彩：

它甚至还能在用户通过谷歌Lens（一个可以通过手机摄像头进行视觉搜索的工具，比如识别衣物、地标，或者像我们这里的水仙花）进行搜索时，被精准捕获，直接呈现在搜索结果的AI概览中：

所以，图片优化可不只是为了排名好看，更是为了给用户提供极致的体验。图片加载快、无障碍、易理解，用户自然就高兴，转化也就水到渠成了。

现代SEO中，图片优化的五大“聚宝盆”

在跨境电商的战场上，时间和精力都宝贵，我们得把力气使在刀刃上。图片优化这个活儿，虽然看起来细碎，但它的长尾效应和带来的实实在在的好处，往往能让您事半功倍。

下面，咱们就掰开揉碎了讲讲，做好图片优化，能给您带来哪些“聚宝盆”式的回报：

1. 核心网页指标（Core Web Vitals）大幅提升

新媒网跨境获悉，谷歌非常重视用户体验，而网站加载速度是重中之重。那些又大又没优化的图片，往往是拖慢网站速度的“罪魁祸首”。特别是“最大内容绘制（LCP）”这个指标，它衡量的是页面上最大元素（比如一张大图或一段文字）加载所需的时间。图片优化得当，LCP值自然就好看。

为什么谷歌如此看重加载速度？道理很简单：慢悠悠的网站显得不专业，用户等不及就跳走了；而加载飞快的网站，能让用户第一时间获取所需信息，这正是谷歌推崇的积极用户体验。

设想一下，您有个跨境博客，每篇文章开头那张巨大的“头图”（hero image），如果没优化，每次用户和搜索引擎访问，都得花费大量时间和资源去加载，无形中就损失了宝贵的流量。

这也是为什么现在很多专注于SEO的博客，都从过去那种霸气侧漏的大头图：

转向了现在这种更简洁、加载更快的图片风格：

2. 视觉搜索中的更高曝光率

“一图胜千言”这句话在跨境电商领域尤其适用。如果您不重视图片优化，那在谷歌的视觉搜索领域，您可能就错失了巨大的流量。

要知道，单是images.google.com就能贡献谷歌搜索流量的10%！而谷歌Lens每个月更是有高达120亿次的搜索量。

再拿您的跨境电商博客举例，假设您销售园艺产品，经常发布关于各种植物的文章。如果您的图片优化做得好，当用户想了解“道格拉斯冷杉长什么样”时，您的图片就能直接出现在搜索结果第一位的“图片包”中，为您带来大量新用户：

3. 卓越的用户体验

经过恰当优化的图片，能根据用户设备的屏幕尺寸自动调整大小。这意味着无论您的客户是用手机、平板还是36英寸的显示器浏览您的网站，他们都能获得最佳的图片体验。

一张处理得当的图片，能确保无论在何种设备上，用户都能清晰、轻松地查看和理解内容，而且无需等待漫长的加载时间。这种无缝衔接的体验，是留住用户的关键。

正确优化的用户体验如下图所示：

4. AI驱动搜索结果的“入场券”

图片优化不光能让您的网页在不同屏幕上表现出色，还能让您的图片在日益壮大的AI驱动搜索舞台上获得“前排座位”。

谷歌Lens只是冰山一角。还有谷歌Discover，您手机上那个类似社交媒体的信息流，会根据您的兴趣推送相关的图片和链接；以及AI概览，通常出现在信息查询搜索结果顶部的答案框。这些都是您精心优化图片后，能够捕获更多用户眼球和流量的新阵地。

换句话说，图片优化不仅仅是提升您在传统谷歌搜索中可见度的一种方式，它更是让您的网站内容超越传统的“蓝色十条链接”，从谷歌和其他搜索引擎的视觉及AI驱动体验中，吸引新用户的有效途径。

5. 提升网站包容性

不是所有用户都以相同的方式访问互联网。有些人用手机，有些人则依赖屏幕阅读器——对于视力障碍或弱视用户来说，这是最好的辅助设备。这些用户就完全依赖Alt Text（图像的文字描述，存储在页面代码中）来理解页面内容。

不光是特殊用户，搜索引擎也同样依赖Alt Text。Alt Text能帮助搜索机器人“理解”您的图片。记住，机器人不是人，它们不会像我们一样“看”图片，而是通过构成图片的“代码”来理解。您提供的Alt Text，就是给这些“0和1”更多的语境。搜索引擎对内容理解得越透彻，您的页面在搜索结果中出现的几率就越大。

我们来看一个关于树木的博客中的实际例子。

这是图片本身：

而这张图片的Alt Text是：“landscaped yard中的鹿”。

如果您的页面加载过慢，甚至无法加载时，Alt Text也会显示出来，充当“占位符”的作用：

Alt Text还是您进行额外优化的小“宝藏”。任何能帮助用户理解图片的内容，都能帮助搜索引擎更好地理解。

接下来，我们将更详细地讲解如何巧妙地利用Alt Text，在不牺牲用户体验的前提下，提升SEO效果。

图片页面优化（On-page）的实战技巧

这一部分，我们将深入图片优化的核心技术。我将带着大家，一步步把手头上的图片，打造成搜索引擎和用户都爱不释手的“香饽饽”。

1. 使用描述性强、包含关键词的文件名

坦白说，如果您的图片命名还是“thisisthefinalversionACTUALFINAL2.png”这种格式，那对SEO来说简直是“灾难”。谷歌会利用这些文件名来理解图片内容。所以，务必为图片添加一个简洁且富有描述性的名称。

继续拿那个园艺博客举例：

这些都是非常优秀，对爬虫友好的图片文件名：

• aspen-tree-leaf-closeup.jpg （白杨树叶特写.jpg）
• fig-tree-fruit.jpg （无花果树果实.jpg）
• magnolia-flower-petal.png （玉兰花瓣.png）

您会发现，这些文件名都使用了连字符（-）。这是因为文件名中不能使用空格。谷歌会将连字符视为单词分隔符。
这样一来，您使用连字符，就能让谷歌更容易理解“fig-tree-fruit.jpg”实际上是“fig tree fruit”。而如果使用“fig_tree_fruit.jpg”这种下划线命名，谷歌很可能会把它识别为“figtreefruit”，就失去了语义。

反观下面这些，就不是理想的文件名：

• IMG07142025.png （缺乏描述性）
• aspen-tree-leaf-depicting-lots-of-colors-like-green-gold-brown-yellow-and-orange.jpg （过于冗长，反而不易理解）

从谷歌的视角来看，第一个名字缺乏描述性，第二个又走得太远，让爬虫难以立即理解图片的核心内容。

小提醒：如果您的网站有不同语言的版本，同一张图片在不同语言页面上，也请务必更新文件名，使其与相应语言匹配。

2. 撰写富有意义的Alt Text（但不仅仅为了SEO）

没错，Alt Text确实能帮助SEO，但绝不能仅仅为了SEO而写。它的核心作用，是帮助所有用户（包括搜索引擎）理解图片内容。

下面是撰写完美Alt Text的几个要点：

• 清晰描述与页面内容相关的图片细节。 如果您正在撰写关于道格拉斯冷杉和白杨松区别的文章，那么您的Alt Text就应该突出这些视觉上的差异点。
• 字数控制在125个字符以内。 因为有些屏幕阅读器在超过这个长度后会停止朗读。
• 只为“功能性”图片撰写Alt Text，而非“装饰性”图片。 这样可以避免使用屏幕阅读器的用户受到不必要的干扰，提升体验。
• 避免使用“图片”、“照片”等赘述。 屏幕阅读器会自动播报“图片”字样，您的Alt Text只需直接描述图片内容即可。

这里有一个精雕细琢的Alt Text示例：

那么，哪些是不应该做的呢？

• 与图片内容不符的Alt Text（比如把“图表”或“点阵图”写成“复杂数据分析”）
• 完全不提供Alt Text

3. 优化图片标题（Title）和图注（Caption）（按需而定）

首先，您需要思考一下，这张图片是否真的需要图注（Caption）。图注是图片下方可见的文字，无需查看代码即可被所有人看到。当使用得当时，图注能让用户更快地浏览页面，从而更深入地阅读文章内容。

所谓“使用得当”，是指图注能简洁明了地描述图片，就像这样：

如果Alt Text中的信息您认为所有用户都应该知道，那么把它放到图注里，让大家都能看到。换句话说：仅当对用户阅读图片细节有帮助时，才添加图注。

例如，对于下面这张图片，您自然会想加上图注：

但对于这张图片，除非您是在运营一个鸟类识别博客，否则就不必画蛇添足：

用户一眼就能看出这是一只树上的啄木鸟，您的Alt Text也能简洁地描述这个场景。

图注和标题属性（Title attributes）不是一回事

标题属性，也就是Title Text，是当您将鼠标悬停在图片上时弹出的那段文字。虽然经常与Alt Text混淆，但Title Text的主要目的是为用户提供额外的上下文信息。

但这并不意味着您可以依赖Title Text而忽略Alt Text。屏幕阅读器在读取Title Text方面表现不一。大多数情况下，这些文字只会在用户鼠标悬停时才显示。

您仍然可以包含图片本身的简要描述，但切勿仅仅依赖Title attributes。

4. 为不同场景选择合适的图片格式

WebP、JPEG、PNG……如果您不是设计师，这些文件格式可能看起来像一堆随机字母。但其实，每种格式都有其特定的用途。

咱们先从“明星选手”WebP说起。
作为谷歌的“亲儿子”，WebP在大多数方面都超越了其他格式，因为它：

• 文件更小，加载更快。
• 采用先进压缩技术，在图片质量和文件大小之间取得了绝佳平衡。
• 受大多数主流搜索引擎支持。
• 支持动画和透明背景。

WebP最大的缺点？它比较新。一些老旧浏览器（比如旧版Internet Explorer、Edge或Firefox）可能不支持。此外，创建和管理也相对麻烦，因为许多工具并未原生支持，您可能需要借助转换器或插件。

如果您有资源投入，强烈推荐WebP格式。对于拥有大量高分辨率图片的网站——比如跨境电商、媒体或旅游网站——更快的加载速度能显著提升用户体验。

JPEG（或JPG） 相比之下，是标准图片的“万金油”。它是以下场景的理想选择：

• 大型照片和插画。
• 色彩鲜艳、清晰度高，同时文件大小适中。

JPEG在支持透明背景方面表现不足，也无法提供WebP那样极致的优化性能，主要是因为其功能较少且文件尺寸相对较大。但对于大多数标准用途——基本的产品图或生活方式摄影——它完全够用。

再来说PNG。PNG最适合用于以下需求的图片：

• 动画。
• 透明背景。
• 无损压缩（图片在编辑后仍能保持高质量）。
• 边缘清晰。
• 无压缩伪影（某些过度压缩的JPEG中可能出现的模糊或块状失真）。

除此之外，如果您希望图片在移动设备上快速加载，PNG并非最佳选择，它在加载速度方面尤其落后于JPEG和WebP。因此，如果您处理的是固定尺寸的设计元素或小型资源，如Logo或页眉图形，PNG是您的最佳拍档。

最后是SVG。SVG的特点是：

• 缩放不失真。
• 可以通过CSS和JavaScript等编程语言进行操作。

因此，SVG是图标和Logo的首选格式。但它不适用于复杂的图片，如照片或细节丰富的插画。过大或过于复杂的SVG文件如果未经优化，可能会拖慢网站性能。而且由于SVG是基于代码的，如果从不可信的来源上传，可能存在安全风险。

下面是各种文件格式的优缺点对比：

文件格式	优点	缺点	用例
WebP	– 文件更小，加载更快– 支持动画和透明背景– 采用现代压缩技术– 受大多数主流搜索引擎支持	– 部分旧版浏览器不支持– 创建和管理相对复杂	– 跨境电商/产品图– 博客头图– 媒体内容
JPEG	– 浏览器广泛支持– 照片文件尺寸小– 易于创建和压缩	– 有损压缩会降低质量– 不支持透明背景– 不适合文字或清晰线条	– 摄影作品– 博客配图– 生活类内容
PNG	– 无损压缩– 支持透明背景– 图形细节质量高	– 文件尺寸大– 移动设备加载慢– 不适合大量照片网站	– 带透明背景的Logo– UI元素– 信息图表或截图– 动画
SVG	– 缩放不失真– 可通过CSS/JavaScript样式或动画化– 简单图形文件尺寸小	– 不适合照片或复杂图片– 如不净化，可能引入安全风险– 复杂SVG文件尺寸较大	– 图标和Logo– UI组件– 简单插画

您可能注意到了，这份列表中没有AVIF。虽然AVIF是最先进的图片格式之一，其压缩效率甚至优于WebP，能带来更小的文件尺寸和更高的质量，但AVIF尚未获得所有浏览器和设备的完全支持。并且，大规模实施AVIF会消耗大量资源。

AVIF，和大多数下一代格式一样，最适合那些图片量大且有资源进行更新的网站，比如跨境电商或媒体发布商。

在所有这些格式中，WebP能在质量和性能之间为您带来最佳平衡。它受到广泛支持，相对容易实施，并能显著提升性能。如果时间充裕，AVIF也值得探索，但在图片优化方面，它目前仍属于“锦上添花”的范畴。

5. 在不牺牲质量的前提下压缩图片

图片压缩，顾名思义，就是通过移除不必要的数据来减小图片文件的大小。这意味着搜索引擎在加载时需要处理的字节更少，从而提升页面速度和性能。

换句话说：您在缩小图片，让搜索引擎更容易加载页面。

图片压缩的难点在于，一不小心就可能用力过猛。过度压缩会导致图片变得模糊不清，几乎无法辨认。

就像下面这张图片，您能分清哪张是压缩前，哪张是压缩后吗？提示一下：下面那张是压缩后的。

市面上有很多免费工具可以帮助您手动压缩图片，同时避免模糊或像素化，比如TinyPNG、Squoosh、ImageOptim和ShortPixel等。

如果您使用的是WordPress等内容管理系统（CMS），每次上传新图片时，都可以享受自动压缩功能，这能帮助您轻松管理文件大小，无需额外手动编辑。但请务必在图片上线前检查压缩质量设置，没人希望看到过度压缩的像素化图片。

图片压缩的关键，在于在保持图片质量和文件大小之间找到微妙的平衡。您可以这样做：

• 在您的CMS中设置自动化压缩工具。
• 选择合适的设置，在文件大小（为了快速加载）和高质量（为了避免模糊）之间取得完美平衡。
• 事后务必测试您的图片，确保压缩生效。 尽量将图片大小控制在100KB以下。使用PageSpeed Insights或Lighthouse等工具，查看加载时间是否有改善。

6. 为所有设备提供响应式图片

还记得我们提过，要提供响应式图片，以便不同屏幕尺寸的用户都能享受您的精美图片吗？实现这一目标的最佳方式就是使用响应式图片。

所有图片都带有一个名为srcset的属性。您可以使用它来告诉浏览器，根据用户的视口（viewport）大小，图片的最小宽度应该是多少：

<img  src="image-800.jpg"  srcset="  image-400.jpg 400w,  image-800.jpg 800w,  image-1200.jpg 1200w"  sizes="(max-width: 600px) 400px,  (max-width: 900px) 800px,  1200px"  alt="响应式图片示例" />

即使您的网站是个特例，只有桌面用户，您仍然应该为移动端优化您的页面体验，因为新媒网跨境了解到，自2023年起，谷歌已全面转向移动优先索引。这意味着谷歌在评估内容（包括图片）时，会使用您网站的移动版本。如果您的布局在小屏幕上表现不佳，您的排名将受到影响。

这就是sizes属性发挥作用的地方。它与srcset协同工作，告诉浏览器图片在不同屏幕尺寸上将显示多大。浏览器利用这些信息为每个设备加载最合适的图片版本，这对于移动端加载速度来说是一个巨大的提升，也直接影响到核心网页指标和SEO。

好消息是：如果您使用WordPress，这些工作通常会自动完成。WordPress会在图片上传时自动生成多种尺寸的图片，并包含srcset和sizes属性。

您还可以使用一种叫做“Retina优化”的技术，让您的图片在高分辨率屏幕上看起来依然清晰锐利。这对于使用苹果或高DPI安卓设备的用户尤为重要，因为这些屏幕每英寸像素更多，普通图片可能看起来模糊或像素化。您可以使用srcset来帮助浏览器根据屏幕密度选择最佳图片版本。

其代码片段如下：

<img  src="logo.png"  srcset="logo.png 1x, logo@2x.png 2x"  alt="公司Logo" />

这基本上是在告诉浏览器：“在普通屏幕上使用标准图片，但在高分辨率显示器上加载更清晰的版本。”

图片的技术性SEO优化进阶

没错，图片优化还有更多可以深入挖掘的空间。幸运的是，这些技术性增强更容易规模化实施，并且从长远来看，能显著改善用户体验。

1. 谨慎实施懒加载（Lazy Loading）

懒加载，顾名思义，就是让图片直到用户滚动到屏幕可见区域（或视口）时才开始加载。

听起来简单，但懒加载却异常实用。

核心原理是，搜索引擎只需加载“首屏”（即用户无需滚动即可看到的部分）内容。

由于无需同时加载所有内容，您的网站速度将得到显著提升。您还会看到“与下一次绘制的交互（INP）”指标有所改善。这是核心网页指标的另一个衡量标准，它关注页面对用户交互（如点击或轻触）的响应速度。INP值越低，页面响应用户操作的速度就越快。

为图片添加懒加载非常简单，只需在<img>标签中添加loading="lazy"属性即可，像这样：

<img src="image-example.png" loading="lazy" alt="请在此添加您的Alt Text">

然而，懒加载也有其“阿喀琉斯之踵”。您不应该将其应用于首屏的任何内容，特别是您的英雄图片。如果关键图片被懒加载，用户可能会在图片出现前看到空白占位符，这会损害用户体验，甚至使LCP变差。

另外需要注意的是，尽管大多数现代浏览器都支持直接在<img>标签中添加loading="lazy"属性，但基于JavaScript的懒加载库则有所不同。这些库提供更高级的功能，例如：

• 支持背景图片
• 渐入效果
• 无限滚动

但功能越强大，代码行数就越多，如果不小心，反而会损害性能。所以，建议从简单的原生懒加载开始，如果需要更多定制化功能，再逐步探索其他JavaScript库的功能。

2. 酌情添加图片结构化数据（Schema Markup）

结构化数据，也就是Schema Markup，是您可以添加到网站上的代码，用以提升您在丰富搜索结果（rich snippets）中排名的机会。丰富搜索结果就是那些带有图片、星级评论等更丰富信息的搜索结果，比如：

或者像这些热门食谱列表：

您可以使用ImageObject结构化数据来提供关于图片的额外信息，如创作者姓名和图片许可。这些信息甚至可以显示在谷歌图片搜索结果中：

您可以将其与产品（Product）、食谱（Recipe）甚至新闻（News）结构化数据结合使用。

以下是如何将图片与产品结构化数据结合的示例：

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "有机绿茶",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/green-tea.jpg",
    "width": 800,
    "height": 600,
    "caption": "有机绿茶叶"
  },
  "description": "源自日本的优质有机绿茶叶。"
}

将此结构化数据添加到您的页面，将有助于搜索引擎更好地理解您的产品页面图片，从而提高图片出现在丰富搜索结果和谷歌购物列表中的几率。

或者，如何将其与食谱结构化数据结合：

{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "巧克力曲奇",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/cookies.jpg",
    "width": 1200,
    "height": 800,
    "caption": "新鲜出炉的巧克力曲奇"
  },
  "recipeIngredient": ["1 杯糖", "2 杯面粉", "1 杯巧克力碎"],
  "recipeInstructions": "混合配料，以350°F烘烤12分钟。"
}

这段结构化数据，则会为您的食谱页面添加图片信息。这有助于搜索引擎更好地理解您的菜肴外观，并增加图片出现在搜索结果中的可能性。通过这种方式，您可以将食谱从这样：

升级为这样，从而获得更多点击：

您可以使用ChatGPT等AI工具，甚至像Schema.org这样的传统工具来帮助您编写结构化数据。然后，您可以使用谷歌的结构化数据测试工具进行验证和测试，确保一切正常运行。

如果您的结构化数据编写正确，您应该会看到类似这样的结果：

如果出现问题，您会收到错误消息，指明需要关注的地方：

结构化数据，如果与图片的Alt Text和文件名正确结合使用，是让搜索引擎真正理解您的图片的最佳方式之一。记住：谷歌这样的爬虫实际上无法“看”到您的图片，但通过用详细、包含关键词的文字填充这些不同的字段，您可以帮助它们精确理解图片内容。而搜索引擎对内容理解得越好，您的排名就越有可能提升。

3. 创建并提交图片站点地图（Image Sitemap）

站点地图，顾名思义，是您网站上所有URL的列表，它能帮助搜索引擎找到您希望抓取和索引的所有页面（即定位并记忆以用于可能的搜索结果）。

图片站点地图，则是针对您的图片而言。它确保搜索引擎能找到您网站上的所有重要图片。这对于大型企业网站或图片密集型垂直网站（如旅游网站或企业级跨境电商网站）尤其有用。

谷歌建议您按照以下结构构建图片站点地图：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>[您网站上某个网页的URL]</loc>
    <image:image>
      <image:loc>[该网页上某张图片的URL]</image:loc>
    </image:image>
    <image:image>
      <image:loc>[该网页上另一张图片的URL]</image:loc>
    </image:image>
  </url>
  <url>
    <loc>[您网站上另一个网页的URL]</loc>
    <image:image>
      <image:loc>[该网页上某张图片的URL]</image:loc>
    </image:image>
  </url>
</urlset>

您也可以使用XML Sitemaps等站点地图生成工具来为您提取所有这些信息。

获得站点地图后，您可以将其提交到Google Search Console（GSC）。Google Search Console应该是您首选的SEO工具之一。它能显示网站和页面层面的重要信息，例如：

• 展示次数（用户在搜索结果中看到页面的频率）
• 点击次数（用户访问这些页面的频率）
• 排名（您的页面在搜索结果中出现的位置）
• 点击率（展示次数与点击次数的百分比）
• 关键词（用户用来找到您网站的词语）

使用GSC提交您的站点地图，并跟踪谷歌如何查看和索引您的图片：
(1) 登录您的GSC账户。
(2) 导航到“索引”，然后选择“页面”。

(3) 向下滚动，查看某些页面未被索引的原因。寻找图片URL存在“已编入索引，但当前未在站点地图中提交”或“已发现-当前未编入索引”等问题的页面。

如果您想检查特定图片，可以将图片URL粘贴到URL检查栏中，查看其是否已排名。

您还可以使用GSC跟踪图片表现：
(1) 返回GSC侧边栏导航，选择“效果”。

此图表显示了过去六个月您网站的点击次数和展示次数。您可以调整“搜索类型：网站”功能，选择“图片”，专门查看图片效果。

这个新图表显示了您网站所有图片的自然搜索效果。您可以通过选择“更多”下拉菜单并更改筛选条件，将其进一步调整为不同的时间段：

您还可以向下滚动，查看用户通过哪些关键词找到这些图片。

利用这些信息，您可以了解用户在搜索您的图片时使用了哪些关键词。这为您提供了一个基准，了解目前哪些图片表现良好，哪些表现不佳。

4. 通过图片交付优化核心网页指标

核心网页指标是衡量您网站加载速度的重要标准。正如我们之前讨论的，它涉及几个具体指标。我们已经提到了如何改善INP（交互到下一次绘制）和LCP（最大内容绘制），现在再来看看另一个特性：CLS（累积布局偏移）。

累积布局偏移（CLS）是指当页面不同元素加载时，页面内容在视觉上的移动量。举个例子，您正在购物，想买一些胡萝卜种子，打开产品页面准备购买，但当您点击“添加到购物车”按钮时，页面加载完成，所有元素都发生了位移，导致您不小心点击了完全不同的东西。这正是CLS的“功劳”。

您可以通过在CSS中为每张图片定义高度和宽度属性来改善CLS和LCP。可以通过内联样式或外部样式表在CSS中为图片提供样式，就像这样：

img {
  width: 800px; /* 设置所需的宽度 */
  height: 500px; /* 设置所需的高度 */}

这样做的好处是，它能为浏览器提供一个“蓝图”，告诉它在图片加载前需要预留多少空间，从而最大程度地减少布局偏移（有助于CLS），并加快渲染速度（有助于LCP）。

您还可以更进一步，使用“纵横比占位符”。这听起来复杂，但它的基本含义是，您不再在CSS中直接定义宽度和高度，而是定义图片的纵横比。这样做也能为特定图片预留空间，效果同样出色。

---

新媒网（公号: 新媒网跨境发布），是一个专业的跨境电商、游戏、支付、贸易和广告社区平台，为百万跨境人传递最新的海外淘金精准资讯情报。

本文来源：新媒网 https://nmedialink.com/posts/20228.html