为什么 AVIF 将成为下一代图片格式之王

AVIF的卓越优势

AVIF（AV1 Image File Format）正在迅速崛起，成为下一代网络图片格式的有力竞争者。作为基于AV1视频编码技术的图像格式，AVIF在多个方面展现出了令人瞩目的性能。

1. 卓越的压缩效率

与JPEG和WebP相比，AVIF能在保持相同图像质量的前提下，将文件大小减小30%至50%。这意味着：

网站可呈现更高质量的图像
显著减少带宽使用
加快页面加载速度

2. 更广泛的色彩支持

支持10位和12位的色彩
兼容HDR（高动态范围）图像
呈现更丰富、更逼真的视觉效果

这对摄影、电商等对图像质量要求较高的领域尤为重要。

3. 多功能性

支持无损压缩
支持透明度
渐进式解码能力，允许图像在加载过程中逐步显示

4. 日益增长的浏览器支持

主流浏览器如Chrome、Firefox和Opera已开始支持AVIF，其他浏览器也在积极跟进。AVIF有望在不久的将来成为网络图片的主流格式。

如何在HTML中优化使用AVIF

为充分利用AVIF的优势，同时保证向下兼容性，建议使用以下HTML结构：

html 复制代码

<picture>
    <!-- 性能表现更好的avif和webp图片格式 -->
    <source srcset="img/photo.avif" type="image/avif">
    <source srcset="img/photo.webp" type="image/webp">
    
    <!-- 最终的兜底方案 -->
    <img src="img/photo.jpg" alt="图片描述">
</picture>

此结构确保在支持AVIF的浏览器中使用AVIF格式
在支持WebP但不支持AVIF的浏览器中使用WebP格式
在其他情况下回退到传统的JPEG格式
注意：您的图片服务器必须提供avif和webp格式的图片

苹果CMS系统适配

html 复制代码

<div class="movie-poster">
    <picture>
        <source srcset="{:rtrim(mac_url_img($obj.vod_pic), '.jpg,.png,.jpeg,.gif')}.avif" type="image/avif">
        <img src="{:mac_url_img($obj.vod_pic)}" alt="{$obj.vod_name}" referrerpolicy="no-referrer">
    </picture>
</div>

ImageMagick：AVIF转换利器

以下内容仅适用于Windows系统

安装ImageMagick

访问 ImageMagick官方下载页面
选择适合您系统的安装包
安装时注意：安装文件夹路径不能包含空格，建议新建专门文件夹

设置系统环境变量

确保将ImageMagick的安装路径添加到系统的PATH环境变量中。

AVIF批量转换脚本

为方便批量处理图片，我制作了一个方便快捷的Shell脚本。该脚本可以：

批量转换图片为AVIF格式
记录处理过程
输出错误信息和统计数据
在Windows系统下使用Shell脚本，推荐安装Git，并使用Git Bash运行脚本
下载Git：https://git-scm.com/downloads
List item

使用方法

创建新文件，将以下脚本内容保存为avif_manager.sh
双击运行脚本文件
按照提示选择操作并输入图片目录路径

bash 复制代码

#!/bin/bash

# 初始化变量
img_dir=""

# 颜色定义
GREEN='\033[0;32m'
NC='\033[0m' # No Color

# 输出到控制台（绿色）
output() {
    echo -e "${GREEN}$1${NC}"
}

# 转换Windows路径为Bash兼容路径
convert_path() {
    local input_path="$1"
    if command -v cygpath &> /dev/null; then
        cygpath -u "$input_path"
    elif command -v wslpath &> /dev/null; then
        wslpath -u "$input_path"
    else
        echo "$input_path" | sed -e 's/^\([A-Za-z]\):/\/\L\1/' -e 's/\\/\//g'
    fi
}

# 设置目录
set_directories() {
    while [ -z "$img_dir" ]; do
        read -r -p "请输入图片目录路径: " input_dir
        img_dir=$(convert_path "$input_dir")
        if [ -d "$img_dir" ]; then
            output "图片目录已设置为: $img_dir"
        else
            echo "错误：目录不存在或无法访问，请重新输入。"
            img_dir=""
        fi
    done
}

# 打印统计信息
print_statistics() {
    local total_files=$1
    local total_original_size=$2
    local total_new_size=$3
    local error_count=$4

    local total_savings=$((total_original_size - total_new_size))
    local savings_percent=0

    if [ $total_original_size -ne 0 ]; then
        savings_percent=$(awk "BEGIN {printf \"%.2f\", ($total_savings / $total_original_size) * 100}")
    fi

    echo "----------------------------------------"
    echo "统计信息:"
    echo "处理的文件数：$total_files"
    echo "错误数：$error_count"
    echo "原始总大小：$(numfmt --to=iec-i --suffix=B $total_original_size)"
    echo "压缩后总大小：$(numfmt --to=iec-i --suffix=B $total_new_size)"
    echo "节省空间：$(numfmt --to=iec-i --suffix=B $total_savings) ($savings_percent%)"
    echo "----------------------------------------"
}

# 处理图片的通用函数
process_images() {
    local mode=$1
    output "开始处理图片 - $mode"
    output "当前图片目录: $img_dir"
    
    if [ ! -d "$img_dir" ]; then
        echo "错误：图片目录不存在"
        return
    fi
    
    local total_files=0
    local total_original_size=0
    local total_new_size=0
    local error_count=0

    while IFS= read -r -d '' file; do
        ((total_files++))
        filename=$(basename "$file")
        dir=$(dirname "$file")
        avif_filename="${filename%.*}.avif"
        
        local original_size=$(stat -c%s "$file")
        ((total_original_size += original_size))

        if magick "$file" -quality 70 -define avif:compression-level=3 -define avif:effort=4 "${dir}/${avif_filename}"; then
            local new_size=$(stat -c%s "${dir}/${avif_filename}")
            ((total_new_size += new_size))
            
            if [ "$mode" = "转换并删除原图" ]; then
                if rm "$file"; then
                    output "$filename: 已转换并删除原图"
                else
                    echo "$filename: 转换成功，但无法删除原图"
                    ((error_count++))
                fi
            else
                output "$filename: 已转换"
            fi
        else
            echo "$filename: 转换失败"
            ((error_count++))
        fi
    done < <(find "$img_dir" -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -print0)

    output "处理完成 - $mode"
    print_statistics $total_files $total_original_size $total_new_size $error_count
}

# 转换并删除原图
convert_and_delete_original() {
    process_images "转换并删除原图"
}

# 转换并保留原图
convert_and_keep_original() {
    process_images "转换并保留原图"
}

# 恢复原图（删除AVIF）
restore_original() {
    output "开始恢复原图 - 删除AVIF"
    output "当前图片目录: $img_dir"
    
    if [ ! -d "$img_dir" ]; then
        echo "错误：图片目录不存在"
        return
    fi
    
    local total_files=0
    local total_size=0
    local error_count=0

    while IFS= read -r -d '' file; do
        ((total_files++))
        filename=$(basename "$file")
        
        local file_size=$(stat -c%s "$file")
        ((total_size += file_size))

        if rm "$file"; then
            output "$filename: 已删除"
        else
            echo "$filename: 删除失败"
            ((error_count++))
        fi
    done < <(find "$img_dir" -type f -iname "*.avif" -print0)

    output "恢复完成 - 删除AVIF"
    print_statistics $total_files $total_size 0 $error_count
}

# 主菜单
show_menu() {
    clear
    echo "========================================="
    echo "            AVIF 图片管理器              "
    echo "========================================="
    echo "1. 设置目录"
    echo "2. 转换为AVIF并删除原图"
    echo "3. 转换为AVIF并保留原图"
    echo "4. 恢复原图（删除AVIF）"
    echo "5. 退出"
    echo "========================================="
    echo
    read -p "请选择操作 (1-5): " choice
    
    case $choice in
        1) set_directories ;;
        2) 
            if [ -z "$img_dir" ]; then
                set_directories
            fi
            convert_and_delete_original 
            ;;
        3) 
            if [ -z "$img_dir" ]; then
                set_directories
            fi
            convert_and_keep_original 
            ;;
        4) 
            if [ -z "$img_dir" ]; then
                set_directories
            fi
            restore_original 
            ;;
        5) exit 0 ;;
        *) echo "无效选择，请重试。" ;;
    esac
    
    echo
    read -p "操作完成，按回车键返回主菜单..."
}

# 主程序
while true; do
    show_menu
done

通过这个脚本，您可以轻松地管理AVIF图片转换过程，包括设置目录、转换图片（可选是否保留原图）以及恢复原图等功能。脚本还会提供详细的统计信息，帮助您了解转换效果。

通过采用AVIF格式并使用这些工具和方法，您可以显著提升网站的图片加载性能，为用户提供更佳的浏览体验。随着AVIF支持的不断扩大，现在正是开始在您的项目中应用这一先进图片格式的最佳时机。