js 替换webp

在JavaScript中替换WebP图片，通常涉及到图像格式的检测与转换。以下是相关的基础概念、优势、应用场景以及解决方案：

基础概念

WebP：一种由Google开发的现代图像格式，提供有损和无损压缩，通常比JPEG和PNG格式更小，加载更快。
JavaScript：一种广泛使用的脚本语言，可以在浏览器端执行，用于操作DOM、处理事件等。

优势

性能优化：WebP格式可以显著减小图片文件大小，从而加快页面加载速度。
质量保持：在有损压缩模式下，WebP可以在保持较好视觉质量的同时减小文件大小。

应用场景

网站优化：为了提升用户体验，减少页面加载时间。
移动应用：在移动网络环境下，优化图片加载以节省流量和提高性能。

解决方案

如果你想在JavaScript中检测并替换WebP图片，可以尝试以下方法：

检测浏览器是否支持WebP：

function checkWebPSupport() {
    return new Promise(resolve => {
        const webP = new Image();
        webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        webP.onload = webP.onerror = () => {
            resolve(webP.height === 2);
        };
    });
}

替换图片：

假设你有一组图片需要根据浏览器支持情况替换为WebP或回退格式（如JPEG或PNG），你可以这样做：

async function replaceImagesWithWebP() {
    const supportsWebP = await checkWebPSupport();
    const images = document.querySelectorAll('img');
    
    images.forEach(img => {
        if (!supportsWebP) {
            // 如果浏览器不支持WebP，则替换为回退格式的图片
            const fallbackSrc = img.src.replace(/\.webp$/, '.jpg'); // 假设回退格式为JPEG
            img.src = fallbackSrc;
        }
        // 如果支持WebP，且图片不是WebP格式，则可以替换为WebP格式
        else if (!img.src.endsWith('.webp')) {
            const webpSrc = img.src.replace(/\.jpg|\.png$/, '.webp'); // 假设原始格式为JPEG或PNG
            img.src = webpSrc;
        }
    });
}

// 在页面加载完成后执行替换操作
window.addEventListener('load', replaceImagesWithWebP);