Statistics say that AVIF format can save more than a half of the page weight without losing images quality.\nConvert PNG, JPG, GIF and WEBP images to AVIF and speed up your web, save visitors download data, make your Google ranking better.\nInstall also Images to WebP plugin if you want to have fallback to WebP and then to the original file.<\/p>\n\n
Maybe you want to disable AVIF for thumbnails<\/p>\n\n
add_filter( 'images_to_avif_sizes', 'disable_images_to_avif_sizes', 10, 2 );\nfunction disable_images_to_avif_sizes( $sizes, $attachmentId ){\n unset( $sizes['thumbnail'] );\n return $sizes;\n}\n<\/code><\/pre>\n\nimages_to_avif_htaccess<\/h4>\n\n
Maybe you want to modify htaccess rules somehow<\/p>\n\n
add_filter( 'images_to_avif_htaccess', 'modify_images_to_avif_htaccess', 10, 2 );\nfunction modify_images_to_avif_htaccess( $rewrite_rules ){\n \/\/ do some magic here\n return $rewrite_rules;\n}\n<\/code><\/pre>\n\nimages_to_avif_abspath<\/h4>\n\n
Maybe you use roots.io\/bedrock or other custom folder structure<\/p>\n\n
add_filter( 'images_to_avif_abspath', 'modify_images_to_avif_abspath', 10, 2 );\nfunction modify_images_to_avif_abspath( $abspath ){\n return trailingslashit( WP_CONTENT_DIR );\n}\n<\/code><\/pre>\n\n$images_to_avif->convert_image()<\/h4>\n\n
Maybe you want to automatically generate AVIF for other plugins<\/p>\n\n
add_action( 'XXPLUGIN_image_created', 'XX_images_to_avif', 10, 2 );\nfunction XX_images_to_avif( $image_path ){\n global $images_to_avif;\n $images_to_avif->convert_image( $image_path );\n}\n<\/code><\/pre>\n\n\n\n- Upload
images-to-avif<\/code> directory to the \/wp-content\/plugins\/<\/code> directory<\/li>\n- Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<\/ol>\n\n\n
\nPlugin requirements<\/h3><\/dt>\nIt should work almost everywhere ;)\nPHP 5.6 or higher\nGD or Imagick extension with AVIF support\nEnabled server modules: mod_mime<\/code>, mod_rewrite<\/code><\/p><\/dd>\nAVIF images stored location<\/h3><\/dt>\nAVIF images are generated in same directory as original image. Example:\noriginal img: \/wp-content\/uploads\/2019\/11\/car.png<\/code>\navif version: \/wp-content\/uploads\/2019\/11\/car.png.avif<\/code><\/p><\/dd>\nHow to get original image from the browser?<\/h3><\/dt>\nJust add ?no_avif=1<\/code> to the URL and original JPG\/PNG will be loaded<\/p><\/dd>\nHow to check if plugin works?<\/h3><\/dt>\nWhen you have installed plugin and converted all images, follow these steps:<\/p>\n\n
\n- Run
Google Chrome<\/code> and enable Dev Tools<\/code> (F12).<\/li>\n- Go to the
Network<\/code> tab click on Disable cache<\/code> and select filtering for Img<\/code> (Images)<\/em>.<\/li>\n- Refresh your website page.<\/li>\n
- Check list of loaded images. Note
Type<\/code> column.<\/li>\n- If value of
avif<\/code> is there, then everything works fine.<\/li>\n<\/ol><\/dd>\nNGiNX and Apache together<\/h3><\/dt>\nIf you have some proxy setup or some other combination of NGiNX and Apache on your server, then probably .htaccess changes won't work and you will need to ask your hosting provider to disable NGiNX direct processing of image static files.<\/p><\/dd>\n
Apache .htaccess<\/h3><\/dt>\nPlugin should automatically update your .htaccess with needed rules.\nIn case it's not possible to write them automatically, screen with instructions will appear.\nAnyway, here is how it should look like:<\/p>\n\n
<IfModule mod_mime.c>\n AddType image\/avif .avif\n<\/IfModule>\n\n<IfModule mod_rewrite.c>\n RewriteEngine On\n RewriteCond %{HTTP_ACCEPT} image\/avif\n RewriteCond %{REQUEST_FILENAME} \"\/\"\n RewriteCond %{REQUEST_FILENAME} \"\\.(jpg|jpeg|png|gif|webp)$\"\n RewriteCond %{REQUEST_FILENAME}\\.avif -f\n RewriteCond %{QUERY_STRING} !no_avif\n RewriteRule ^(.+)$ $1\\.avif [NC,T=image\/avif,E=avif,L]\n<\/IfModule>\n<\/code><\/pre><\/dd>\nNGiNX config<\/h3><\/dt>\nAfter you activate plugin, screen with instructions will appear.\nAnyway, here is how it should look like:<\/p>\n\n
You need to add this map directive to your http config, usually nginx.conf ( inside of the http{} section ):<\/p>\n\n
map $arg_no_avif $no_avif{\n default \"\";\n \"1\" \"no_avif\";\n}\n\nmap $http_accept $avif_suffix{\n default \"\";\n \"~*avif\" \".avif\";\n}\n<\/code><\/pre>\n\nor without map<\/code> directive:<\/p>\n\nif ( $http_accept ~ \"image\/avif\" ) {\n set $avif .avif ;\n}\n\nlocation ~* (.*)\\.(?:png|jpe?g|gif|webp)$ {\n if ( -f $document_root$1.avif ) {\n set $avif serve$avif ;\n }\n if ( $avif = \"serve.avif\" ) {\n return 301 '$1.avif';\n }\n}\n<\/code><\/pre>\n\nthen you need to add this to your server block, usually site.conf or \/nginx\/sites-enabled\/default ( inside of the server{} section ):<\/p>\n\n
location ~* ^\/.+\\.(png|gif|webp|jpe?g)$ {\n add_header Vary Accept;\n try_files $uri$avif_suffix$no_avif $uri =404;\n}\n<\/code><\/pre><\/dd>\nISP Manager<\/h3><\/dt>\nAre you using ISP Manager? Then it's probably not working for you, but no worries, you just need to go to WWW domains<\/code> and delete jpg|jpeg|png<\/code> from the Static content extensions<\/code> field.<\/p><\/dd>\nDelete all generated AVIF images<\/h3><\/dt>\nThere is no button to do that and it will also not delete generated AVIFs automatically when you deactivate the plugin, but if you really need this, you can run some shell command to achieve this:<\/p>\n\n
find . -type f -name \"*.avif\" -exec bash -c 'if [ -f \"${1%.avif}\" ]; then echo \"Deleting $1\"; rm \"$1\"; fi' _ {} \\;\n<\/code><\/pre>\n\nThis will find all the files with a .avif<\/code> extension and if there is similar file with the exact filename, but without the .avif<\/code> extension, then it will delete it.<\/p><\/dd>\n\n<\/dl>\n\n\n2.0<\/h4>\n\n\n- now images are optimized in the background instead of during upload which was slowing down the workflow<\/li>\n
- fix a few small things based on the current Plugin Check results<\/li>\n<\/ul>\n\n
1.1<\/h4>\n\n\n- optimize old images convert process<\/li>\n
- remove not working images_to_avif_extensions filter<\/li>\n<\/ul>\n\n
1.0<\/h4>\n\n\n- First version<\/li>\n<\/ul>","raw_excerpt":"Convert PNG, JPG, GIF and WEBP images to AVIF and speed up your web loading","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/272508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=272508"}],"author":[{"embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kubiq"}],"wp:attachment":[{"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=272508"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=272508"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=272508"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=272508"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=272508"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/cn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=272508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}