图片格式以及 CSS-sprites

图片格式有哪些？怎么应用？如何选择？*

• BMP，无损、没有压缩。通常体积较大

• GIF，无损、采用了 LZW 压缩算法。仅支持 8bit 索引色，支持动图

• PNG-8，无损、使用索引色。体积更优秀，并且支持透明度调节

• PNG-24，无损、使用直接色，压缩（博物馆、NASA）

• SVG，无损、svg 放大不会失真，适合 logo、icon

• webP，有损+无损、直接色、支持透明度、压缩。chrome、opera 支持

• JPEG，有损、直接色存储，适合还原度要求较高的照片

CSS-sprites 精灵图、雪碧图怎么处理？ *

• 所有涉及到的图片，放到一张大图中去

  • background-image, background-repeat, background-position

像素密度与图片应用

像素密度有了解吗？ *

• 物理像素 1242px * 2688px

• 经典设备宽高 414px * 896px

  • 1242 / 414 = 3

  • 逻辑像素：物理像素 = 1：3

  • 像素密度 3

  • 3 倍屏

如何在图片的加载上应用动态密度？ *

• 设计师提供 @2x，@3x，@4x

• 200 * 300

  • 3 倍屏幕

  • 600 * 900

    image {
        background: ('1x.png');
    }
    // 利用媒体查询
    @media only screen and (min-deivce-pixel-ratio: 3) {
        image {
            background: ('3x.png');
        }
    }