DON'T Serve Unoptimized Images - Webp, Srcset, ImageKit, and more!

Helped so much❤

BlurHash is also another good method for showing blurry placeholder images while waiting for the larger images to load.

You're missing a really huge way to optimize your site with those images: you don't even need 80% of the ones you showcased. Most of it is text on a background. Just put the text as actual text. and put the profile picture circles as the only pictures on the page. It looks like some of them were reused so you'd only need to load 1 or 2 much smaller images instead of 6 huge, mostly-redundant images.

Text shouldn't be in images unless it's a logo or wordmark.

Also your contrast is pretty awful with the black leading 00 on top of a black background. Vincent Flanders of WPTS would have a field day with those images on a website.

WebPs are also just bad for the end user if they want to save them. Lazy loading is the same. It doesn't work if JS is turned off or not supported. Those substitutions and calculations also cost computing power.

For thousands of years (decades, but that's not as fun to say), man has used thumbnails with real image formats. It worked on dial-up. It works today. Just optimize the image by making thumbnails. It's simpler, faster, cheaper, and just works.

Why srcset doesn't work. I don't se the changes, but if i 'm making changes in src by addin tr attribute it works fine

Very well done. I needed to know this like right now! 🤣

Could you please walk us through uploading on imagekit via client, react to be specific.

Nice tutorial! What if the requirement was that people need to upload images on let's say a contact form and you need to compress/optimize those before the user uploading them?

This is awesome! thanks for sharing :)

Such great AWESOMENESS! How did I miss this one! Great stuff thank you as usual!!

VERY VERY NICE!

great!

What to do in case a cloud service stops responding for some reason? Can we set a fallback local image to show up instead of an alt attribute text?

I would love something like this for next/image since I'm currently using that and deployed a Netflix-Clone, but i'm having a hard time optimizing the images. And if I use next/image all of my styling breaks...

Thanks 👍

Now I'm curious on how image kit protects itself from denial of service attacks or prevents people from causing crazy costs to a company by abusing the dynamic imagine generation 🤔

I love this tutorial... simple, usefull and beautiful. Thank you for sharing.

Is it not loosing the quality of image when you compressed it?

Actually I like to use lazysize js library for lazyload it's very useful and easy to use.

what is the vscode theme you're using?

I wonder if imagekit support adding metadata such as title or description when requesting and getting response

I recommend compress.js

If you don't have much time, make it Quick. Cause this guy got you covered.

I always use the picture tag with webp and fallback, while using imagekit as cdn

im interested in this. but i dont like to put 18 minutes of my life to watch this.

This is gold

These thumbnails with ❌ and ✔️ are great attention-grabbers! keep 'em coming please

what about video optimization?

thank you for tutorial. Maybe you can use Webpack to compress assets image during building production.

What was the vscode theme name you used?

Thank you so much for this tip!!

Fun watching this now that you told us how it was all done on the last Compressed 🍻

pretty neat

Good video. I've been doing all these optimizations just recently to improve our LCP score. The only thing missing is webp. We have our own asset server so I'm going to have to dive deep to see what needs to be changed...

I was just wondering, if I had like 100 JPGs, and I wanted to serve them as webp, I'd have to convert the whole batch beforehand right? Converting on the fly might not create any benefits no?... Just wondering...

Thanks for sharing.
I've just finished my portfolio site and yes, images takes about 40% of loading time.
This gonna be useful.

Compare a compressed file in the png format and in webp format.

Hi James. I'm curious about one thing; can you please explain why you decided to create an array with the numbers 1-10 and using Foreach, as opposed to using a for loop which wouldn't necessitate creating an array for indexes?

THAT IS VEEEERY INTERESTING! Thanks James 🚀🚀🚀

First like comment then see complete video...that much I trust you...