When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]

When saving images for the web, there are a lot of options. jpg, png, gif.... webp? In this video I look at the difference between jpg and png, and then compare it to webp, which depending on the settings you use, is a better version of both jpg and png.

It's important to choose the right format because it impacts quality, as well as file size, and images are the heaviest load for most sites. Using the right format, and optimizing your images correctly, can help you (and your visitors) save a ton of bandwidth, so it's something that's worth looking into.

/// Links
More about WebP: https://developers.google.com/speed/w...
Squoosh: https://squoosh.app
Free converter (through command line): https://developers.google.com/speed/w...
In-depth image optimization (including more info on webp, and much, much more): https://developers.google.com/web/fun...

#fiveminutefriday (well, I tried at least!)

---

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save:    • How to automatically refresh your bro...  

---

Support me on Patreon:   / kevinpowell  

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram:   / kevinpowell.co  
Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell