当前位置：首页 > news >正文

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

news 2024/9/22 11:47:17

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结构：

<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系统适配

<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
双击运行脚本文件
按照提示选择操作并输入图片目录路径

#!/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; thencygpath -u "$input_path"elif command -v wslpath &> /dev/null; thenwslpath -u "$input_path"elseecho "$input_path" | sed -e 's/^\([A-Za-z]\):/\/\L\1/' -e 's/\\/\//g'fi
}# 设置目录
set_directories() {while [ -z "$img_dir" ]; doread -r -p "请输入图片目录路径: " input_dirimg_dir=$(convert_path "$input_dir")if [ -d "$img_dir" ]; thenoutput "图片目录已设置为: $img_dir"elseecho "错误：目录不存在或无法访问，请重新输入。"img_dir=""fidone
}# 打印统计信息
print_statistics() {local total_files=$1local total_original_size=$2local total_new_size=$3local error_count=$4local total_savings=$((total_original_size - total_new_size))local savings_percent=0if [ $total_original_size -ne 0 ]; thensavings_percent=$(awk "BEGIN {printf \"%.2f\", ($total_savings / $total_original_size) * 100}")fiecho "----------------------------------------"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=$1output "开始处理图片 - $mode"output "当前图片目录: $img_dir"if [ ! -d "$img_dir" ]; thenecho "错误：图片目录不存在"returnfilocal total_files=0local total_original_size=0local total_new_size=0local error_count=0while 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}"; thenlocal new_size=$(stat -c%s "${dir}/${avif_filename}")((total_new_size += new_size))if [ "$mode" = "转换并删除原图" ]; thenif rm "$file"; thenoutput "$filename: 已转换并删除原图"elseecho "$filename: 转换成功，但无法删除原图"((error_count++))fielseoutput "$filename: 已转换"fielseecho "$filename: 转换失败"((error_count++))fidone < <(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" ]; thenecho "错误：图片目录不存在"returnfilocal total_files=0local total_size=0local error_count=0while 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"; thenoutput "$filename: 已删除"elseecho "$filename: 删除失败"((error_count++))fidone < <(find "$img_dir" -type f -iname "*.avif" -print0)output "恢复完成 - 删除AVIF"print_statistics $total_files $total_size 0 $error_count
}# 主菜单
show_menu() {clearecho "========================================="echo "            AVIF 图片管理器              "echo "========================================="echo "1. 设置目录"echo "2. 转换为AVIF并删除原图"echo "3. 转换为AVIF并保留原图"echo "4. 恢复原图（删除AVIF）"echo "5. 退出"echo "========================================="echoread -p "请选择操作 (1-5): " choicecase $choice in1) set_directories ;;2) if [ -z "$img_dir" ]; thenset_directoriesficonvert_and_delete_original ;;3) if [ -z "$img_dir" ]; thenset_directoriesficonvert_and_keep_original ;;4) if [ -z "$img_dir" ]; thenset_directoriesfirestore_original ;;5) exit 0 ;;*) echo "无效选择，请重试。" ;;esacechoread -p "操作完成，按回车键返回主菜单..."
}# 主程序
while true; doshow_menu
done