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; 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支持的不断扩大，现在正是开始在您的项目中应用这一先进图片格式的最佳时机。
