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

[@nyarehd]

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

[@1ku0k]

You are the only image kit tutorial video on youtube... You should have a lot more hits!

[@timbittins]

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

[@JamesQQuick]

Lol thanks!

[@Allformyequine]

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

[@lucasmendonca2197]

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

[@JamesQQuick]

Thanks! They definitely seem to get more visibility

[@CristianSilverioNunezMata]

Thanks a lot for sharing about imagekit. I appreciate it a lot!!!

[@zergzerg4844]

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

[@MaxProgramming]

THAT IS VEEEERY INTERESTING! Thanks James 🚀🚀🚀

[@tomasmatusek6292]

And what about when you have API, with images, where that was loaded/apply be users, and u aas frontend web dev should make this images smalled? Have you any idea ? You dont want every image translate by hand.

[@varshasingh1299]

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

[@patricknelson]

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

[@bonganintshangase6051]

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

[@maikolhernandez9176]

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

[@mati2370]

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?

[@JeyDotC]

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 🤔

[@thedeadz0ne1]

You can restrict requests via "named-transformations" meaning you create pre-made transformations and name them, then, if you choose, imagekit can deny any transformation that isn't named. I believe there is throttling as well, plus if you call the same transform over and over it's cached

[@luonglinhkhoi401]

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

[@kirayamato6128]

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

[@Sankaritarina89]

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...

[@renatoloefstop]

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?

[@JamesQQuick]

You could do a check on the file size of the image they are looking to upload and show an error message if it's too big. Is that what you mean?

[@renatoloefstop]

@@JamesQQuick Thanks for the reply! In stead of the error msg, it would be nice to automattically reduce images that are beyond certain file size (let say >2MB) so to minimize bad user experience by showing just the error. I find people using contact forms with file upload fields on their cell phones don't necessary know how to reduce them if they encounter an error while uploading. Are there good JS library's for this, how to use them or what do you recommended?

[@hetoverseo3887]

@@renatoloefstop Search about sharp js, cdns and optimizing user input media.

[@briandwayne3869]

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

[@itgiants5218]

what is the vscode theme you're using?

[@strikeralph]

Helped so much❤

[@SmashieHC]

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...

[@destroyerYT-d4s]

What was the vscode theme name you used?

[@harratabdelmalek2062]

Thank you so much , man ❤

[@theog4983]

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?

[@JamesQQuick]

Great points. Unfortunately this was just an oversight. As I changed the way demo I did the demo, I forgot to update some parts of the code. Sorry for the confusion!

[@riju22]

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

[@JamesQQuick]

Very nice!

[@vladserhiychuk8925]

That's what I need. Thanks.

[@RianY2K]

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

[@JamesQQuick]

That’s a good idea too!

[@joshua.hintze]

You can do this. I've used a webp loader, however dynamic content that users upload obviously doesn't run through webpack. This is a great option for doing that outside

[@thetawise]

This is awesome! thanks for sharing :)

[@JamesQQuick]

Glad you enjoyed it!

[@thetawise]

@@JamesQQuick Are there any optimizations we can make around serving gifs via imagekit? Currently it seems like cloudfront caching (media served through static s3 bucket via aws) is more performant than imagekit for Gifs, but I'm unsure if this is because I haven't configured imagekit correctly to serve Gifs

[@rimantasdanilevicius6754]

what about video optimization?

[@JamesQQuick]

That’s something I don’t know as much about. I assume similar principles apply though

[@datoshcode]

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

[@Wahinies]

Webp is superior to true color PNG in lossless and far better in lossy

[@luuduytoan3819]

Thank you so much for this tip!!

[@RubberDuckCoding]

VERY VERY NICE!

[@destinlee]

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

[@whatthefunction9140]

This is gold

[@mrBurlaka1]

so cool! thanks

[@SunilSkanda]

Thanks 👍

[@AchwaqKhalid]

#AVIF to rule them all 💪

[@Wahinies]

Theres room for JXL

[@diegognoatto590]

pretty neat

[@encycl07pedia-]

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.

[@pixelmasque]

great!

[@ha_ks799]

I recommend compress.js

[@nifares8744]

9:22 hoy vi ese video.

[@chhavimanichoubey9437]

dynamic imagekit.io

[@kennedya7848]

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

[@JamesQQuick]

Hmmm how much time can you give?

[@kennedya7848]

if you can, atleast 10mins max. but if it cant really be compressed in a short video, make sure what you say is not repeated. i noticed your intro is almost 2 mins long. at most 30 secs will do. and what you said there was once again repeated later in the vid, wastes time. also, make use of sections/timestamps. just a simple big title on screen on what part you are taking about. but hey, im just a random internet dude in your comment section. it's your choice if you want to follow my opinions/recommendations. i'll be wishing you luck on your youtube career.

[@joshua.hintze]

I watched this in 1.5X speed and was able to follow along just fine.

[@patricknelson]

@@JamesQQuickShould have used ImageKit to compress your video! (j/k)