«
 

【网页】选择对的图片格式，优化网站性能

作为一个网站，用户体验的第一关就是其打开的速度，如果加载时间过长，这都是很让人头疼的一件事，若不是什么考试报名网站这种的必须打开的网站，用户是没有心情等待你的。因此作出良好用户体验的第一步，就是要为你的网站提供合适的图片素材。

下面是最近关于图片学习的笔记~

选对图片格式

Jpeg(Joint Photographic Experts Group)

JPEG 是一种广泛适用的压缩图像标准方式，属于栅格图片（Raster Graphic)。.jpg 和 .jpeg 是 JPEG 文件压缩封存后常见的图片格式，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。

JPEG 可通过不同的压缩比，去除图像的部分信息和色彩数据，来降低原有文件的大小，同样设计师也可以根据具体情况在图像质量和文件大小之间找到平衡，适合照片以及层次丰富，色彩较多的图片。

在Retina屏幕上的使用：确定屏幕的最大分辨率，将原本的图片大小翻倍，再压缩到20%左右。

可将Jpeg的图片链接到SVG图片，用SVG做遮罩。

Photoshop上的输出设置： Compress 65%，（retina：20%） Progressive，Uncheck embed color profile, Internet Standard RGB Metadata: None.

PNG (Portable Network Graphic Format)

PNG，是一种无损压缩的位图文件(bitmap file)存储格式,支持索引、RGB、灰度和Alpha通道等特性，具有较高的压缩空间，保真效果好，支持透明，且定义了256个透明层次。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。 适用于色彩简单，对比强烈的图片，像图标 icon 等，PNG 也可以被用来无失真的储存照片，但文件较太大并不适合网络呈现（像珍贵图像等其他所需另当别论）。

PNG-24 有着上百万种的颜色以及256个透明层次。 PNG-8 只有256个颜-尽量不要用Photoshop输出，因为Photoshop的设置不准确，可用ImageAlpha输出。

不适用于Retina,可以用SVG代替。

Photoshop上的输出设置： Interlaced, Uncheck embed color profile, Internet Standard RGB Metadata: None.

SVG

矢量图形格式，能够清晰的显示在任何分辨率设备，无需适配。SVG，是一种基于XML（可扩张性标记）的语言，因此可用代码编辑，采用文本传输且可被搜索，支持多种编辑（色彩变化，动画效果等）具有较强的交互和动态性 。

适用于Retina屏幕，并且可以放大缩小。

Photoshop上的输出设置： SVG 1.1, Convert to outline, Link, Style elements, Decimal places: 1, Uncheck responsive.

SVG编辑

通常在图片编辑工具中输出SVG图片后，若在文本编辑器里面打开，SVG的代码都是挤在一起的，阅读起来很不舒服，因此，为了呈现更好的代码格式，我们可以使用SVGOMG对代码进行优化：

举个例子~

比如下面这个我们从NoneProject上下载下来的矢量小人，他有作者署名，我们想要去掉，（突然觉得自己在教坏大家，请保护作者版权，或者闲着自己画吧，这个小人画起来很快的）这时候我用Sublime打开这个小人的SVG，准备编辑，但看到的代码是一直行的，阅读起来相当困难。

屏幕快照 2016-10-29 下午9.12.04

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><rect x="34.531" y="89.375" width="12.656" height="5.625"/><rect x="52.812" y="89.375" width="12.656" height="5.625"/><rect x="52.812" y="73.906" width="12.656" height="12.656"/><rect x="34.531" y="73.906" width="12.656" height="12.656"/><rect x="52.812" y="61.25" width="12.656" height="9.844"/><rect x="34.531" y="61.25" width="12.656" height="9.844"/><rect x="34.531" y="28.906" width="30.938" height="29.531"/><rect x="23.281" y="28.906" width="8.438" height="15.469"/><rect x="23.281" y="47.188" width="8.438" height="15.469"/><rect x="68.281" y="28.906" width="8.438" height="15.469"/><rect x="68.281" y="47.188" width="8.438" height="15.469"/><path d="M61.25,5h-22.5v21.094h22.5V5z M48.594,19.062h-7.031V9.219h7.031V19.062z M58.438,19.062h-7.031V9.219h7.031V19.062z"/><rect x="42.969" y="12.031" width="4.219" height="4.219"/><rect x="52.812" y="12.031" width="4.22" height="4.219"/></g><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Anton Gajdosik</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

