one of the things i like about you, is that you rarely use any framework/library for your videos and just focused on the fundamentals...! Keep it up.!

Hi Kail, thanks, good idea with pulse. And you can write in the keyframes 0%, 100% ... and 50%, instead repeat the same code.

Great easy to follow vid. The blur background idea is gold.

I'm not that into front end side, But video making of yours is brilliant! I've even checked if I increased playback speed, but no, it was you talking at a good amount of speed, talking only about important stuff. Visual demonstrations are on point also. Thank you, good work. Edit: 11:36 that is the fastest bug fixing I've ever seen haha

Did not know about the loading attribute. It was very helpful for a website I develop. Thank you!

1. I'd add an additional blur filter to the low res images, either in the browser or when generating them. Just upscaling them kinda makes them look crappy as you get lots of "square gradients" (for a lack of a better word) interpolating between the pixels instead of a nice smooth blurry version. 2. As other have said, this effect is mostly already implemented into browsers/images. If you'd save the images as progressive, they'd automatically get sharper and sharper while they load, which requires less code and doesn't even need the download of the small image versions. However you could implement an additional blur effect on top of that while they're loading for a better effect, similar to what you've done in the video. 3. The solution you've given in the video is bad as someone with scripts disabled won't see the high-res versions at all. I'd add the CSS class that hides them until they're loaded also within JS.

I love how this is detailed!!!

Excellent video! Incredibly well explained, exceptionally well prepared! Thank you very much!

Dude you're a blessing, thank you!

I was looking for EXACTLY this for my project.

Hi Kail, thanks, good idea with pulse.

Awesome tutorial, thanks Kyle.

The process of generating and storing the blue placeholder js cumbersome - cloudinary really makes the whole thing a lot more cleaner.

Been in web dev for 25 years, been a few since I was doing front end stuff. TIL some new to me properties, thanks!

You're awesome, this was incredibly helpful.

Just what i was looking for, awesome

exactly what I needed thank you

Thankyou much for sharing this awesome technique. ))))

8:12 in addition to online tools most image asset CDN's have parameters , or a path, to serve specific image sizes.

Amazing as always thank you so much man

Thanks for this Video!

Very usefull video ! Thank you !

Great content! Thank you!

Thanks this is so useful, I have started a e-commerce site and I will use this method for the product images

Great stuff thanks for sharing.

Nice, thank you!

This is nice. Thank you dude.

I love that the way you add lazy loading is how non-programmers think writing code is like. "If you want lazy loading, type "loading = lazy". If you want a visitor to buy things, just add a button and write "action = complete transaction with credit card or payment service.""

Super cool, thank you

Simply amazing explanation

Grest tutorial. Thank you

Great video. Thanks.

This is an awesome way to load images. Great video!

very helpfull content thankyou for sharing this.

you are such a genius!!

Great video!

That's awesome!

Amazing content!

Thanks!

Ow man! You are awesome!

I heard about it, but actually never used it ... But this actually seems pretty helpful. Keep it up. 😉🔥

Great advice :)

I was waiting for this video.

Thank you

thank you

Web development wouldn't be where it's at without KZfaq. Great video!

Very useful. King.

This guy is awesome!

That was amazing

Cool! 👍

what a coincidence got this issue in my job task xD thanks a lot!

nice tricks to load images thanks for sharing.

Thank you for this very informative video .. pls do make a video for video loading time will be very helpful :)

If you already know the image dimensions before loading it, then you should add the width and height attributes to you img. This avoids the annoying effect of seeing the content moving around during image loading

Your are the life saver....the (img.complete) one

nice video! one thing I'd have done differently is, if you're using javascript anyways, I'd have set the small image style in the script itself too, to have the DOM be less cluttered

love the content

thats what i want thanks very much i had same porblem in my real portfolio

You are a savior :D

In the 90s with JPEG they would load exactly like you describe and they can because the the way jpegs are constructed using frequency data so you can load lower frequency components first making up a blurry pixelated image like you have slowly transitioning into the actual image as finally received and loaded

good video thanks

I would also add a blur filter to smooth out those low res jpeg artifacts.

The issue with this puts more load on the user and the server. You're loading multiple images at the end of the day. I would love to see if there could be a version where it automatically downscales itself, and builds upon itself. Great video!

❤❤❤thank you

Welcome back

Thanks, ill just use progressive jpegs.

