AVIF image format support

[henshaw]

AVIF is the next-gen image format that will follow WebP. It has the backing of large companies, including Netflix, because it's superior to WebP in reducing the file size of JPEGs while maintaining visual clarity.

It is likely that WebP and AVIF will both become the main image formats in the coming years, and will slowly replace the use of PNG and JPEG. WebP is already on the verge of becoming a common format now that Safari 14 will support it. Thank you for adding support for WebP and I'm looking forward to being able to use it regularly with the Export for Web... feature.

Even though AVIF has a while to go before it gains support by all major browsers (Firefox added support in Canary builds, and Safari hasn't committed to adding it yet), Chrome (and Edge since it uses Blink) supports AVIF now. Unlike the Pixelmator site, which is said to have a large number of visitors that use Safari, most sites' visitors are using Chrome. And since AVIF can be used now using the <picture> element and <srcset> attribute (or via other methods), the only impediment for web designers to use AVIF is the lack of support for it in Pixelmator Pro.

Thank you for considering. Pixelmator Pro is the only image editing app I use because it's the best!

References:
- https://aomediacodec.github.io/av1-avif/
- https://reachlightspeed.com/blog/using- ... web-today/
- https://netflixtechblog.com/avif-for-ne ... 1d75675fe4
- https://www.coywolf.news/webmaster/avif ... ge-format/
- https://www.ctrl.blog/entry/webp-avif-comparison.html
- https://www.chromestatus.com/feature/4905307790639104

[Andrius]

Hey Jon, thanks for a very well-referenced feature request — I've passed this on to the rest of the team!

[juschmitz]

Thumbs up! Avif support is much appreciated. I currently use https://avif.io/ to convert the files to avif, after I saved them with Pixelmator. It would be awesome to have an inbuilt function as well.

[Kupodivu]

Yes. That would be absolutely perfect. Chrome has supported it since version 85.

[ResLes]

I like that idea a lot. Would be amazing if Pix Pro can support that

[henshaw]

Export for Web for AVIF and WebP is going to be huge for the web design/development community. I’m really looking forward to when it gets added. It will be the finishing touch for me now that Pixelmator Pro 2 has been released.

[Andrius]

I believe this is now on the roadmap for the next major update.

[henshaw]

I believe this is now on the roadmap for the next major update.

Yes!!!

[ResLes]

Yes!!!

The beta is out - webp is now added to export for web.

Should be out soon

[ResLes]

Export for Web for AVIF and WebP is going to be huge for the web design/development community. I’m really looking forward to when it gets added. It will be the finishing touch for me now that Pixelmator Pro 2 has been released.

Hi,

How do you implement the picture tag?

In the several html file or on a page basis?

[ResLes]

Ah, I have used the custom html Gutenberg module on a specific posts, if I do it on ab post by post basis I have to link the webp and jepg file - it is a bit much work...
have you found a different method?

[henshaw]

Ah, I have used the custom html Gutenberg module on a specific posts, if I do it on ab post by post basis I have to link the webp and jepg file - it is a bit much work...
have you found a different method?

If you want to upload WebP or AVIF images to WordPress, you'll have to first add the MIME type. There are different methods for this, and some may not work depending on the hosting provider. The easiest way in WordPress to do this is to install the WP Add Mime Types plugin and the extension and type via that. That's what I'm doing now for WebP. With that being said, WordPress still doesn't treat WebP images the same when you add them via the Image block.

Adding AVIF images, since they don't have the same browser support as WebP images do now, requires adding the <picture> element as you mentioned previously. That does take more work since you'll have to type it out manually using the Custom HTML block.

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

That mainly just applied to posts and pages for WordPress. You would have to do that anyway if you were working on a template in a theme or creating a static site. I'm used to manually writing HTML to get my templates and pages fully optimized and using the assets and code I want.

What's nice about Pixelmator Pro now supporting WebP with Export for Web, and hopefully AVIF in the near future, is that it gives web designers/developers choices. It also makes Pixelmator Pro the best image editing option for new web standards while other competitors, including Photoshop, lag way behind. That excites your user base, which in turn gets them to tell all of their friends and colleagues about it, with me being an example of that

[ResLes]

Hi,

thanks for all that. You are superb.


I have tweaked your suggestions a bit. I have tried it with the plugin and it didnt work as I had to paste some code in my wp-config file - for security reasons.

I found this article on Kinsta: https://kinsta.com/knowledgebase/sorry- ... y-reasons/

Which let me do it. I have searched for happy in config as the article is a bit out of date and pasted the code above it. It works.

I could avoid to use the wp-mine plugin as I use the php snippets plugin https://en-gb.wordpress.org/plugins/code-snippets/

This plugin I have on my website already as I host my own font to not relay on google fonts (privacy and speed reasons) and for some other tweaks so i have incorporated it.

I can switch it on and off - if I need to upload something and I can only run it in the Admin area (for security reasons)

I pasted some php code in my php snippets plugin for webp and avif upload.

// Add WebP mime type to WordPress
function webp_upload_mimes( $existing_mimes ) {
// add webp to the list of mime types
// $existing_mimes['webp'] = 'image/webp';
$existing_mimes['avif'] = 'image/avif';

// return the array back to the function with our added mime type
return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

it works. So I could avoid using an additional plugin.

[ResLes]

Men, I am so excited if Pix Pro can support AVIF. That would be so awesome!

jpeg = 112 kb
webp = 71 kb
avif = 18 kb (!!!)

WOW, what a speed improvement

Thanks, henshaw for making me aware of it.

[henshaw]

Thanks, henshaw for making me aware of it.

Thanks for making me aware of that functions.php code. I just added it and removed the MIME plugin. Works perfectly!

[ResLes]

It’s great to exchange some ideas. Very prosperous.

I thought about putting the php code in the function php file.

I prefer to have a light weight code snippets plugin - in which I can put notes, run it in areas I like (fronted, backend, admin area) and switch it on and off when I like.

It’s lighter then a child theme and I can monitor the code I put in.

Have a great day