Skip to content

Commit

Permalink
Edit AVIF post
Browse files Browse the repository at this point in the history
  • Loading branch information
willeastcott committed Apr 27, 2024
1 parent 235e5c4 commit 1339ecf
Showing 1 changed file with 6 additions and 7 deletions.
13 changes: 6 additions & 7 deletions blog/2023-10-11-avif-webp-lands-in-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ tags:

![AVIF + WebP Support](/img/avif-webp-icons.png)

#### Today we're excited to announce that PlayCanvas now supports WebP and AVIF images natively in the editor. Two new, efficient image formats built for the web
**Today we're excited to announce that PlayCanvas now supports WebP and AVIF images natively in the editor. Two new, efficient image formats built for the web.**

This is not just an exciting update for us but a game-changer for anyone looking to optimize their projects for faster load times and better quality.

JPGs and PNGs have served us well. They're reliable and you can use them everywhere. AVIF and WebP are the new kids on the block. They offer better compression with a wider range of features like alpha channels, HDR and wide color gamut. But how do these formats work in practice and are they really that good? Let's dive in.

_Take a look at the following images_
<br/>
_Take a look at the following images:_

<iframe
src="https://codesandbox.io/embed/react-compare-image-forked-myp5cp?fontsize=14&hidenavigation=1&theme=dark"
style={{
Expand All @@ -32,21 +32,20 @@ _Take a look at the following images_
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
<br/>
They look strikingly similar, but the file size tells a different story. The AVIF image on the left has a file size of just 276Kb, almost half the size of its JPG counterpart at 508Kb! This level of compression is not just impressive on its own. When you're working on a project with multiple textures, switching to AVIF and WebP formats could considerably reduce your overall load time.

What does this mean for you? Well, that's simple: it's all about efficiency and speed without sacrificing quality. Textures are one of the biggest assets in a 3D project and AVIF and WebP significantly reduce image sizes compared to traditional JPEGs and PNGs and that means faster load times and happier users. 🙌

#### AVIF all the things?

Ok so browser support for AVIF is good, but not great according to [caniuse](https://caniuse.com/?search=avif), so always [check support](https://dev.to/nucliweb/detect-avif-image-support-to-use-in-your-css-4pen) and use the right format for your users. Different formats are better suited for different content, it's not a one-size-fits-all solution, so we encourage you to explore various options and choose the one best for you.
Ok, so browser support for AVIF is good, but not great according to [caniuse](https://caniuse.com/?search=avif), so always [check support](https://dev.to/nucliweb/detect-avif-image-support-to-use-in-your-css-4pen) and use the right format for your users. Different formats are better suited for different content. It's not a one-size-fits-all solution, so we encourage you to explore various options and choose the one best for you.

#### Getting started?
#### Getting Started

Easy! Just start uploading your AVIF and WebP files into the Asset Panel, and for those of you wanting to convert your existing assets, you can now right-click on your asset in the Asset Panel and quickly convert your asset into a PNG, JPG, WebP or an AVIF.

![Quick Convert](/img/convert-animation.gif)
<br/>

So there you have it! This is not just a feature release; it's our way of saying we're listening and we care. We're excited to hear your thoughts on these new features. Give them a try and share your experiences with us.

Expand Down

0 comments on commit 1339ecf

Please sign in to comment.