为什么很多网站图片选用WebP格式？

在同等画质下，WebP格式比JPG/PNG文件体积更小，加载速度更快，能有效节省带宽。它同时支持有损与无损压缩、透明通道及动图，单一格式即可满足多种图片应用场景。

WebP的核心优势

极致压缩，赋能SEO与降本增效

• 有损压缩（替代JPG）：在相同视觉画质下，WebP体积比JPG小25%~35%。
• 无损压缩（替代PNG）：无损WebP体积比PNG小26%左右。

体积的缩小直接提升了网页加载速度，改善了LCP（最大内容绘制）指标，从而有效提升Google与百度搜索排名，并显著降低服务器流量成本。

全能特性，一站式解决图片需求

1. 支持透明通道：JPG不支持透明，PNG透明图体积大，而WebP透明图体积远小于PNG。
2. 支持动图：可完美替代GIF，WebP动图体积通常比GIF小50%以上。
3. 混合压缩模式：同时支持有损与无损压缩，可按需灵活选择。
4. 渐进式加载：提供更优的用户视觉加载体验。

WebP的兼容性与生态支持

主流浏览器兼容与优雅降级

目前，Chrome、Edge、Firefox及Safari（14+）等主流浏览器均已原生支持WebP。针对老旧浏览器的降级方案，可使用<picture>标签：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>

支持WebP的浏览器将加载WebP格式，老旧浏览器则自动回退（fallback）至JPG/PNG，确保图片正常显示。

云厂商与开发框架原生集成

阿里云OSS、七牛云、腾讯云、Cloudflare等CDN服务，以及WordPress、Vue/React等开发框架，均支持自动转换WebP。开发者只需上传原图，CDN即可根据浏览器请求自动返回对应格式，极大降低了开发与适配成本。

使用WebP的局限性

• 老旧设备兼容问题：部分老旧手机或浏览器不支持，必须配置降级图片。
• 本地预览受限：Windows旧版自带看图软件需额外安装解码器才能预览WebP文件。
• 编辑软件支持有限：部分设计软件对WebP的编辑支持较弱，该格式更适合网页展示，而非作为设计源文件。

PHP实现图片转WebP代码示例

以下提供完整的PHP代码，用于将JPG/PNG转换为WebP：

<?php
/**
 * 将 jpg/png 转换为webp
 * @param string $sourcePath 原图【物理绝对路径】
 * @param string $outputPath 输出webp【物理绝对路径】
 * @param int $quality 质量 0-100，网页推荐75-85
 * @return bool true成功｜false失败
 */
function imageConvertToWebp(string $sourcePath, string $outputPath, int $quality = 80): bool
{
    if (!file_exists($sourcePath)) {
        return false;
    }
    $imgInfo = getimagesize($sourcePath);
    if (!$imgInfo) {
        return false;
    }
    $mime = $imgInfo['mime'];
    $image = null;
    
    switch ($mime) {
        case 'image/jpeg':
        case 'image/jpg':
            $image = imagecreatefromjpeg($sourcePath);
            break;
        case 'image/png':
            $image = imagecreatefrompng($sourcePath);
            // PNG透明关键处理
            imagepalettetotruecolor($image);
            imagealphablending($image, false);
            imagesavealpha($image, true);
            break;
        default:
            // 不支持gif/webp以外源文件
            return false;
    }
    
    if ($image === null) {
        return false;
    }
    
    $result = imagewebp($image, $outputPath, $quality);
    imagedestroy($image); // 释放内存
    return $result;
}

// ---------------- 调用示例 ----------------
// 注意：必须是服务器磁盘物理路径，不是URL
$src  = __DIR__ . '/test.png';
$dest = __DIR__ . '/test.webp';

if (imageConvertToWebp($src, $dest, 80)) {
    echo "转换成功：{$dest}";
} else {
    echo "转换失败";
}

#WebP #图片优化 #图片转WebP