Thread by @michaelketzer

⚡ Every Web Developer should know how to create next-gen image formats

Serving your images in next-gen formats is crucial to ensure your performance is fantastic and loads fast for any of your users.

👇 Learn how to create images in the next-gen format in seconds

1️⃣ What are next-gen formats?

Next-gen formats are image formats such as
- WebP
- AVIF
- JPEG 2000
- JPEG XR

We will focus on WebP as this has the best support across all browsers and is most used!

2️⃣ What is WebP?

WebP is a next-gen image format published by google in 2010. It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.

In reality, I have seen over 40% smaller sizes already.

And WebP supports transparency! ⚡

👇

WebP also can be animated. 🤯

So it technically could replace a GIF, but it has some advantages and also some disadvantages.

For example, the support is not that widespread as for GIFs.

3️⃣ What browsers are supporting WebP?

The current support includes all major browsers if you skip IE11.
However, it supports Safari only for iOS or macOS Big Sur 11+, not for older macOS versions.

But the good part, it is not an issue at all 😊

👇

You can use the picture tag.

It can include different image formats, and the first supported variant will replace your image source.

In IE11, this is handled as div-element, which has a direct fallback to the IMG-Tag!

So as an example, you can use it like this:

5️⃣ How can you create WebP formats?

Google got you covered there, as they created command-line tools that cover everything you will need. Check it out here: developers.google.com/speed/webp/dow…

It also got you covered with install instructions.

👇

After you installed the command-line library, you can open a terminal and start converting your images 😊

I usually convert my images with a compression factor of 65. The default is 75.

You can find a whole reference on possible options here:
developers.google.com/speed/webp/doc…

6️⃣ Can I convert to WebP online?

Yes, you can.

There are some converters like:
- cloudconvert.com/webp-converter
- convertio.co/png-webp/

And many more you can easily find.
However, I prefer sticking to command-line tools.

7️⃣ What about CMS integrations?

Most of the known CMS systems have plugins for that:
- Drupal: drupal.org/project/webp
- Joomla: extensions.joomla.org/instant-search…
- Magento: marketplace.magento.com/catalogsearch/…
- WordPress: wordpress.org/plugins/search…

So that would not be a big deal to add 🙌

8️⃣ What about JS Frameworks?

Most modern frameworks provide an optimized image component that mostly does all stuff for you, like NextJS, Gatsby, or Nuxt.

You should use them instead of creating your own.
It just saves you time, and they mostly work perfectly!

9️⃣ Bonus

I recommend using SVG instead, when you have small image elements that are not actual pictures, such as background patterns, illustrations, and wireframes.

The experience of SVG can be a lot better as it will look perfectly sharp and faster in most cases. ⚡

This is the fourth thread, breaking down some methods to boost your website's performance with ease and no hassle. 🙌

Tomorrow I will post a short thread on how to optimize video formats.

✅ Done

If you found this useful, consider following me @michaelketzer and retweet the first tweet! 🙏

Did I miss something? Please let me know 🙏

You may also want to check out Nat's addition to WordPress!

If you want to learn about SEO and WordPress topics, make sure to follow him. He is awesome and really kind!

https://twitter.com/natmiletic/status/1422971843590373377