By

CSS图像格式、雪碧图

png、jpg、Webp

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

JPG（JPEG）：

jpg 是一种有损压缩的方式，它会放弃图片的某些细节。所以要是对图片质量的要求不是很高，可以采用 jpg 的保存方式。jpg 是最普遍在万维网上被用来储存和传输照片的格式

优点：支持百万种色彩、压缩比高（180：1）

缺点：有损压缩、不支持图形渐进、不支持背景透明、不支持动画

适用：色彩丰富的照片适合jpg的保存方式

PNG：

采用的是无损压缩，其目的是为了取代 gif。

按存储方式不同，PNG可分为：PNG8、PNG24、PNG32

优点：无损压缩、支持间隔渐进显示（但会造成图片过大）、PNG24和PNG32支持颜色很多、能保留透明与半透明区域

缺点：不支持动画、PNG24和PNG32对IE6支持不好、很多网站不支持PNG上传

适用：小图标、平铺背景等色彩比较少的小型图片。

GIF：

Gif是使用了一种叫作LZW的算法进行压缩的，水平压缩（像素由上到下水平压缩），这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小。

优点：无损压缩、支持背景透明、支持动画、支持图形渐进

缺点：只有256种颜色，对于色彩丰富的图片压缩效果不好

适用：小图标、线条、图纸、色彩不丰富的图片

Webp格式：

Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

目前所知道的只有高版本的W3C浏览器才支持这种格式，比如chorme39+，safari7+等等。

优点：体积小

缺点：有损压缩、兼容性不好（android高版本、W3C高版本浏览器支持这种格式、ios不支持）

适用：展望未来

总结：

GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及：

体积比较：

webp<JGP<PNG

Gif,png,jpg,webp几种图片格式整理

gif、jpg、png、webp图片格式比较

CSS Sprites 雪碧图

CSS Sprites（雪碧图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS的 background-image，background-repeat，background-position 属性的组合进行背景定位。

优点：

  • 利用CSS Sprites 能很好地减少网页的 http 请求，从而大大提高了页面的性能，这是 CSS Sprites 最大的优点；
  • CSS Sprites 能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

  • 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
  • CSS Sprites 在开发的时候相对来说有点麻烦，需要借助 photoshop 或其他工具来对每个背景单元测量其准确的位置。
  • 维护方面：CSS Sprites 在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的 CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动 CSS。

@3x, @2x 图片

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV 元素宽度为 414px，这个 DIV 就会填满手机的宽度；

而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素 = 3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保证其不失真，1个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。

当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。

还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片:

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}