README

• 这是一个用于将图像转换为webp格式并保存产品的magento2模块。
• 使用cwebp可执行文件每天转换为webp格式比这种方式更好，最好创建一个bash脚本来安排任务。

# Cleanning .webp
$ /usr/local/bin/webpgen clean

# Generating .webp in specified directories
$ /usr/local/bin/webpgen

#!/usr/bin/env bash
# AWS CloudFront CDN Conditional WebP Caching, https://www.friism.com/webp-content-negotiation-cloudfront/
# WebP,AVIF + NGINX = https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx
# First of all, Install required executable below:
# sudo apt -y install cwebp jpegoptim gif2webp pngquant

BASEDIR=/var/www/magento
###################################################################
# Convert all images to WebP format (if not exists .webp in same directory)
declare -A TARGET_DIRS
TARGET_DIRS[0]=$BASEDIR/pub/media/catalog/category
TARGET_DIRS[1]=$BASEDIR/pub/media/catalog/product
TARGET_DIRS[2]=$BASEDIR/pub/media/logo
TARGET_DIRS[3]=$BASEDIR/pub/media/magefan_blog
TARGET_DIRS[4]=$BASEDIR/pub/media/wysiwyg
TARGET_DIRS[5]=$BASEDIR/pub/media/resized
TARGET_DIRS[6]=$BASEDIR/pub/media/blog/cache

# Cleanning all generated .webp images
if [ "$1" = "clean" ]; then
	for TARGET_DIR in ${TARGET_DIRS[@]}; do
		echo "Deleting *.webp | ${TARGET_DIR} ..."
		find $TARGET_DIR -type f -iname '*.webp' | while read filepath
		do
			CURR_DIR=$(dirname $filepath)
			SRC_FILE=$(basename $filepath .webp)
			[ -f "$CURR_DIR/$SRC_FILE" ] && echo $filepath && rm $filepath
		done
	done
else
	for TARGET_DIR in ${TARGET_DIRS[@]}; do
		echo "Converting JPG,PNG,GIF to .webp | ${TARGET_DIR} ..."

		# JPG to WebP > Optimize JPG
		find $TARGET_DIR -type f -regex ".*\.\(jpe?g\)$" | while read filepath
		do 
			[ ! -f "$filepath.webp" ] && cwebp -q 65 -af $filepath -o $filepath.webp -quiet \
				&& jpegoptim --max=80 --all-progressive --strip-all --quiet $filepath
		done

		# PNG to WebP > Optimize PNG
		find $TARGET_DIR -type f -regex ".*\.\(png\)$" | while read filepath
		do 
			[ ! -f "$filepath.webp" ] && cwebp -q 65 -af $filepath -o $filepath.webp -quiet \
				&& pngquant --skip-if-larger --strip --ext .png --force -- $filepath
		done
		
		# GIF to WebP
		find $TARGET_DIR -type f -regex ".*\.\(gif\)$" | while read filepath
		do 
			[ ! -f "$filepath.webp" ] && gif2webp -q 65 $filepath -o $filepath.webp -quiet
		done
	done
fi

echo "------- THE END ------------------------------------------------"

要求

• PHP >= 8.2.8
• Cwebp >= 0.5.2
• libvips >= 8.4.5
• Magento >= 2.4.6

安装

1. Webp支持

   sudo apt-get install libwebp-dev
   sudo apt-get install webp

   还必须启用GD支持。

   确保您有这个扩展。

   sudo apt-get install phpX-gd

   其中x是PHP版本（例如8.2）。

   然后配置PHP以启用对webp格式的支持。

   --with-webp-dir=DIR

2. Vips扩展

   echo "Installing vips library"
   sudo apt-get install libvips-dev
   
   echo "Installing vips pecl extension"
   $PHP_VER=8.2
   printf "\n" | sudo pecl install vips
   
   [ -d /etc/php/$PHP_VER/mods-available ] && echo 'extension=vips.so' | sudo tee /etc/php/$PHP_VER/mods-available/vips.ini
   [ -d /etc/php/$PHP_VER/mods-available ] && sudo ln -sf /etc/php/$PHP_VER/mods-available/vips.ini /etc/php/$PHP_VER/fpm/conf.d/20-vips.ini
   [ -d /etc/php/$PHP_VER/mods-available ] && sudo ln -sf /etc/php/$PHP_VER/mods-available/vips.ini /etc/php/$PHP_VER/cli/conf.d/20-vips.ini
   # OR Add `extension=vips.so` to **php.ini** file.

3. 模块

   composer require hgati/magento2-webp-convert
   
   php bin/magento module:enable Hgati_Webp
   
   php bin/magento setup:upgrade
   
   php bin/magento setup:di:compile
   
   php bin/magento setup:static-content:deploy -f

用法

商店 > 配置 > 目录 > Webp

• 常规 > 启用 - 模块激活
• 设置 > 算法 - 从三种方法类型中选择一个
• 设置 > 质量 - 转换图像的质量
• 转换 > 在产品保存时转换图像 - 如果选中，则在产品页面上上传图像并保存产品后，图像将自动转换

目录 > 产品

在图片和视频选项卡中上传图片。

通过点击保存按钮更新更改。

所有分配给产品的图片都应转换为与同一目录中的相同文件扩展名.ngx.webp。

• 与Nginx结合使用时效果更佳。
  • https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx
• 建议配置AWS CloudFront CDN以缓存webp文件。
  • https://www.friism.com/webp-content-negotiation-cloudfront/