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

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

Choosing the right format is important because it impacts quality as well as file size, and images are the biggest load for most sites. Using the right format and correctly optimizing your images can help you (and your visitors) save a ton of bandwidth, so it's something worth investigating.

/// Connections
Learn more about WebP: https://developers.google.com/speed/webp/
Squoosh: https://squoosh.app
Free converter (via command line): https://developers.google.com/speed/webp/docs/precompiled
In-Depth Image Optimization (including more about Webp and more): https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/#what -is-webp

#fiveminutefriday (well, at least I tried!)

—

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

Are you new to Sass or want to improve your game? I have 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: https://youtu.be/h24noHYsuGc

—

Support me on Patreon: https://www.patreon.com/kevinpowell

I'm also on other places on the Internet!

If you'd like a behind-the-scenes look and sneak peek at what's happening on my YouTube channel, be sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

Please take the opportunity to connect and share this video with your friends and family if you find it useful.