1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Compress images easily with Squoosh.app

    Juri StrumpflohnerJuri Strumpflohner

    Optimizing images is key. There's no point in serving a multiple megabyte sized high resolution images when the consumer always just sees them scaled down and embedded within your app. At that point, you might want to compress your image. In this lesson I'm quickly showcasing how you can use the squoosh.app web application to quickly compress an image.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 Usually when I write my blog posts at juri.dev -- you can also go to juristr.com/blog -- you can see I have these kind of images. These are very nice images which usually then pop up also on social media or here on my blog at the very forefront.

    0:16 Obviously, I want to optimize these kind of images as much as possible because they shouldn't have an impact on the loading time of my overall blog experience. The easiest way to achieve that is to go to squoosh.app, which is an application created by members of the Chrome team to showcase how you could, for instance, use WebAssembly inaudible for doing image compression.

    0:37 I'm mostly using it here as a user. Let's, for instance, choose this image, which here on the original site is 700 kilobytes. Already, with the default settings here, you get 86 percent optimization, which is around 98 kilobytes. If you look at the image from this perspective, which will be the final result on my blog, you'd barely note any difference.

    1:00 If I zoom in, you can see here it is a little bit rough on the edges, but again, from zoomed-out perspective you don't notice any kind of difference. We can go even higher. You can decrease the quality of the image and therefore even gain a better optimization. Now you see it's like 89 percent smaller.

    1:24 Again, now you see here it's getting rougher here, but again, from this perspective you don't notice any kind of difference. Let's go with this one. You just download it. Now you have the small optimized image which you can go and include in your blog post.