那我们怎么把上面的这段代码变得美丽点呢，请打开SVGOMG对代码进行优化：

屏幕快照 2016-10-29 下午9.17.38

设置完后后我们就可以下载获得这个可队形较为强的代码然后再Sublime里进行编辑了， 可以去掉最后的两行text~.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
  <path d="M34.53 89.375h12.657V95H34.53zm18.282 0h12.656V95H52.812zm0-15.47h12.656v12.657H52.812zm-18.282 0h12.657v12.657H34.53zM52.812 61.25h12.656v9.844H52.812zm-18.282 0h12.657v9.844H34.53zm0-32.344h30.94v29.53H34.53zm-11.25 0h8.44v15.47h-8.44zm0 18.282h8.44v15.47h-8.44zm45-18.282h8.44v15.47h-8.44zm0 18.282h8.44v15.47h-8.44zM61.25 5h-22.5v21.094h22.5V5zM48.594 19.062h-7.03V9.22h7.03v9.842zm9.844 0h-7.03V9.22h7.03v9.842z"/>
  <path d="M42.97 12.03h4.218v4.22h-4.22zm9.842 0h4.22v4.22h-4.22z"/>
  <text y="115" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">
    Created by Anton Gajdosik
  </text>
  <text y="120" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">
    from the Noun Project
  </text>
</svg>

当然这还没完，因为我们在修改好我们想要的SVG后，最终要交给代码哥哥的应该是一个压缩过得SVG格式，也就是说，得回到之前的一行。。。我们可以使用SVGO-GUI对齐进行压缩。 最终的成品才是适合网页的~。

GIF

只有256色，常用于动画，具有高压缩比的特性，占用空间小，保存的图像只支持256色，会损失大量细节，但利于下载，组成的动画适合网络传播。

在正式的网站上尽量少用，只有在动画的时候推荐使用，但是视频依然是首选。

当然我们也可以试着用CSS Animation来代替一些简单的GIF动图效果。

Favicons

于浏览器的标签上。

.ico — 适用于浏览器标签上 .png — 适用于书签

可使用Icon Slate或X Icon Editor将PNG图像转换为.ico格式的图像。

ICO 大小：16×16, 32×32 & 48×48. PNG大小：152×152 - for Microsoft, 144×144 (透明) - for Microsoft.

CSS Sprite

接下我们来讲一个CSS Sprite的黑科技~其实说白了，就是一图多用。

CSS Sprites是就是把网页中的一些图片整合到一张图片中，然后再利用CSS中的background-position定位属性来安排显示的图片。

好处在于，Sprites能很好的减少网页的Http请求，同时合并后的图片应用统一色表储存，因此单独的一张的雪碧图在大小上可能比之前的多张小图片总的尺寸还要小，降低服务器储存和请求压力，同时提高了页面的加载速度。

举个例子，我们可以通过设置不同的图片位置，将一张图多次使用。

<div class="icon icon-circle"></div>
<div class="icon icon-hex"></div>
<div class="icon icon-star"></div>
.icon {
  width: 100px;
  height: 100px;
  background-image: url("icons.png");
  background-repeat: no-repeat;
}

.icon-circle {
  background-position: 0 0;
}

.icon-hex {
  background-position: 0 -100px;
}

.icon-star {
  background-position: 0 -200px;
}

看到这里，聪明的的你一定会发现Sprites非常适合鼠标悬停时，图标的变化：

屏幕快照 2016-10-29 下午9.51.43

.star {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: transparent url("../images/star.svg") no-repeat 0 0;
}

.star:hover {
  /* 鼠标悬停的时候，改变backgorund-position的位置 */
  background-position: 0 -50px;
}

图片再压缩处理（Image Smushing)

要让用户开始真正的体验之前，第一步就是打开网页的速度。因此我们还可以对以上格式的图片采取一些措施，来优化你的速度。

关于图片再压缩

许多图片包含了很多额外的信息，这些信息即便被剔除掉也不会影响图片的质量。图片再压缩(smushing)会减少图片的大小，而不会降低其质量。

所有的图像都应该在 “Save for Web”，进行再压缩。

优化工具：

PNGs & JPGs — ImageOptim SVGs — SVGO-GUI

Jpeg优化

PNG优化

小结

总而言之，选择正确的图片属性，最大程度上的优化网站性能。

最后借来两脑图总结一下~

学习资料：

Image for web

Using image

Images Cheat Sheet

Image for retina screens

产品设计师成长之道：性能优化

Share Comment on Twitter