WordPress外贸建站专家
任何一个外贸网站都会用到图片素材，网站中的图片视觉内容可以很大程度上提供网站内容的可读性，吸引用户停留继续浏览页面内容，所以，网站中图片内容的优化也是至关重要的，使用一些通用的网站图片优化技巧，可最大程度地提高网站的可读性和加载速度。
网站图片的SEO优化是页面优化的基础之一，图片是网页的强大视觉组件，“图片胜于千言万语”。如果网站中的图片内容使用得当，除了可以直观地吸引用户浏览，提高网站内容可读性之外，图片内容更可以成为来自Google图片搜索和其他图片搜索引擎的高质量精准流量来源。
最重要的图片优化因素包括alt标签，标题标签，图像格式，图像尺寸，图像名称和图像链接等。
1. 选择正确的格式
并不是所有的图片格式都可以在浏览器正确显示的，所以，我们在开始给网站内容添加图像之前，您需要确保已选择最佳的文件类型。尽管有很多图像格式可供选择，但是PNG和JPEG是网络上最常见的格式。
- PNG：产生更好的图像质量，但文件尺寸较大。
- JPEG：您可能会失去图像质量，但是可以调整质量等级以找到良好的平衡。
- WebP：使用这种选择无损或有损压缩，这是Chrome和Firefox唯一支持的图像格式。
每种图片格式都使用不同的压缩方法。这意味着三种文件类型之间的文件大小可能会发生巨大变化。那很重要 原因如下：
，图像通常是导致页面总大小的最大因素，这可能会使页面加载速度慢且加载成本高。
页面加载时间对于SEO至关重要。Google已经确认这是台式机 和移动设备的排名因素。您的任务是为每个图像选择最合适的文件类型，即提供最佳压缩效果且质量降低最少的文件类型。
考虑到这一点，这是与JPEG，PNG和 GIF相同的图像：
您可以看到JPEG格式的图像无疑是赢家。它具有最小的文件大小，并且与其他两个图像之间的图像质量几乎没有差异。所以，这时选择JPEG格式的图片是最好的。
当然，有些色彩单一的图片文件，在使用PNG格式时可以获得更好的压缩比例和清晰度，这可以根据所用图片的性质来进行有选择性地使用相应图片格式。
2. 图像大小和托管
根据HTTP Archive的数据，图像平均占整个网页重量的21％。
这就是为什么我强烈建议您在上载到您的网站之前压缩您的图像。您可以在Photoshop中执行此操作，也可以使用TinyPNG之类的工具。TingPNG也有一个WordPress插件，您也可以使用。
图像大小是一个非常关键的因素，因为它直接影响页面的加载时间。您可以采取一些措施来确保图像不会降低页面速度：
如果您使用的是WordPress，则可以使用WordPress图片压缩插件，该插件每月提供100个免费图片优化。您可以使用它来优化已上传图像的图像尺寸。使用此插件的另一个原因是，它可以将您现有的.png图像转换为.jpeg。
图片托管是另一个重要因素，尤其是从Google Image Search吸引流量时。选择用于Google图像搜索的图像的因素被隐藏起来，但是有人说图像托管是选择图像的重要因素之一。据说与文本在同一域中托管的图像比在其他域（如免费图像托管站点）中托管的图像具有更高的价值。
Google图像搜索的另一个重要算法是如何将图像与页面上的文本融合在一起。
3. 更好的图片SEO命名
就像关键字在URL中很重要一样，图像也是如此。富含关键字的文件名可以帮助搜索引擎机器人确定相关性。图片的文件名可以为Google提供有关图像主题的线索。
避免使用默认的图像文件名，例如：“ DSC0019.jpg ”，因为它没有提供有关图像的太多信息。使用描述性文件名，并使用以“-”（连字符）分隔的关键字，例如：“ my-iphone.jpg”。
4. Alt标签（替代文字）和图片标题
Alt标签可能是最重要的图像优化因素。Alt代表替代。如果无法显示图像或加载时间太长，则alt标签中的文本将代替图像显示。
大多数主要的搜索引擎都是基于文本的，即它们无法读取图像和视频。图片的位置在搜索引擎中显示为空白。这些空白对您的整体SEO毫无好处。alt标签不仅告诉搜索引擎这里有一张图片，而且还告诉您有关图片主题的信息。
ALT标签的一个好习惯是使alt标签简短但具有描述性。
有些插件会自动将图片名称用作Alt标签。这就是为什么在上传之前重命名图像并给它取一个有意义的名称的原因。您始终可以手动将alt标签添加到图像。
在WordPress中给图片添加Alt标签（替代文字）和图片标题的方法：
只需在媒体库中选择图像，然后在右侧的图片属性中，进行相应的设置就可以。
5. 图片说明文字
图片说明文字，一般是直接显示在图片正下方的位置，就如果我们当前文章中的图片下方的简短说明一样。，图片说明文字与文件名和替代文本都不同，图片说明文字可以在网站页面上看到。因此，它们可以增加用户体验。
大多数人都喜欢图像说明文字，以了解整体内容。没有图像说明文字，跳出率可能会增加，从而损害您在搜索引擎中的信誉。
6. 根据站点尺寸调整图像大小
图像尺寸大小和文件大小不是一回事。图像尺寸是指图像的尺寸（例如1024 x 680像素）。文件大小是将其存储在服务器上所需的空间量（例如350 KB）。
具有较高分辨率和较大尺寸的图像（通常是使用专业相机创建的）会大大降低页面加载时间。虽然它们可以很好地用于打印再现，但是您需要缩小文件大小，而又不会损失太多质量以使其无法在网络上正常工作。
现在，构成图像的像素越多，文件大小将越大。
浏览器将调整宽度大于720像素的图像，以使其适合屏幕（至少对于响应良好的响应式网站）。但是，重要的是，浏览器仍然必须加载完整尺寸的图像。换句话说，如果我们要上传一个6000像素宽的图片，即使它显示为720像素，浏览器仍然需要加载整个图片。太慢了
解决方案是按照所需的最大宽度调整大小并上传图像。请注意，这可能不是720像素。这取决于您网站的整体设计。第一步是弄清楚这一点。您可以通过深入研究CSS来做到这一点。
7. 在适当的地方使用矢量图
这是Google 关于矢量图形的说法：
矢量图形使用线，点和多边形来表示图像。[它们]非常适合由简单的几何形状（例如徽标，文本，图标等）组成的图像，并且在每个分辨率和缩放设置下都能提供清晰的结果，这使其成为高分辨率的理想格式需要以不同大小显示的屏幕和资产。
许多站点将矢量图形用作徽标和其他简单的站点元素。
SVG（可缩放矢量图形）可能是网络上最流行的矢量格式。万维网联盟（W3C）开发了它们，它们基于XML。因此，所有现代Web浏览器都支持 它们。
无论您使用哪种浏览器，设备或屏幕分辨率，SVG都将看起来非常清晰，因为它们不会像素化。您可以在行星大小的屏幕上显示SVG-不会损失一盎司的质量。您还可以使用大多数现代图形设计应用程序（例如Adobe Illustrator）将插图导出为SVG 。
以下是Google关于优化SVG的建议：
- SVG文件应该被缩小以减小它们的大小。
- SVG文件应使用GZIP压缩 。
他们推荐的最小化SVG文件的工具是svgo。
8. 添加图像结构化数据
向页面添加结构化数据有助于搜索引擎将图像显示为丰富的结果。Google图片支持产品图片，视频等结构化数据。这样的数据可以更加方便搜索引擎识别图片性质和内容。
谷歌表示，这 对这些徽章：
如果您的站点上有图像，则可以通过使用页面上的适当结构化数据来帮助用户识别与图像关联的内容类型。这可以帮助用户快速找到相关内容，并向您的网站发送更好的针对性流量。
目前，Google支持四种类型的标记：产品，食谱，视频和GIF。
确保您的图像在Google图像搜索中显示这些标志很容易。您只需要在页面上添加适当的架构标记即可。
当然，除非您的网站上有任何此类内容，否则您无需担心架构标记。Google可能支持这四种内容类型的徽章，因为他们已经意识到他们的用户经常在Google图片中寻找此类内容。
9. 好的图片文件目录结构
Google在2018年更新了其图像准则。他们揭示的主要更新之一是，他们使用文件路径和文件名对图像进行排名。
重复：文件路径和文件名是实际的排名因素。
例如，如果您是一个拥有多个产品的电子商务品牌，则建议您将子文件夹结构化为更多与类别相关的主题，例如 /shorts/ 或 /denim/，而不是将所有产品图像都放置在通用的 /media/ 文件夹中。
10. 适用于移动端
适用于移动端SEO的图片，可以为您提供更多的排名功能和更好的用户参与度。
您创建响应式图像。这意味着无论用户使用台式机还是移动设备，图像都将根据站点的大小缩放。它会根据设备的大小进行调整。
Mozilla提供了全面的使用 srcset 和 sizes属性来向浏览器提供其他源图像，从而可以显示为设备调整大小的相同图像内容。
至关重要的是，在每一行上使用属性值的不同部分来对此进行格式化，如本示例中从其资源中所示：
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
11. 延迟加载
延迟加载是浏览器推迟加载图像（或任何其他对象，例如视频等）的位置，直到需要在屏幕上显示它们为止。其他图像在需要加载时以及加载时（即在您滚动时）加载。
以下是Google 关于延迟加载的说法：
延迟加载可以根据需要或在主要内容完成加载和呈现后加载，从而显着加快包含很多首屏以下图像的长页面的加载。
过去，关于延迟加载的图像对SEO是好是坏，一直有很多争论。Google在此处说明了如何实现延迟加载（以确保他们可以看到延迟加载的内容的方式，这一点非常重要！）。有几种不同的方法，但是它们都涉及Javascript。如果您对此类事物不熟悉或不熟悉，则可能值得聘请编码器来对此进行帮助。
如果您使用的是WordPress（与我们一样），那么那里有一些WordPress图片延迟加载插件。
12. 浏览器图片缓存
浏览器缓存是将图像（和其他文件）存储在访问者的浏览器中的位置。结果是，将来他们访问您的网站时，它们的加载速度会更快。
例如，当您登陆此博客文章时，必须下载文章中的所有图像并将其显示在浏览器中。现在，无需浏览器缓存，如果您明天想重读此页面，则需要完全重复此过程。
但是，使用浏览器缓存时，发生的情况是您的浏览器挂接到了其中的某些图像上。因此，当您再次查看此页面（或类似页面）时，无需重新下载所有页面。许多计算机已经在您的计算机上，因此加载速度会更快。
这是Google 关于浏览器缓存的说法：
HTTP缓存可以加快重复访问时的页面加载时间。
当浏览器请求资源时，提供资源的服务器可以告诉浏览器它应该暂时存储或“缓存”资源多长时间。对于对该资源的任何后续请求，浏览器将使用其本地副本，而不是去网络获取它。
如果您的网站可以从浏览器缓存中受益，您甚至可能会在Google PageSpeed Insights中看到此警告：
那么，如何为图像启用浏览器缓存？
在WordPress中，这非常简单。只需安装W3 Total Cache之类的插件即可。这将默认启用浏览器缓存，并将所需的修改添加到您的.htaccess文件中。
对于非WordPress用户，您将需要将此代码手动添加到.htaccess文件中：
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
</IfModule>
您可以将“ 1年”部分更改为“ 1个月”，“ 1周”，“ 1天”，“ 1小时”等。不过，这些设置在大多数站点上都可以正常使用。这些也是W3 Total Cache默认使用的值。
