4个基本的网页图片优化指南

90362727 - design, sharing - 4个基本的网页图片优化指南

不论你创建的是一个商务网站,还是自己的作品集简历,都会用到图片。这篇文章中,将介绍一些基本的图片优化技巧,让你的网站图片更加高效。

精心选择并预加载关键图片

浏览你的网站,并找出最重要的哪些图片。这些图片是你希望尽可能快速加载的,通常会包含Logo和首页大图。

这里我们就可以使用预加载(Preload)技术。预加载技术可以告知浏览器,需要在用户浏览到某张图片的时候,预先就将它准备好。预加载技术也可以用于其他内容,但关键图片是它发挥作用的好地方。下面就是一个在HTML的<head>部分预加载首页Banner的代码示例:

1
<link rel="preload" href="/img/logo.svg" as="image">

你也可以在HTTP头部使用预加载:

1
Link: </img/logo.svg>; rel=preload; as=image

在下图中,你可以看到在Chrome浏览器下,加载两个相同内容页的速度对比。上半部分的场景使用了预加载技术来加载顶部Banner,而另一个没有。

53597723 - design, sharing - 4个基本的网页图片优化指南

你可以看到,在这个案例中,使用预加载可以使得Banner图片提前0.5秒出现。而我们所做的工作仅仅是在HTML的头部加入了一行代码。

使用自动简化来优化SVG图像

 7438201 - design, sharing - 4个基本的网页图片优化指南

优化SVG不同于优化其他类型的图像,因为和JPEG和PNG不同,SVG是以XML为基础的一组描述图形的代码。这意味着,你需要一种手段对这种基于文本的图像做针对性的优化。在此基础上,你可以使用第三方的优化工具比如SVGO来压缩SVG的体积。

而如果你不仅SVG是这种矢量图形的使用着,同时也是创作者呢?我们拿Adobe Illustrator举例,你可以使用简化路径工具来快速简化矢量图形,这种操作将会减少图形上的锚点和多余路径。

以Illustrator CC为例,这个面板在“对象-路径-简化”下可以找到。通过降低曲线精度并调整角度阈值,可以将多余的路径和锚点移除。在下图的例子中,使用降低曲线精度6%的方法,将原有的锚点减少了54个。如果使用得当,它甚至可以让你的作品更好看。

8727362 - design, sharing - 4个基本的网页图片优化指南

同时要注意,使用这个工具存在副作用。当你降低曲线精度太多,你会发现你精心制作的作品已经变成了一坨不可名状的东西。如果你希望受益于此,请谨慎地做出调整。

将动态GIF图像转化为视频

21481220 - design, sharing - 4个基本的网页图片优化指南

我们都喜欢精美的GIF图像,它们在内容传达方面很有用,但同时它们也可能非常大。包括gifsicle在内的图像优化软件可以将GIF极好地压缩,但注意它的原理是将GIF转化为视频,并作为HTML5的<video>标签插入。使用FFmpeg之类的命令行软件可以轻松地实现这个工作:

1
2
3
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>标签,你可以像下面的这种格式一样使用这些视频:

1
2
3
4
5
<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的元素管理。下面是启用案例:

1
<img class="lazy" data-src="/images/lazy-loaded-image.jpg" src="/images/placeholder.jpg" alt="I'm lazy." width="320" height="240">

现在,我们在src属性里加入了一个替代图片,而在data-src属性里放入了我们希望加载的图片。接下来,我们给<img>元素加上一段使用querySelectorAll的Lazy load的代码。下面是具体的示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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,翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注