你好，我是木亦。图片作为页面里不可或缺的元素，其优化策略会对页面加载速度、用户体验以及流量消耗产生直接影响。如何在保障图片质量的基础上，让图片于移动设备上快速加载并高效展示，是每一位移动 Web 开发者都必须深入思考的重要问题。今天，我们就一同深入探讨移动 Web 开发中图片优化的有效策略。
一、图片格式的选择
不同的图片格式在压缩比、色彩表现以及透明度支持等方面各有特点。在移动 Web 开发中，依据图片的特性和使用场景，挑选合适的图片格式是优化的首要步骤。
- JPEG 格式：这种格式特别适用于色彩丰富、细节较多的照片类图片。JPEG 格式采用有损压缩算法，在能够保持较好视觉效果的同时，把文件大小压缩至较小。不过，它不支持透明度，对于需要透明效果的图片不太适用。比如在展示风景照片、人物写真等图片时，JPEG 格式是不错的选择。开发者可以通过调整压缩质量参数，在确保图片质量能被接受的情况下，进一步减小文件大小。一般来说，将压缩质量设置在 60% - 80% 之间，既能保证图片的清晰度，又能有效控制文件体积。
- PNG 格式：PNG 格式分为 PNG - 8 和 PNG - 24。PNG - 8 适用于简单图形、图标这类元素，它支持索引色和透明度，文件大小相对较小。PNG - 24 则适用于对色彩要求较高且需要透明度的图片，像是复杂的图标、带有透明背景的图片元素等，但文件大小相对较大。在使用 PNG - 8 时，要留意其色彩表现有限，对于色彩丰富的图片可能会出现失真情况。举例来说，网站的导航图标、按钮图标等，可以使用 PNG - 8 格式；而对于一些需要透明效果且色彩较为丰富的产品展示图片，可能需要选择 PNG - 24 格式，不过要注意进行适当的压缩处理。
- WebP 格式：这是一种新兴的图片格式，具备出色的压缩比，在同等质量下，文件大小比 JPEG 和 PNG 更小。同时，它还支持有损和无损压缩，以及透明度。然而，WebP 格式目前的兼容性存在一定问题，部分老旧浏览器并不支持。为了兼顾不同浏览器的兼容性，可以采用渐进式加载方式，先检测浏览器是否支持 WebP，如果支持就加载 WebP 格式图片，否则加载其他格式图片。例如，通过以下 JavaScript 代码进行检测：
function isWebPSupported() {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
});
}
async function loadImage() {
const isSupported = await isWebPSupported();
const img = document.createElement('img');
img.src = isSupported? 'image.webp' : 'image.jpg';
document.body.appendChild(img);
}
loadImage();
二、图片压缩
无论选用何种图片格式，对图片进行压缩都是优化过程中必不可少的步骤。通过压缩，可以在不影响图片视觉效果的前提下，减小文件大小，加快加载速度。
- 使用图像编辑工具压缩：像 Adobe Photoshop、Sketch 等专业图像编辑工具都具备图片压缩功能。在 Photoshop 中，可通过 “存储为 Web 所用格式” 选项，调整压缩参数，例如质量、分辨率等，以达到理想的压缩效果。比如，对于一张用于移动 Web 页面展示的图片，将分辨率设置为 72dpi（适用于屏幕显示），并依据图片内容和质量要求，合理调整压缩质量，进而减小文件大小。
- 在线压缩工具：要是没有安装专业图像编辑工具，也能使用一些在线压缩工具，比如 TinyPNG、Compressor.io 等。这些工具操作简便，只需上传图片，就能自动进行压缩，并提供多种压缩选项。TinyPNG 采用智能压缩算法，在保持图片质量的同时，能大幅减小文件大小，而且支持批量压缩，非常适合开发者对大量图片进行预处理。
- 自动化构建工具压缩：在开发过程中，还能借助自动化构建工具，如 Webpack、Gulp 等，实现图片的自动化压缩。以 Webpack 为例，可以使用 image - webpack - loader 插件，在打包过程中对图片进行压缩。首先安装插件：
npm install image - webpack - loader --save - dev
然后在 Webpack 配置文件中添加如下配置：
module.exports = {
//...其他配置
module: {
rules: [
{
test: /.(png|jpg|jpeg|gif)$/i,
use: [
{
loader: 'image - webpack - loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}
]
}
]
}
};
如此一来，每次打包时，Webpack 会自动对符合条件的图片进行压缩，提高开发效率。
三、响应式图片
移动设备的屏幕尺寸和分辨率各不相同，为了确保图片在各种设备上都能清晰、高效地展示，需要运用响应式图片技术。
- srcset 属性：srcset属性允许我们提供多个不同分辨率的图片源，浏览器会根据设备的屏幕像素密度和视口大小，自动选择最合适的图片进行加载。例如：
<img src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
alt="示例图片">
在这个例子中，src属性指定了一个默认的图片源，srcset属性列出了不同分辨率的图片及其对应的宽度描述符（以 “w” 为单位）。浏览器会根据自身的屏幕宽度和像素密度，选择最合适的图片加载，避免加载过大或过小的图片，从而节省流量和加载时间。
- picture 元素：picture元素提供了更为灵活的图片选择方式，可以根据多种条件（如媒体查询、图片格式支持等）来选择图片。例如，根据屏幕宽度选择不同的图片：
<picture>
<source media="(max - width: 480px)" srcset="small.jpg">
<source media="(max - width: 800px)" srcset="medium.jpg">
<img src="large.jpg" alt="示例图片">
</picture>
这里，source元素根据媒体查询条件，为不同屏幕宽度的设备提供了相应的图片源。如果浏览器不支持picture元素，会直接加载img标签中的图片。此外，还能结合图片格式支持来选择图片，如：
<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/jpeg" srcset="image.jpg">
<img src="image.jpg" alt="示例图片">
</picture>
这样，支持 WebP 格式的浏览器会优先加载 WebP 格式的图片，不支持的则加载 JPEG 格式图片。
四、图片懒加载
在移动 Web 页面中，尤其是包含大量图片的页面，图片懒加载是一项极为重要的优化技术。它可以避免在页面加载时一次性加载所有图片，而是当图片即将进入视口时才进行加载，从而提高页面的初始加载速度，节省流量。
- 使用原生的 loading 属性：现代浏览器支持在img标签上使用loading="lazy"属性来实现图片懒加载。例如：
<img src="image.jpg" alt="示例图片" loading="lazy">
这样，浏览器会在图片即将进入视口时才开始加载，大大减轻了页面的初始加载负担。
- JavaScript 实现懒加载：对于不支持原生loading属性的浏览器，可以使用 JavaScript 来实现图片懒加载。常用的方法是监听scroll事件，判断图片是否即将进入视口，如果是则动态设置图片的src属性进行加载。例如，使用 IntersectionObserver API 实现懒加载：
const images = document.querySelectorAll('img[data - src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach((image) => {
observer.observe(image);
});
这段代码通过 IntersectionObserver 监听图片元素是否进入视口，当图片进入视口时，将data - src属性的值赋给src属性，从而实现图片的懒加载。
五、CDN 加速
CDN（内容分发网络）是一种分布式的网络架构，通过在全球各地部署节点服务器，将图片等静态资源缓存到离用户最近的节点，从而加快资源的加载速度。在移动 Web 开发中，使用 CDN 加速图片加载是一种非常有效的优化策略。
- 选择合适的 CDN 服务商：市面上存在众多 CDN 服务商，如七牛云、阿里云 CDN、腾讯云 CDN 等。在选择 CDN 服务商时，需要考虑其节点分布、服务稳定性、价格等因素。例如，七牛云在全球拥有广泛的节点分布，能够提供快速稳定的内容分发服务，并且提供了丰富的图片处理功能，如图片格式转换、裁剪、缩放等，可以在 CDN 端对图片进行进一步优化。
- 配置 CDN：将图片上传到 CDN 服务器后，需要在项目中配置 CDN 地址。在 HTML 中，可以通过修改图片的src属性指向 CDN 地址；在 Webpack 等构建工具中，可以通过配置文件指定 CDN 路径。例如，在 Webpack 中，可以使用 html - webpack - inline - source - plugin 插件将图片内联到 HTML 中，并结合 CDN 地址进行优化：
npm install html - webpack - inline - source - plugin --save - dev
在 Webpack 配置文件中添加：
const HtmlWebpackInlineSourcePlugin = require('html - webpack - inline - source - plugin');
module.exports = {
//...其他配置
plugins: [
new HtmlWebpackInlineSourcePlugin(),
//...其他插件
]
};
然后在 HTML 模板中使用inlineSource属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>图片优化示例</title>
</head>
<body>
<img srcset="<%= htmlWebpackPlugin.files.inlineSource['image.jpg'] %> 1x, <%= htmlWebpackPlugin.files.inlineSource['image@2x.jpg'] %> 2x"
alt="示例图片"
inlineSource="image.jpg">
</body>
</html>
这样，图片会被内联到 HTML 中，并通过 CDN 加速加载，提高页面的加载速度。
移动 Web 开发中的图片优化是一项综合性工作，需要从图片格式选择、压缩处理、响应式设置、懒加载以及 CDN 加速等多个方面入手。通过合理运用这些优化策略，可以有效提升图片的加载速度，减少流量消耗，为用户带来更加流畅、高效的移动 Web 体验。作为移动 Web 开发者，要持续关注和学习最新的图片优化技术，为打造优质的移动 Web 应用奠定坚实基础。
