New Avif + WebP blog post (#16)

* Added Avif/WebP Post * Removing DS_Store * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> * Update _posts/2023-10-11-avif-webp-lands-in-editor.markdown Co-authored-by: Will Eastcott <[email protected]> --------- Co-authored-by: Will Eastcott <[email protected]>
playcanvas · Oct 24, 2023 · ad659b9 · ad659b9
1 parent 933c4db
commit ad659b9
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/_posts/2023-10-11-avif-webp-lands-in-editor.markdown b/_posts/2023-10-11-avif-webp-lands-in-editor.markdown
@@ -0,0 +1,53 @@
+---
+author: mark
+comments: false
+date: 2023-10-24 12:00:00+00:00
+layout: post
+link: https://blog.playcanvas.com/avif-webp-land-in-editor/
+slug: avif-webp-land-in-editor
+title: "Boost Your Efficiency: Editor gets Support for AVIF and WebP"
+categories:
+  - Announcement
+  - News
+tags:
+  - editor
+  - textures
+  - workflow
+  - compression
+---
+
+![AVIF + WebP Support](/assets/media/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.
+
+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/>
+<iframe src="https://codesandbox.io/embed/react-compare-image-forked-myp5cp?fontsize=14&hidenavigation=1&theme=dark"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+  title="react-compare-image (forked)"
+  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.
+
+#### 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](/assets/media/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.
+
+Till then, keep creating, keep innovating!
diff --git a/assets/media/avif-webp-icons.png b/assets/media/avif-webp-icons.png
diff --git a/assets/media/convert-animation.gif b/assets/media/convert-animation.gif