面试题：CSS背景图片性能优化与响应式处理

Question

在前端开发中，大尺寸背景图片可能影响页面性能。请阐述如何对背景图片进行性能优化，并且让其在不同屏幕尺寸下（如手机、平板、桌面）都能良好显示。例如，对于一张高分辨率的背景图片，在移动设备上如何避免加载不必要的资源？给出具体的CSS实现思路及代码示例。

Answer 1

1. 使用媒体查询（Media Queries）

通过媒体查询可以根据不同设备的屏幕尺寸加载不同分辨率的图片。

CSS实现思路

• 针对不同设备屏幕宽度范围，使用@media规则来设置不同的背景图片。
• 为移动设备选择较低分辨率的图片，为桌面设备选择较高分辨率的图片。

代码示例

/* 默认样式，适用于小屏幕设备 */
body {
    background-image: url('small-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* 适用于中等屏幕（如平板） */
@media (min-width: 768px) {
    body {
        background-image: url('medium-background.jpg');
    }
}

/* 适用于大屏幕（如桌面） */
@media (min-width: 1200px) {
    body {
        background-image: url('large-background.jpg');
    }
}

2. 使用srcset和image-set（如果支持）

srcset和image-set允许浏览器根据设备的像素密度（dppx）选择合适的图片。

CSS实现思路

• 使用image-set或srcset属性，在其中列出不同分辨率的图片及其对应的像素密度条件。

代码示例

body {
    background-image: -webkit-image-set(
        url('low-res-background.jpg') 1x,
        url('high-res-background.jpg') 2x
    );
    background-image: image-set(
        url('low-res-background.jpg') 1x,
        url('high-res-background.jpg') 2x
    );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

3. 图片压缩

• 在准备不同分辨率图片时，要对图片进行适当压缩，减少文件大小，以加快加载速度。可以使用工具如ImageOptim、TinyPNG等对图片进行压缩。

4. 采用WebP格式

• WebP是一种现代图像格式，通常比JPEG和PNG具有更好的压缩比。可以通过检测浏览器对WebP的支持情况，优先使用WebP格式的图片。

CSS实现思路

• 使用@supports规则检测浏览器是否支持WebP格式，若支持则使用WebP格式图片，否则使用传统格式图片。

代码示例

@supports (background-image: url('image.webp')) {
    body {
        background-image: url('image.webp');
    }
}

@supports not (background-image: url('image.webp')) {
    body {
        background-image: url('image.jpg');
    }
}