如何通过优化图片提升网站性能效果？

本文共计2820个文字，预计阅读时间需要12分钟。

目录+概述+什么是图像压缩+JPEG/JPG+JPG的优点+使用场景+JPG的缺陷+使用MozJPEG+压缩+jpeg+PNG+(PNG-8 与 PNG-24)+PNG的优缺点+应用场景+使用pngquant优化PNG+图像WebP+WebP的优点+将WebP图像

目录

• 概述
• 什么是图像压缩
• JPEG/JPG
• JPG 的优点
• JPG 使用场景
• JPG 的缺陷
• 使用 MozJPEG 压缩 jpeg
• PNG (PNG-8 与 PNG-24)
• PNG 的优缺点
• PNG 应用场景
• 使用 pngquant 优化 PNG 图像
• WebP
• WebP 的优点
• 将 WebP 图像提供给支持它们的浏览器
• 提供html格式的WebP图像

概述

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。

因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。