4个基本的网页图片优化指南
不论你创建的是一个商务网站，还是自己的作品集简历，都会用到图片。这篇文章中，将介绍一些基本的图片优化技巧，让你的网站图片更加高效。
精心选择并预加载关键图片
浏览你的网站，并找出最重要的哪些图片。这些图片是你希望尽可能快速加载的，通常会包含Logo和首页大图。
这里我们就可以使用预加载（Preload）技术。预加载技术可以告知浏览器，需要在用户浏览到某张图片的时候，预先就将它准备好。预加载技术也可以用于其他内容，但关键图片是它发挥作用的好地方。下面就是一个在HTML的<head>部分预加载首页Banner的代码示例：
<link rel="preload" href="/img/logo.svg" as="image">你也可以在HTTP头部使用预加载：
Link: </img/logo.svg>; rel=preload; as=image在下图中，你可以看到在Chrome浏览器下，加载两个相同内容页的速度对比。上半部分的场景使用了预加载技术来加载顶部Banner，而另一个没有。
你可以看到，在这个案例中，使用预加载可以使得Banner图片提前0.5秒出现。而我们所做的工作仅仅是在HTML的头部加入了一行代码。
使用自动简化来优化SVG图像
优化SVG不同于优化其他类型的图像，因为和JPEG和PNG不同，SVG是以XML为基础的一组描述图形的代码。这意味着，你需要一种手段对这种基于文本的图像做针对性的优化。在此基础上，你可以使用第三方的优化工具比如SVGO来压缩SVG的体积。
而如果你不仅SVG是这种矢量图形的使用着，同时也是创作者呢？我们拿Adobe Illustrator举例，你可以使用简化路径工具来快速简化矢量图形，这种操作将会减少图形上的锚点和多余路径。
以Illustrator CC为例，这个面板在“对象-路径-简化”下可以找到。通过降低曲线精度并调整角度阈值，可以将多余的路径和锚点移除。在下图的例子中，使用降低曲线精度6%的方法，将原有的锚点减少了54个。如果使用得当，它甚至可以让你的作品更好看。
同时要注意，使用这个工具存在副作用。当你降低曲线精度太多，你会发现你精心制作的作品已经变成了一坨不可名状的东西。如果你希望受益于此，请谨慎地做出调整。
将动态GIF图像转化为视频
我们都喜欢精美的GIF图像，它们在内容传达方面很有用，但同时它们也可能非常大。包括gifsicle在内的图像优化软件可以将GIF极好地压缩，但注意它的原理是将GIF转化为视频，并作为HTML5的<video>标签插入。使用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
这个明亮可以将-i之后紧跟的GIF文件转化为最高码率为521Kbps的视频。在测试中，我们成功地将989Kb的GIF动图转化为155Kb的MP4视频，109Kb的OGV视频和85Kb的WebM视频。这几种格式的质量都可以和原来的GIF相媲美。而由于绝大多数浏览器支持<video>标签，你可以像下面的这种格式一样使用这些视频：
<video preload="none">
<source src="/videos/animated.webm" type="video/webm">
<source src="/videos/animated.ogv" type="video/ogg">
<source src="/videos/animated.mp4" type="video/mp4">
</video>如果你打算采用这种方法，你需要对<source>标签内的条目排序，将你认为的最优先的选择放在第一，后面依次排列。在上述的例子中，浏览器会先尝试解析WebM视频。实际使用中，你可以把最小的那个格式放在第一位，把最大的放在后面。
点击这里查看，如果你希望使用上述提到的FFmepg软件的话。
使用Lazy Load技术
Lazy load技术你很可能已经在使用了，但很多这类脚本使用CPU密集型滚动事件处理程序。这种方法的会降低交互效率，并且对低配置及其来说效率极低。尽管它某种程度上有助于浏览体验，但对于元素出现的流程管理还是相当糟糕。
你可以选择类似于Intersection Observer API的接口来更高效地完成Lazy load的元素管理。下面是启用案例：
现在，我们在src属性里加入了一个替代图片，而在data-src属性里放入了我们希望加载的图片。接下来，我们给<img>元素加上一段使用querySelectorAll的Lazy load的代码。下面是具体的示例代码：
document.addEventListener("DOMContentLoaded", function(){
if("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
elements = document.querySelectorAll("img.lazy");
var imageObserver = new IntersectionObserver(function(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>元素都会被加上lazy类，并通过querySelectorAll来实现Lazy load。
这段代码可以帮助网站了解用户看到了什么内容。当某个图像没有被看到的时候，isIntersecting属性为0，而该图像进入了浏览器视野，isIntersecting会增加。一旦isIntersecting大于0，<img>内的src属性将会被data-src熟悉替换，并移除lazy类，这样图像就被显示出来了。
这个过程比滚动抓取要容易的多，但问题是Intersection Observer的浏览器支持性不那么好，你可能要退而求其次。
你可以获取代码，如果你希望使用Intersection Observer的话。
文章原文出自《NET》第301期，作者Jeremy Wagner，翻译：卡米雷特
