【前端】【业务场景】【面试】在网页开发中，如何优化图片以提高页面加载速度？解决不同设备屏幕适配问题
📌 问题 1：在网页开发中，如何优化图片以提高页面加载速度？
🔍 一、关键词总结
| 关键词 | 说明 |
|---|---|
| 图片压缩 | 借助 TinyPNG、ImageOptim 等工具，无损减小图片文件大小 |
| 格式选择 | JPEG（照片类）、PNG（简单图形、透明图像）、WebP（现代浏览器优先） |
| 尺寸适配 | 确保图片实际尺寸与页面显示尺寸相符 |
| 响应式加载 | 利用 元素或 的 srcset、sizes 属性适配设备 |
✨ 二、精炼总结
优化图片提升页面加载速度，关键在于：
压缩图片减体积，格式选对更轻巧，尺寸适配避缩放，响应加载省流量，多管齐下改善加载性能。
✅ 三、标准答法（结构化表达）
-
图片压缩
使用 TinyPNG、ImageOptim 等工具，在不明显损失画质前提下，去除 PNG 图片不必要元数据、优化色彩表等，减小文件大小。 -
格式选择
- JPEG：适合照片类图像，通过有损压缩在保证视觉效果时大幅缩小体积。
- PNG：适用于简单图形及有透明度需求的图像，如 logo 等。
- WebP：在支持的浏览器中，相比 JPEG 和 PNG 有更好的压缩效果，可借助现代图像加载库（如 imgix）实现自适应加载。
-
尺寸适配
确保图片尺寸与页面显示尺寸一致，避免浏览器对图片进行不必要缩放。若图片在页面显示宽度为 300px，准备对应宽度图片，而非大尺寸后用 CSS 缩放。 -
响应式加载
- 利用 HTML 的 元素，为不同设备屏幕尺寸和分辨率加载合适图片。
- 或通过 标签的 srcset 和 sizes 属性，如手机加载小尺寸图片，桌面设备加载大尺寸图片，减少数据传输。
📌 问题 2：在移动端开发中，如何解决不同设备屏幕适配问题？
🔍 一、关键词总结
| 关键词 | 说明 |
|---|---|
| 百分比布局 | 元素宽高、边距等设为百分比，随父容器缩放 |
| Flexbox 布局 | 强大布局模型，灵活控制子元素排列与对齐 |
| 媒体查询 | 根据设备屏幕特性应用不同样式 |
| rem/em 单位 | 相对根元素（rem）或父元素（em）字体大小缩放 |
✨ 二、精炼总结
解决移动端屏幕适配问题，核心思路为：
布局用百分比保比例，Flexbox 布局增灵活，媒体查询定样式，适配单位促缩放，综合运用满足多样设备需求。
✅ 三、标准答法（结构化表达）
-
百分比布局
设置元素的宽度、高度、边距等属性为百分比值，使元素按父容器大小按比例缩放。如 div 容器设width: 50%;，其宽度始终为父容器一半。 -
Flexbox 布局
- 通过设置
display: flex;开启弹性盒模型。 - 利用
flex - direction控制子元素排列方向，justify - content、align - items等属性调整对齐方式，实现复杂布局并适配不同屏幕。
- 通过设置
-
媒体查询
利用 CSS 的媒体查询，依据设备屏幕宽度、高度、分辨率等特性应用不同样式。如：
@media (max - width: 600px) {body {font - size: 14px;}
}
表示屏幕宽度小于等于 600px 时，页面字体大小设为 14px。
- 适配单位
- 使用 rem（相对于根元素字体大小）或 em（相对于父元素字体大小）单位替代固定像素单位。
- 设定根元素字体大小，如
html {font - size: 16px;}，1rem 即等于 16px ，改变根元素字体大小，所有使用 rem 单位的元素会相应缩放。