At my job they really want us to improve the ligthouse scores. Have you done any tests to see what maximizes the lighthouse score (things like first/largest contentful paint)? I know you may even have to do strange stuff like not use external css files if your site has a really big one. I think it would be great if you could do a showcase of all the different ways to lazy load & optimize images and then show what kind of lighthouse scores they get (specifically on mobile, that's the killer). Thank you for this vid!

Considering that jpeg encodes in 8x8 blocks, maybe 16x16 or 24x24 pixels would work better?

😍 nice sir

What happened to progressive jpg anyway? That was a really cool feature built into the image...

very nice 🙂

Great video as usual. What do you think of the use of 'skeletons' while loading stuff. Is it any better than having to have multiples files of the same image but sized down?

Thank god programming is like an open-book exam, you just need to know that it can be done and you will have Kyle here to help you do it

This video is 🔥

amazing

Cool! I personally prefer not having extra markup. You can have the background image directly on the img tag. You wouldn't have the exact fade in animation you achieved but if you save your images with "progressive" turned on, they load in waves of less quality to more quality instead of top to bottom. Also, I think that hiding images by default isn't very progressively enhanced. You could instead add a class when JS starts running to hide them, or the classic remove the .no-js class on the body. Also, wouldn't it be more performant to do the pulse animation with opacity rather than changing the background color value? I think this can be done without extra markup as well (there's no need even for a pseudo element)

Thanks again man! can you made also one video about file types? webp and avif versus jpeg also svg can be nice

It was great and useful, thank you. How can I load the photos myself? For example, load photo number 3 first and then photo number 8?

Web Dev is the best👍

Love this man, awesome video! Can you please do a vid on requestAnimationFrame()?

Thank you next/image for not making having to write all of this :). Great video btw.

You could also throw a filter blur on it to make that pixilated small file look a little nicer

nice

1. You can set background on an img itself. But I think it'll be impossible to add pulse over it. 2. Seems like progressive jpeg (especially with http2) could've solve the problem too? 3. 08:48 I like this more than blurry until load. 4. 10:30 It would be better to specify { once: true } so that it usubscribes after event occures.

Nice. Like

What about Progressive JPEG?

1. Would ".blur-load:not(.loaded)::before" work? 2. What do you think about "animation-direction: alternate"? 3. Setting the bg color to white and play with the opacity in the animation is another way to do it.

So impressed with your skills, every single piece of content you produce. Just a heads up, that addEventListener will leak memory. Simplest fix would be to add an option argument with once:true.

You are awesome

It is a sexy solution. But after I've tried it I found something a bit fancier with less boilerplate. Try to use Verlok's vanilla-lazyload (only 2kb) with on-the-fly generated svgs (you can put the loading animation inside the svg template). It ends up having a bit more bytes around (400b to 2kb depinding on resolution) but the fun thing is it only requests it once for each resolution. So in your example you can use a standard 500x500 svg and you would have 1 request for the loading and the placeholder.

Please make a video about next image too? My problem is how to set height on dynamic images in next js without them losing the aspect ratio and keeping the responsiveness

just wow

Sorry for the rant, but it's important to share this information because your solution has been used for years and has negatively impacted websites. To tackle this issue effectively, the best approach is to choose a background color that closely matches the upcoming image you're about to load. You can even consider using a gradient for a nicer visual effect. This helps eliminate the white background. Additionally, using progressive jpegs for larger images is recommended. By following this method, the image will load gradually from a blurry state to a sharp one, instead of loading from top to bottom all at once. As a result, the loading process will seem much faster, and the images will appear to load almost instantly, without any abrupt transition from blurry to sharp and without the unnecessary code. Please don't feel discouraged, as we're all continuously learning, and it can be challenging to find the best solution for every situation. There might even be a better solution out there that I'm not aware of. Lastly, I want to commend you on the great work you're doing, as your videos provide a lot of valuable information!

awesome. so this means one can replace IntersectionObserver to lazy load images that come into view with this simple loading="lazy" trick?

What is the right way to ensure that the placeholder div is the same size the image will be, once loaded, to avoid jerky reflow issues.

How to do it dynamically fetching from backend

question, does this have to do with downloading the image or rendering? Because wouldn’t it look better if it just shows an icon that its loading and then renders it instantly on the screen once it fetched it from the database (or wherever it came from)?

Hey Kyle. The component in Next.js take care of this problem?

Is it possible to lazy load in a sharp pixelated style. Because pixel-art aesthetic is really hip these days.

I am curious to know, if we set content to none. But left animation there. Will it take any computation load as animations are cpu intensive. Or browser intelligently will remove the animation property if no content is there