4个基本图像优化技巧

null

一些幸运的开发者和这位作者有机会对Addy Osmani的新图像优化电子书进行技术编辑,基本图像优化,你绝对应该阅读。

无论你是否正在建造全尺寸电子商务网站或者只是为你的网上家设计组合在本文中,您将从Addy的书中学到一些技巧,这些技巧将有助于使您的图像更精简,更快速。

有选择性并预加载关键图像

查看您的网站并确定关键图像资产。对于大多数人来说,这将是您想要尽快渲染的徽标或英雄形象。

这就是预紧资源提示进来。预紧是一种暗示客户端应该在浏览器解析器发现资产之前检索资产的方法。你几乎可以使用它,但它可以很好地预加载关键图像。这是HTML中使用它的一个例子要预加载英雄横幅图像的元素:

您还可以在HTTP标头中使用preload:

链接:  ;相对=预载荷;作为图像=

您可以在下方看到Chrome中同一页面的两个截图卷。一种情况使用预紧加载英雄横幅图像,而另一个没有。

The effect of using preload on a hero banner

在英雄横幅上使用预加载的效果

在示例中预紧,横幅图像在浏览器窗口中显示的速度提高了半秒。所有这些都是因为快速的单行程序使浏览器处于领先地位。

自动简化SVG图稿

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered

Illustrator的简化工具,显示降低曲线精度之前和之后的锚点数

优化SVG与其他图像类型不同,因为与JPEG或PNG不同,SVG由文本组成,特别是XML标记。这意味着您应用于基于文本的资产的典型优化(例如,缩小,gzip / Brotli压缩)也可以并且也应该应用于SVG。除此之外,您还可以使用SVGO等优化器来缩小SVG的大小。

但是,如果你不只是消费矢量艺术品,而是创造它呢?如果您是Illustrator用户,则可以通过“简化”对话框窗口自动简化图稿以减少路径中锚点的数量。

可在以下位置找到此对话框插画家CC通过转到对象>路径>简化的菜单。通过降低曲线精度(并可选择调整角度阈值),可以删除图稿中的额外路径点。在这种情况下,您会注意到曲线精度降低至6%会消除54个路径点。明智地使用它甚至可以改善您的艺术品的外观。

The savings that path simplification can afford

路径简化可以节省的成本

向智者说话 - 小心你使用这个工具有多么激进。较低的曲线精度太高,您曾经精心制作的艺术品将变成一个blob。然而,取得适当的平衡,你将获得回报。

将动画GIF转换为视频

With FFmpeg you can turn flabby GIFs into svelte video

使用FFmpeg,您可以将松弛的GIF变成苗条的视频

我们都喜欢一个好的动画GIF。他们有效地传达了几乎任何情绪,但他们可能真的很大。像gifsicle这样的图像优化器可以帮助削减多余的千字节,但是票证是将这些GIF转换为视频并将它们嵌入到HTML5中标签。该Ffmpeg的命令行实用程序非常适合此任务:

ffmpeg -i animated.gif -b:v 512K animated.webm ffmpeg -i animated.gif -b:v 512K animated.ogv ffmpeg -i animated.gif -b:v 512K animated.mp4

以上命令采用源GIF(Animated.gif)作为-i参数的输入,输出可变比特率最大为512Kbps的视频。在我们自己的测试中,我们能够采用989Kb动画GIF并将其减少到155Kb MP4,109Kb OGV和85Kb WebM。所有视频文件的质量都与源GIF相当。因为无处不在在浏览器中支持标记,这三种视频格式可以这样使用:

如果您决定走这条路,请务必订购标签,以便首先指定最佳格式,最后指定最佳格式。在大多数情况下,这意味着您首先要开始使用WebM视频,但要检查每个视频的输出文件大小,然后选择最小的视频,并以最大的视频结束。

如果你没有FFmpeg或者不知道它是什么,看看这个。它可以通过大多数操作系统软件包管理器轻松安装,例如Homebrew或Chocolatey。

使用IntersectionObserver进行延迟加载

延迟加载图像是您可能已经在做的事情,但许多延迟加载脚本使用CPU密集型滚动事件处理程序。这些方法导致页面上的交互缓慢。处理能力较低的较旧硬件更容易受到此类代码的不良影响。执行限制确实在某种程度上有所帮助,但它仍然是一个混乱且相当低效的解决方法,用于确定元素何时在视口中。

值得庆幸的是,Intersection Observer API为我们提供了一种更简单,更有效的方法来确定元素何时在视口中。这是一些基本的延迟加载图像标记的示例:

我很懒。

在这里,我们在中加载一个占位符图像SRC属性,然后存储我们想要懒惰加载的图像的URL数据-SRC属性。最重要的是,我们给予了元素一类懒惰,方便访问QuerySelectorAll。从那里,我们只需使用此代码:

document.addEventListener(“DOMContentLoaded”,function(){if(窗口中的“IntersectionObserver”和窗口中的“IntersectionObserverEntry”&window.&tersectionObserverEntry.prototype中的“intersectionRatio”){elements = document.querySelectorAll(“img.lazy”); var imageObserver = new IntersectionObserver(functions(entries,observer){entries.forEach(function(entry){if(entry.isIntersecting){entry.target.setAttribute(“src”,entry.target.getAttribute(“data-src”) )); entry.target.classList.remove(“lazy”); imageObserver.unobserve(entry.target);}});}); elements.forEach(function(image){imageObserver.observe(image);}) ;}});

在这里,我们将代码绑定到文献对象DOMContentLoaded事件。此代码检查当前浏览器是否支持Intersection Observer。如果事实证明它是,我们抓住所有IMG一类的元素QuerySelectorAll然后将观察者附加到他们身上。

观察者包含我们正在观察的元素的参考()和观察者本身(观察者)。此代码取决于每个观察者条目IsIntersecting值。虽然观察到的元素不在视口中,IsIntersecting回报0。但是,当元素进入视口时,它将返回大于的值0。正是在这一点上,我们交换了图像的内容数据-SRC属性进入SRC属性,并删除它类。在给定图像延迟加载之后,观察者将与观察者一起移除观察者Unobserve方法。

这个过程比使用滚动处理程序更容易,但由于Intersection Observer不享受普遍支持,您可能不得不依赖它们。如果你是一个抓住脚本然后去的那种,我们写了一个使用Intersection Observer的延迟加载器,但也回到过去的方法。你可以抓住它这里

本文最初发布于301期,这是全球最畅销的网页设计师和开发者杂志。在这里购买问题301要么订阅这里

相关文章:



翻译字数超限