通过这 12 个图像 SEO 技巧和技术，了解如何优化您网站的图像，以便在搜索引擎中获得更好的可见性。
图像通常占据网页的最大部分。
他们在 Google 搜索结果中拥有自己的标签，甚至有自己的算法。出现在图片搜索结果中应该是完整SEO 策略的一部分，以便触达寻找图片的用户。
无论如何，您的内容都应该包含高质量的图像，那么为什么不优化它们呢？
本文将详细讨论图像 SEO 的各个方面，并指导您优化图像以便在搜索引擎中获得更好的可见性。
搜索引擎如何索引和理解图像
搜索引擎抓取网页来发现图像并从图像中提取数据，例如元数据和 文件名。
Google 会考虑周围文本、图像文件名、替代文本、标题和页面内容等因素来理解图像的上下文，并使用图像识别技术来理解图像的内容。
什么是图像SEO？
图像优化是一套基于我们对搜索引擎如何抓取、理解和排名图像的了解，用于提高搜索引擎结果页面（SERP）可见性的技术。
这涉及压缩图像以减少加载时间、针对不同屏幕尺寸使用响应式图像、实现延迟加载、添加相关替代文本以获得更好的用户体验、使用描述性文件名以及为图像实现结构化数据。
在此背景下，让我们深入研究下面的每个优化技巧。
1. 选择正确的图像格式
有几十种可用的图像格式，但谷歌搜索仅支持这些格式：JPEG、PNG、WebP、BMP、GIF 和 SVG。
让我们了解这些格式之间的差异以及它们如何影响您的网站和 SEO。
- PNG：采用无损压缩，这意味着不会丢失图像数据。因此，它可以生成更高质量的图像并支持透明度，但文件大小较大，非常适合打印。
- JPEG：使用有损压缩并导致图像质量下降，但您可以调整质量级别以找到良好的平衡。
- WebP：由 Google 开发，使用无损或有损格式，比 JPG 效率更高（约 25% 到 80%），因此在质量相当的情况下文件体积更小。所有主流浏览器都支持WebP 。
- GIF：采用无损压缩，但限制为 256 种颜色，因此不太适合高质量图像，更适合简单的图形和动画。
- SVG：这种矢量格式可用于制作徽标、图标和其他设计，因为它可以缩放到任意大小而不会增加文件大小。这使得它成为响应式网页设计的理想选择。
- BMP：大型且未压缩的图像文件，保持极高的质量。由于其体积较大，通常不用于网站，因为它会显著降低页面加载速度。
对我来说，最好的选择是 PNG，然后可以将其转换为 WebP 格式以进行 Web 部署。
关于将 GIF 转换为 WebP，请注意旧浏览器（例如 Safari 15.6（macOS Catalina）及更早版本）不支持动画 WebP 格式。
通常，只有少数用户使用过时的浏览器版本，因此您不必担心。
一般来说，当您使用某种技术时，建议您定期通过 Google Analytics 监控支持该技术的流量设备的百分比。
压缩如何影响图像质量和加载时间
| 图像格式 | 文件大小 | 3G连接上的加载时间 | 快速连接（128 MB/秒）下的加载时间 |
| BMP | 1900 KB | 17.22秒 | 311毫秒 |
| PNG | 552 KB | 9.16秒 | 156毫秒 |
| GIF | 265 KB | 5.89秒 | 89毫秒 |
| JPG | 91.5 千字节 | 2.91秒 | 47毫秒 |
| WebP | 41.2 千字节 | 1.77秒 | 29毫秒 |
这充分说明了 WebP 格式的有效性。它拥有最小的文件大小，加载速度比 PNG 快 5 倍，几乎是 JPG 文件的两倍。
这就是为什么我们推荐使用 WebP 的原因。如果您已经这样做了，这意味着您在优化加载方面已经取得了很大的进展。（在某些情况下，WebP 图片的大小可能会大于原始文件。更多信息，请参阅 Google 的常见问题解答页面。）
然而，更改图像格式（即应用压缩算法）可能会导致其质量和清晰度下降。这意味着您应该根据网站的性质选择合适的格式。
例如，如果您有一个摄影网站，保留图像中的高级细节是用户体验的关键，建议使用 PNG 而不是 JPG 或 WebP。
在这种情况下，您可以显示链接到全质量 PNG 图像的 WebP 格式缩略图。
我们了解了各种图像格式及其各自的压缩方法。
您可能想知道不同的图像压缩工具（例如ShortPixel或TinyJPG）的作用是什么。
图像压缩服务使用先进的算法并去除不必要的元数据（如 EXIF 数据和 GPS 标签），以减少文件大小，超越标准文件格式固有的基本压缩。
这些服务采用增强的有损或无损压缩技术，有选择地删除人眼不太明显的数据。
例如，当使用 ShortPixel 有损将上面的示例图像从 JPG 转换为 WebP 时，会生成一个 8.3 KB 的文件，而 TinyJPG 会生成一个略有不同的 8.7 KB 文件。
以下是您可以考虑使用的图像压缩服务列表：
但是请注意，使用这些工具进行压缩可能会明显降低图像质量。例如，在包含文本的屏幕截图中进行压缩时，可能会扭曲图像上的文本。
因此，始终建议仔细检查和选择优化类型。
AVIF 格式怎么样？
AVIF 是一种所有主流浏览器都支持的新格式，Google 搜索最近也开始支持它。
AVIF使用有损压缩提供更高级别的压缩。
例如，同一个图像文件在 AVIF 中为 11 KB，而在 WebP 中为 41 KB。
然而，正如您可能从下面的比较中注意到的那样，它会降低图像质量。这很明显地体现在使用 AVIF 压缩算法压缩时，图像中出现的不规则部分会被拉平，而右侧使用 WebP 压缩则不然。
但是，如果您对 AVIF 质量感到满意并想使用它，则可以将其作为<picture>第一个包含在标签中 <source>.
仍然不支持它的浏览器将会忽略它并继续使用<picture>标签中指定的下一种格式。
以下是示例代码：
<picture>
<!-- AVIF format will be processed if client (i.e. browser ) supports it as a first in list-->
<source type="image/avif"
srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- WebP format will be processed if client doesn't support AVIF -->
<source type="image/webp"
srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- If WebP is also not supported, the browser will then fall back to the PNG format -->
<source type="image/png"
srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- Lastly, if none of the advanced formats are compatible, the browser will default to displaying the JPEG image. -->
<img src="image-300w.jpg"
srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
alt="Description of the image">
</picture>这种渐进式增强保证了跨各种浏览器和设备的最大兼容性。
我们将在本文后面介绍srcset和sizes属性，解释如何使用它们针对不同的设备和屏幕尺寸优化图像，从而确保它们高效加载并且适合移动设备。
2.创建独特的图像
太多的网站都充斥着相同的通用库存照片，因此您希望您的照片在您的网站上脱颖而出并为用户带来独特的价值。
如果你的网站充斥着库存图片，你会显得缺乏创意，因为谷歌了解图片的内容。由于同一张库存照片可能会在其他网站上使用，因此它会被视为重复内容。
想想那些以客户服务为荣的企业网站、咨询公司或企业。所有这些网站都使用几乎一模一样的商人微笑图片。
我确信你一定见过这样的：
虽然您可能已经对库存图片进行了完美优化，但它不会具有与原始高质量图像相同的影响力或潜在的 SEO 优势。
原创图片越多，用户体验就越好，在相关搜索中排名的几率就越高。
请记住，大图像更有可能在 Google Discover 中展示。
Google 建议图像宽度至少为1200 像素，并通过 robots 元标记中的设置启用， max-image-preview:large以确保它们在 Google Discover 中显示为大图像。
<meta name='robots' content='index, follow, max-image-preview:large' />以下是如何帮助您的图像显得更大的示例：
不过，这里有一个需要注意的地方。正如你所见，即使网页使用了所需的设置，缩略图仍然会显得很小。
Google并不保证它会一直显示大缩略图。
作为 SEO，你能做的最好的事情就是在 robots 元标记中包含所需的设置，并确保图像宽度至少为 1200px：
3.优化图像文件名
当谈到 SEO 时，创建描述性的、关键词丰富（而不是填充）的文件名绝对至关重要。
图像文件名会向 Google和其他搜索引擎爬虫提示图像的主题。
通常，类似“IMG_722019”或类似的文件名无法帮助 Google 更好地理解图像。
尽管 Google 现在已经能够理解图像的内容，但设置有意义的文件名并帮助 Google 更好地理解图像也无妨。
更改默认文件名，以帮助搜索引擎了解您的图像并提高您的 SEO 价值。
根据您的媒体库的广泛程度，这涉及一些工作，但更改默认图像名称始终是一个好主意。
4. 编写 SEO 友好的 Alt Text
当浏览器无法正确呈现图像时，Alt 标签会提供替代文本。与标题类似，alt 属性用于描述图像文件的内容。
当图片无法加载时，您会在左上角看到一个带有 alt 标签的图片框。请确保 alt 标签与图片匹配，并确保图片具有相关性。
关注 alt 标签也有利于整体页面 SEO 策略。
您想确保所有其他优化区域都已到位，但如果图像由于任何原因无法加载，用户将看到图像应该是什么样子。
此外，通过将关键字与图像关联起来，为您网站的图片添加适当的 alt 标签可以帮助您的网站在搜索引擎中获得更好的排名，因为alt 文本是一个排名因素。
它为 Google 提供了有关图片主题的有用信息。Google 会利用这些信息来确定针对用户查询返回的最佳图片。
以下是 Google 官方文档中关于不良和良好替代文本的示例。
此外，根据《美国残疾人法案》，对于无法自己查看图像的个人，必须提供替代文本。
描述性替代文字可以提醒用户照片中的具体内容。例如，假设您的网站上有一张巧克力的图片。
替代文本如下：
<img src=”chocolate-1.jpg” alt=”chocolate”/>然而，描述该图像的更好的替代文本应该是：
<img src=”chocolate-1.jpg” alt=”dark chocolate coffee flavored bar”/>为了进一步提高 SEO 价值，当图像链接到网站上的其他页面时，替代文本可以充当内部链接的锚文本。
5. 优化页面标题和描述
Google 使用您的页面标题和描述作为其图像搜索算法的一部分。
所有基本的页面 SEO 因素（如元数据、标题标签、页面副本、结构化数据等）都会影响 Google 对您的图片的排名。
这就像把所有配料都放在墨西哥卷饼上一样；加鳄梨酱味道会更好。所以，一定要添加鳄梨酱来提高图片排名。
6. 定义维度
图像尺寸属性对于防止累积布局偏移 (CLS)问题（可能会干扰您的核心 Web 指标优化）非常重要。这可以防止页面在加载时跳动。
确保每个图像和视频元素都包含宽度和高度属性是关键。
这会告诉浏览器为资源分配多少空间，并防止令人讨厌的内容转移降低您的 CLS 分数。
7. 让你的图片适合移动设备
您可能已经注意到，我们 在讨论图像格式时简要谈到了srcset和属性sizes。
本质上，这些属性支持响应式图像，允许它们根据用户设备的大小或分辨率进行缩放，并通过节省宝贵的带宽（尤其是在网络连接较慢的情况下）以最佳大小加载。
现在，让我们深入了解这些属性，以了解它们如何发挥作用。
让我们分解一下这个示例代码：
<picture>
<!-- WebP format for browsers that support it -->
<source type="image/webp"
srcset="image-300w.webp 300w,
image-600w.webp 600w,
image-1200w.webp 1200w"
sizes="(max-width: 600px) 300px,
(max-width: 900px) 600px,
1200px" >
<!-- Fallback JPEG format -->
<img src="image-300w.jpg"
srcset="image-300w.jpg 300w,
image-600w.jpg 600w,
image-1200w.jpg 1200w"
sizes="(max-width: 600px) 300px,
(max-width: 900px) 600px,
1200px"
alt="Description of the image">
</picture>该srcset 属性在标签内用于<img>指定不同的图像文件及其宽度。
每个文件都带有一个“w”描述符，表示图像的宽度（以像素为单位）。这是必要的，因为浏览器在下载图像之前无法识别图像大小。
这就是为什么你必须指定宽度，以便让浏览器了解每个版本的宽度。例如：srcset=”image-300w.jpg 300w, image-600w.jpg 600w”
浏览器会使用该sizes 属性以及该srcset属性来选择资源。它指定了不同视口尺寸下图像的预期显示宽度。
对于宽度最大为 600 像素的视口，它将选择宽度为 300 像素的图像；对于宽度最大为 900 像素的视口，它将选择宽度为 600 像素的图像；对于更大的视口，它将选择宽度为 1200 像素的图像。
如果没有此属性，浏览器将默认使用视口的整个宽度从中选择图像srcset。
您还可以使用“x”描述符，它告诉浏览器根据设备的屏幕分辨率选择最合适的图像大小（例如标准、视网膜和超视网膜屏幕的 1x、2x 或 3x）。
<picture>
<!-- WebP format -->
<source type="image/webp" srcset="image.webp 1x, [email protected] 2x, [email protected] 3x">
<!-- Fallback JPEG format -->
<img src="image.jpg" srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x" alt="Description of the image">
</picture>此外，您可以使用“x”描述符来表示不同的屏幕分辨率（例如，视网膜显示器），其中图像大小保持不变。
同时，“w”描述符适用于流畅的响应式布局，其中图像大小根据视口大小而变化。
我可以读懂你的想法，因为你在思考如何使用sizes 和srcset属性来实现自动化，即使你很了解网页的布局，这也是相当具有挑战性的。
幸运的是，Chrome 最近开始开发对的支持，它将指示浏览器根据 HTML 布局和 CSS 从属性中确定延迟加载图像sizes="auto"的大小。srcset
这意味着浏览器将根据 CSS 规则规定的页面上的显示方式考虑下载适当的图像大小，而不是假设它占据整个视口宽度。
请记住，此功能仅适用于延迟加载的图像。这是因为当延迟加载的图像开始下载时，布局就已经渲染完毕，从而允许浏览器准确计算它们在 CSS 中指定的网页上所占的大小。
但是请注意，您始终需要指定可用的最大尺寸的宽度和高度属性。
通过指定图像尺寸并利用 CSS（width: 100%; height: auto;）来保持纵横比，浏览器srcset在使用时可以从属性中准确地选择和显示图像sizes="auto"。
8.延迟加载和预加载
延迟加载是延迟加载用户视口（首屏）中不可见的图像。
延迟加载不会在页面加载时加载所有图像，而是仅在用户滚动时即将看到图像时下载图像。
这减少了初始加载时间，加快了页面性能，并且可以显著改善LCP，尤其是在包含许多图像的页面上。
实现延迟加载就像在标签loading="lazy" 中添加属性一样简单<img>。
<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description">但切勿延迟加载首屏上方的图像，因为这会对首次内容绘制 (FCP) 指标产生负面影响。
相反，预加载它们或使用fetchpriority="high"属性。
preload 相对于“fetchpriority”属性的优势在于，所有浏览器都支持preload，而Firefox 和 Opera 浏览器不支持后者。
以下是预加载和使用的示例fetchpriority：
<img src="image.jpg" fetchpriority="high" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description"><link rel="preload" as="image" href="image-600w.jpg" imagesrcset="image-300w.jpg 300w, image-600w.jpg 600w" imagesizes="(max-width: 600px) 300px, 600px">通过使用预加载或fetchpriority，您可以指示浏览器优先开始加载图像，这有利于提高最大内容绘制 (LCP)。
9. 将图片添加到站点地图
无论是将图像添加到站点地图还是为图像创建新的站点地图，您都希望将图像放在站点地图中的某个位置。
将图片添加到站点地图中，可以大大增加搜索引擎抓取和索引图片的机会，从而带来更多网站流量。
如果您使用 WordPress，Yoast 和RankMath在其插件中提供了站点地图解决方案。
如果您不使用 WordPress，您可以考虑使用Screaming Frog等软件来生成站点地图。
10.添加结构化数据
向您的图像添加结构化数据可以引导 Google 和其他搜索引擎提供更好的视觉效果，从而增强您的网页。
例如，您可以在产品架构中添加产品图片以及价格、库存情况和评分等详细信息。这可以使您的产品在搜索结果中脱颖而出，吸引更多潜在买家的关注。
另一个用例涉及在文章架构中添加具有多种尺寸的图像架构，以增强您的文章在 Google Discover 和 Google 搜索中的不同设备中的可见性。
Google 可能会在显示它们时选择最匹配的尺寸。
以下是一个例子：
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": "Article Title",
"image": [
"https://example.com/photos/1x1/image.jpg",
"https://example.com/photos/4x3/image.jpg",
"https://example.com/photos/16x9/image.jpg"
],
"datePublished": "2024-01-10T08:00:00+08:00",
"dateModified": "2024-01-10T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Author Name"
},
...
}
</script>11. 使用 CDN 进行 Daster 图像传输
内容分发网络或 CDN是一组分布在世界各地的服务器，用于托管您的内容并从地理位置上距离用户最近的服务器位置将其传送给用户。
然而，交付并不是 CDN 的唯一优势；它们还提供转换和优化功能。
通过传递参数和图像 URL，您可以请求不同的图像大小或将图像转换为更高效的格式，例如 WebP。
例如，Cloudflare 的 Polish等服务可以通过检测浏览器与 WebP 格式的兼容性来自动优化图像格式。它可以根据请求以 WebP 格式提供 PNG 和 JPEG 图像。
例如，在 Search Engine Journal，我们使用该技术通过我们服务器的内置 CDN 提供 WebP 格式。
即使图像具有“.jpeg”或“.png”扩展名，如果浏览器支持，我们的 CDN 也会提供 WebP 服务。
将 PNG 图像作为 WebP 图像提供（DevTools 截图，2024 年 2 月）
使用 PageSpeed Insights 验证页面时，建议确保通过审核“以下一代格式提供图像”。
以下是一些您可以考虑使用的最知名的 CDN 服务：
12. 注意版权
无论您选择使用什么图像文件，请确保没有版权冲突。
美国邮政局在图像版权诉讼中支付了350 万美元，而斯凯奇则被起诉赔偿250 万美元。
如果 Getty、Shutterstock、DepositFiles 或其他一些图片库提供商拥有您使用的图片，而您没有使用许可，那么您将面临昂贵的诉讼风险。
根据《数字千年版权法》(DMCA)，如果您违反了任何版权问题，您可能会收到通知。如果内容所有者在您的网站上看到自己的内容，他们可以发出 DMCA 删除通知，您必须遵守。
图像优化关键要点
因此，在开始将图像上传到您的网站之前，请遵循上述图像优化仪式。
最重要的是确保图片和替代文本与页面相关。其他要点：
- 选择正确的文件格式。
- 提供合适的文件大小以加快页面加载速度。
- 确保您的页面 SEO 元素（元数据、结构化数据等）与您的图像配对。
- 为了便于爬行，请创建图像站点地图或确保您的图像在站点地图中显示。
优化图片可不是闹着玩的。随着搜索技术的最新进展，尤其是谷歌开始在搜索结果中优先考虑视觉效果，你的整个网站都将从上述步骤中受益。
发表回复