3速度更快的图像优化技巧＆amp;排名更高

 

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

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

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

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

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

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

借助百度重新设计的PageSpeed Insights，很多人都对使用“下一代格式”中的图像服务意味着什么感到困惑。以及支持百度关注的浏览器支持。

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

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

1.负责任地使用图像

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

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

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

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

事实上，矢量图像在加载到更高分辨率的设备时往往会保持更高的分辨率。

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

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

要做到这一点，您需要优化关键路径渲染。

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

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

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

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

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

此外，W3 Total缓存可用于优化关键路径渲染，例如使用JavaScript解除阻止“异步”。和“推迟”和其他功能，可以帮助改善页面装载，而不必完全摆脱图像。

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

2.自动化图像压缩

可能是优化图像速度的两种Zui佳方法是减小尺寸并压缩文件。使用合适的工具，图像压缩非常容易。

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

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

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

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

在为不同设备调整图像大小方面，WordPress的响应式设计可以使用＆ssquo; srcset＆rsquo;属性。

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

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

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

根据您的文件格式，您必须使用有损或无损压缩。

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

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

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

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

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

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

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

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

当然，它是为WebP文件提供备份的理想选择。要做到这一点，你需要利用＆lt; picture＆gt; HTML中的元素以提供备份。

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

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

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

其他想法

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

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

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

更多资源:

如何提高您在百度上的可见性Images7方式图像可以提升排名如何快速浏览您的网站

图片来源

特色图片: Pexels所有截图均由作者拍摄，2019年4月

CategorySEO