How To Load Images Like A Pro

Images are the largest asset for most sites and the biggest cause for unresponsive, laggy sites. In this video I will show you how to use lazy loading to not only drastically speed up your applications, but to also increase the polish and quality of your site.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:35 - What Is The Problem
02:17 - Lazy Loading Basics
05:15 - Advanced Blurry Loading

#LazyLoading #WDS #HTML

[snclt]

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

[JonHaa]

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.

[CodeCowboy]

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

[sunraiii]

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

[rusicsemenov]

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

[TheNewton]

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

[MostofaFatinZarif]

One of the best video ever. Maintain performance is a major part in development

[lukas.webdev]

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

[JoseRuiSantos-ruisoftware]

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

[MrMikopi]

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

[stevensavoie]

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

[TehPwnerer]

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

[canarymultimedia]

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

[csisyadam]

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

[Trazynn]

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

[BorisBarroso]

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

[Gio-m]

Dude you're a blessing, thank you!

[r.osorio]

Thank you bro! I will do this to my image component in react 👍

[hrsikeisa]

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

[dailydoseofchocolate]

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