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

Подписаться 200 тыс.

Просмотров 63 тыс.

50% 1

Unoptimized images leads to a bad user experience. Don't make the mistake of serving massive images which leads to longer load times and frustrated users and customers.
In this video, we'll cover a few ways to optimize your images for the web. You can start by using something like tinypng.com/ to compress your images. Then, you can take it to the next level with ImageKit.
ImageKit can dynamically create multiple different sizes of your images. When you combine this with the srcset propert in HTML, you can always serve the correct size depending on the user's screen size and pixel density. It can also determine the optimal image format to send to the user based on the browser.
ImageKit docs : docs.imagekit.io/features/ima...
ImageKit blogs on resizing: imagekit.io/blog/tag/image-re...
Srcset with Kevin Powell - • srcset and sizes attri...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...

Опубликовано:

7 июл 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@nyarehd 2 года назад

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!

@Allformyequine Год назад

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

@maikolhernandez9176 2 года назад

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

@MaxProgramming 2 года назад

THAT IS VEEEERY INTERESTING! Thanks James 🚀🚀🚀

@Sankaritarina89 2 года назад

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

@luuduytoan3819 2 года назад

Thank you so much for this tip!!

@timbittins 2 года назад

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

@JamesQQuick 2 года назад

Lol thanks!

@briandwayne3869 Год назад

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

@strikeralph 7 месяцев назад

Helped so much❤

@destinlee 2 года назад

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

@theog4983 2 года назад

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 2 года назад

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!

@harratabdelmalek2062 3 месяца назад

Thank you so much , man ❤

@mati2370 2 года назад

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?

@vladserhiychuk8925 6 месяцев назад

That's what I need. Thanks.

@luonglinhkhoi401 2 года назад

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

@mrBurlaka1 3 месяца назад

so cool! thanks

@whatthefunction9140 2 года назад

This is gold

@varshasingh1299 2 года назад

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

@RubberDuckCoding 2 года назад

VERY VERY NICE!

@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

@SmashieHC 2 года назад

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

@patricknelson 7 месяцев назад

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

@destroyer40869 2 года назад

What was the vscode theme name you used?

@SunilSkanda 2 года назад

Thanks 👍

@itgiants5218 2 года назад

what is the vscode theme you're using?

@lucasmendonca2197 2 года назад

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

@JamesQQuick 2 года назад

Thanks! They definitely seem to get more visibility

@JeyDotC 2 года назад

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 2 года назад

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

@tomasmatusek6292 5 месяцев назад

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.

@diegognoatto590 2 года назад

pretty neat

@kirayamato6128 2 года назад

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

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

@RianY2K 2 года назад

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

@JamesQQuick 2 года назад

That’s a good idea too!

@gimp3695 2 года назад

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

@bonganintshangase6051 Год назад

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

@pixelmasque 2 года назад

great!

@zergzerg4844 9 месяцев назад

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

@datoshcode 2 года назад

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

@riju22 2 года назад

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

@JamesQQuick 2 года назад

Very nice!

@AchwaqKhalid 2 года назад

#AVIF to rule them all 💪

@ha_ks799 2 года назад

I recommend compress.js

@rimantasdanilevicius6754 2 года назад

what about video optimization?

@JamesQQuick 2 года назад

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

@nifares8744 2 года назад

9:22 hoy vi ese video.

@encycl07pedia- 9 месяцев назад

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.

@chhavimanichoubey9437 2 года назад

dynamic imagekit.io

@kennedya7848 2 года назад

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

@JamesQQuick 2 года назад

Hmmm how much time can you give?

@kennedya7848 2 года назад

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.

@gimp3695 2 года назад

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

@patricknelson 7 месяцев назад

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