使用这些图像优化提示提高您的网站速度和排名

有些人是视觉学习者，有些是动觉，有些是听觉。但我认为我们大多数人都是不耐烦的学习者。

我们要求网站立即加载，我们的问题可以直接回答。这就是为什么搜索引擎优先考虑网页速度更快的网站，特别是在移动设备上。

在许多情况下，图像是影响网站加载时间的头号问题。

我们都明白，高质量的图像有助于积极的用户体验，但我想我们喝了太多自己的Kool-Aid？

2016年Google和SOASTA 研究证实，拥有更多图片的复杂网页的转化率低于图片较少的网页。

虽然有些网站可能会受益于“图像密集”，但我们应该将页面速度视为稀缺资源。我们将这些资源用于加载大型，庞大的资源越多，其效率就越低。

通过Google重新设计的PageSpeed Insights，很多人对于以“下一代格式”提供图像意味着什么以及为满足Google的担忧而存在哪些浏览器支持感到困惑。

此外，许多人仍然依靠旧技术来压缩和提供其网站上的图像。

继续阅读一些实用技巧，帮助您优化图像，以便在保持用户体验的同时提高页面速度。

1.负责任地使用图像

简约设计通常可以提供良好的用户体验，因为它提供了更好的性能。但是你需要问问自己一个图像是否对你的设计绝对至关重要。

对于更加动态的网页，可能很容易使图像具有交互性，甚至是设计的焦点。

除非您是摄影师，否则您可以利用替代资源而不是图像来改善您的用户体验，例如：

• 用于交互元素的CSS3。
• 简单的徽标和设计的可缩放矢量图形。
• 嵌入式视频而不是笨重的GIF。

实际上，矢量图像在加载到更高分辨率的设备上时倾向于保持更高的分辨率。

此外，您可以转而使用可改善用户体验的Web字体，而不是在图像中编码文本，而搜索引擎无法读取。

在PageSpeed Insights工具中，您经常会发现Google建议将图像推迟到屏幕外以改善装载效果。这实质上意味着在折叠下方移动图像，因此至少用户的初始加载速度更快。

要实现此目的，您需要优化关键路径渲染。

可以采用一些方法来优化关键路径呈现，例如缩小，缓存和压缩所有页面资源（CSS，JavaScript，HTML）。

标题和主文档模块的内联CSS交付还可以为用户提供即时加载，同时在后端加载所有未使用的CSS和资源。

此外，您可以阻止JavaScript阻止，以防止在第一次加载时加载您想要加载的资源。

虽然这很复杂，但有一些工具可以帮助WordPress。

W3 Total Cache缓存并将CDN中的每个资源从HTML一直缩减为WordPress元素。

此外，W3 Total缓存可用于优化关键路径渲染，例如使用带有“async”和“defer”的JavaScript解锁功能以及其他可帮助改善页面加载而无需完全删除图像的功能。

此工具还提供HTTP / 2功能，以进一步改善装载。

2.自动化图像压缩

可能是优化图像速度的两种最佳方法是减小尺寸并压缩文件。使用合适的工具，您可以非常轻松地进行图像压缩。

如果您正在使用WordPress，您可以安装Imagify并一键压缩所有图像。将使用此工具压缩添加到库中的所有其他图像。

这个插件甚至提供了一个激进的设置来压缩JPG和PNG以实现大规模的速度提升。

如果您担心插件会降低网站速度或使用更开源的CMS，则可以使用Image Optim压缩特定文件夹中的所有图像。它的拖放功能使压缩图像，然后将其添加到您的网站非常容易。

此外，如果您担心压缩CMS中的图像并留下较大的文件大小，您还可以在Adobe Suite或Affinity Photo中尝试压缩。

在为不同设备调整图像大小方面，WordPress的响应式设计可以使用’srcset’属性为您完成。

要记住的一件重要事情是，有损压缩可能会牺牲图像质量。

在较大规模的压缩下，有损压缩将消除更大的位深度并显着降低文件分辨率。

3.以下一代格式提供图像

根据您的文件格式，您将不得不使用有损或无损压缩。

传统上，我们依赖于两种图像格式JPEG（有损）和PNG（无损压缩）。

但是工具已经开始推荐新的图像格式，特别是用于创建快速加载速度和在移动设备上保持平滑的宽高比。

您可以选择多种新格式，包括JPEG 2000，JPEG XR和WebP。

JPEG 2000与传统JPEG非常相似，但具有无损压缩功能。这意味着压缩的JPEG 2000文件保留其元数据而不会造成太多质量损失。

JPEG XR在更高的压缩比下支持无损和有损压缩。

不幸的是，大多数主流浏览器都不支持这两种格式，包括Google Chrome和Firefox。这意味着您无需使用JPEG或PNG格式作为后备。

Google Chrome支持的唯一图片格式以及Firefox是WebP。WebP提供无损和有损压缩，以及对动画的支持。

有许多WebP插件可供试验，您可以使用在线转换器或Photoshop将JPEG或PNG文件转换为WebP。

当然，最理想的是为WebP文件提供备份。为此，您需要利用HTML中的<picture>元素来提供备份。

像WebP Express for WordPress这样的插件会自动在HTML中执行此操作，并可用于库中的批量转换。

最终，考虑到有限的浏览器支持，以下一代格式提供图像的选项并不太吸引人。

但是利用WebP等格式为您的网站图像提供更高的压缩比和更小的文件大小，这将使页面速度明显不同。

额外的想法

移动设备上的页面速度很难维护，尤其是在图像较重的网站上。

响应式网页设计和其他速度插件无法真正解释大型文件大小和资源正在尝试在您的网站上获取。

幸运的是，通过自动化压缩，更有策略地调整文件和图像大小，您可以大幅提高页面加载速度。