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'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
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
@@thalison-dev It is the other way around. Not using width/height affects the SEO ranking negatively and increases the cumulative layout shift score. Google for "cumulative layout shift"
@@thalison-dev After 20 years fuckig around with Google bullshit I can tell you without a shadow of doubt that most all of these SEO tips are an utter waste of time and effort. If you ever look at some of the top ranking sites in highly saturated market you will see most of them are trash, a million console errors, dozens of tracking cookies, elements jumping around, interstitials and popups, bad semantics, too much advertising blocks, shallow content, meaningless content, duplicated content, I mean the list goes on.
@@harris.sensorsoffline6419 native lazy loading is still being used. the difference is that with one, you get images pop out of nowhere on slow networks; with the other - the images are placed where they should be, the user is visually aware there's an image there and how it should look like, and gets nice visual feedback that the image is being loaded. calling it "idiotic blur image lazy load" shows a lot about you
@@Peshyy If you are working on a Gov Project that requires support for Slower Network & Older Browsers. You can't even support native lazy loading better luck with Tables to align those IMGs 😁. Just kiddin, like you can convert all your images to webp with extreme compression & native lazy loading. Enough, to work good on all 4G Connections that most World runs on.
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.""
That's the Declarative Paradigm of programming for you. It's all about letting you describe WHAT you want (leaving the HOW to the engine). That is, you provide descriptions of what you want, piece by piece. On the other hand, what people casually mean by "programming" tends to be the Imperative Paradigm. This is all about letting you describe HOW you want things done. That is, you provide instructions, step by step.
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.
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.
You can lazy load progressive jpeg as well, and this way you're not wasting user's bandwidth for blurred images, image actually loads progressively and you won't have to manage two sets of assets
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
What you're describing is called Progressive JPEG, normal JPEG stores image block by block and cannot be rendered Progressively, but Progressive JPEG stores data from lower frequencies to higher ones, so it can load in an un-bluring manner
Yes, it's called jpeg 2000. Unlike regular jpeg, where they use Fourier transform, jpeg 2000 uses wavelet transform, which allows for better perceived image quality with smaller file size. Windows does not support it, but on a macOS you can save an image in jpeg 2000 format.
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)
One more thing. In your example it doesn't really matter, but for regular block images (not on a grid like yours) lazy loading can cause layout shift. To prevent this, you should specify each image width and height attributes. What's more, if you have those values and you are dealing with responsive images, you could also set a style with --_img-width and --_img-height custom properties. This should be the pixel value without unit. Then, in your CSS img[loading="lazy"]{ max-width:100%; height:auto; aspect-ratio: var(--_img-width) / var(--_img-height); }
while trying this out i ran into said issues and after struggling for 20 minutes I arrived at almost the same solution you gave except for the progressive part. Have no idea what that means. Can you please explain?
@@aniketpandey2524 Progressive images, supported since ages from jpg format include the small image Kyle generates inside the image itself. Also, the top-to-bottom loading is different on this kind of images - the same effect we're trying to have in the video, except that it is browser native, rather than using JS. I personally create the progressive images with the "export for web(legacy)" using the "progressive" option in Photoshop, but pretty sure you can find a free tool for that.
@@aniketpandey2524 JPGs can be saved as "progressive" from photoshop. I'm sure there are other ways, but that's how I do it. If you are going full on optimization you may also consider a tag with the image inside as a WEBP or any other modern web format; with the JPG fallback. I don't know if WEBP has this "progressive" option.
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
0:05 no the biggest reason is the sticky header, cookie, chat, and subscribe popups, the news feed, and the social links. remove all that bloat and the website will just feel faster no matter how your images load
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!
It is important to mention that images that have the attribute loading="lazy" but are not loaded yet are not available on the print layout! If the print layout is important, a lazy loading method using IntersectionObserver would be the better option.
I really don't see how blurry jpegs are nice looking, they are even quite horrible imo, but the idea and technique as a whole is for sure nice and useful.
@@mohithguptakorangi1766 empty content when the page elements first load. It also causes a little bit more of delay before the image gets load, the browser has to check if the image is currently in the viewport, bad for mobile users on 3g.
I have been using 'BlurHash' for multiple apps for some time now. I feel like it gives nicer results and the size for the blurred img is just bytes (!)
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.
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
No, he says as much (something like "there are tons of ways, use what ever you want") I'm guessing he just had a good workflow set up for ffmpeg that he was familiar with, so he threw the images at it because he could :P
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?
The problem with this is that you make double additional request to server to load blurry image for each image. Perhaps it would be better if you combine all these small blurry images into a single sprite image.
Yes, creating more http requests is bad for performance so this would only be a visual fix. A poor one at that, hence the actual pro version would be to use placeholders.
Hmm, not if the images you're fetching don't provide progressive loading or also have a small variant. You'd have to just get the most important images or versions as fast as possible, and use generic placeholders/colors in the meantime
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
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!
My fingers were hovering over the keys to scream "what about responsive images?" and at the last moment you linked it in = ) What about webp though = p
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.!
He does talk a lot about react tbf, but decent amount of vanilla videos.
He is the framework
I agree, prefer not to be bogged down with a framework, for what I do they're overkill.
yup, it helps to have more better understand, and get used to the logics
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.
Hi Kail, thanks, good idea with pulse. And you can write in the keyframes 0%, 100% ... and 50%, instead repeat the same code.
8:12 in addition to online tools most image asset CDN's have parameters , or a path, to serve specific image sizes.
Been in web dev for 25 years, been a few since I was doing front end stuff. TIL some new to me properties, thanks!
Web development wouldn't be where it's at without RUclips. Great video!
nah, without content creators
@@calimio6 nah, without internet
Did you ever hear about books? Or sites like MSDN?
@@merlinwarage Congrats on being a dick under a positive comment.
Also, dev books are 80% fluff, 20% content and MSDN is for boomers.
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
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
also known as CLS, which is Cumulative Layout Shift, which will impact the page SEO ranking
@@YuriG03042 What do you mean ? using width and height impact SEO ranking negatively?
@@thalison-dev It is the other way around. Not using width/height affects the SEO ranking negatively and increases the cumulative layout shift score. Google for "cumulative layout shift"
@@thalison-dev After 20 years fuckig around with Google bullshit I can tell you without a shadow of doubt that most all of these SEO tips are an utter waste of time and effort. If you ever look at some of the top ranking sites in highly saturated market you will see most of them are trash, a million console errors, dozens of tracking cookies, elements jumping around, interstitials and popups, bad semantics, too much advertising blocks, shallow content, meaningless content, duplicated content, I mean the list goes on.
@@rproctor83 no, it's just that being the thing people want is always most important.
But layout shift is still annoying for users period.
One of the best video ever. Maintain performance is a major part in development
I heard about it, but actually never used it ... But this actually seems pretty helpful. Keep it up. 😉🔥
Whose gonna do it? so much typing of extra code 😁 so much work. Just basic lazy loading is enough.
@@harris.sensorsoffline6419 I see you don't care about UX at all
@@Peshyy It won't be ideal, to work on a ldiotic Blur Image Lazy Load when native lazy load is faster & better.
@@harris.sensorsoffline6419 native lazy loading is still being used. the difference is that with one, you get images pop out of nowhere on slow networks; with the other - the images are placed where they should be, the user is visually aware there's an image there and how it should look like, and gets nice visual feedback that the image is being loaded.
calling it "idiotic blur image lazy load" shows a lot about you
@@Peshyy If you are working on a Gov Project that requires support for Slower Network & Older Browsers. You can't even support native lazy loading better luck with Tables to align those IMGs 😁.
Just kiddin, like you can convert all your images to webp with extreme compression & native lazy loading. Enough, to work good on all 4G Connections that most World runs on.
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.""
That's the Declarative Paradigm of programming for you. It's all about letting you describe WHAT you want (leaving the HOW to the engine).
That is, you provide descriptions of what you want, piece by piece.
On the other hand, what people casually mean by "programming" tends to be the Imperative Paradigm. This is all about letting you describe HOW you want things done.
That is, you provide instructions, step by step.
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.
ok
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.
Did not know about the loading attribute. It was very helpful for a website I develop. Thank you!
Thanks this is so useful, I have started a e-commerce site and I will use this method for the product images
this method is more suite for showcase , img attribute srcset is better enough for your ecom site
The process of generating and storing the blue placeholder js cumbersome - cloudinary really makes the whole thing a lot more cleaner.
I love how this is detailed!!!
Dude you're a blessing, thank you!
Is it possible to lazy load in a sharp pixelated style. Because pixel-art aesthetic is really hip these days.
Yes
Yes you can
Well done guys, one more happy comentator that got his question answered
@@sanzharsuleimenov379 thank you
You can create a smaller pixelated version of your image and use that as the bg of the div.
What happened to progressive jpg anyway? That was a really cool feature built into the image...
It should still works, and it is much simpler than this.
That would still start the resource download on page load even if the image is 200 viewport a down.
You can lazy load progressive jpeg as well, and this way you're not wasting user's bandwidth for blurred images, image actually loads progressively and you won't have to manage two sets of assets
I was looking for this comment
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
What you're describing is called Progressive JPEG, normal JPEG stores image block by block and cannot be rendered Progressively, but Progressive JPEG stores data from lower frequencies to higher ones, so it can load in an un-bluring manner
Yes, it's called jpeg 2000. Unlike regular jpeg, where they use Fourier transform, jpeg 2000 uses wavelet transform, which allows for better perceived image quality with smaller file size. Windows does not support it, but on a macOS you can save an image in jpeg 2000 format.
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)
One more thing. In your example it doesn't really matter, but for regular block images (not on a grid like yours) lazy loading can cause layout shift.
To prevent this, you should specify each image width and height attributes.
What's more, if you have those values and you are dealing with responsive images, you could also set a style with --_img-width and --_img-height custom properties. This should be the pixel value without unit.
Then, in your CSS
img[loading="lazy"]{
max-width:100%;
height:auto;
aspect-ratio: var(--_img-width) / var(--_img-height);
}
while trying this out i ran into said issues and after struggling for 20 minutes I arrived at almost the same solution you gave except for the progressive part. Have no idea what that means. Can you please explain?
@@aniketpandey2524 Progressive images, supported since ages from jpg format include the small image Kyle generates inside the image itself. Also, the top-to-bottom loading is different on this kind of images - the same effect we're trying to have in the video, except that it is browser native, rather than using JS. I personally create the progressive images with the "export for web(legacy)" using the "progressive" option in Photoshop, but pretty sure you can find a free tool for that.
@@PhoenixXxXx91 oh! Now I got it. I thought he's talking about some new option in img tag of html.. 😅
@@aniketpandey2524 JPGs can be saved as "progressive" from photoshop. I'm sure there are other ways, but that's how I do it.
If you are going full on optimization you may also consider a tag with the image inside as a WEBP or any other modern web format; with the JPG fallback.
I don't know if WEBP has this "progressive" option.
Excellent video! Incredibly well explained, exceptionally well prepared! Thank you very much!
This is an awesome way to load images. Great video!
It's better to use library for that
I was looking for EXACTLY this for my project.
You're awesome, this was incredibly helpful.
Great easy to follow vid. The blur background idea is gold.
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
Thank you next/image for not making having to write all of this :). Great video btw.
Thank you bro! I will do this to my image component in react 👍
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
0:05 no the biggest reason is the sticky header, cookie, chat, and subscribe popups, the news feed, and the social links. remove all that bloat and the website will just feel faster no matter how your images load
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!
Just what i was looking for, awesome
you are such a genius!!
You could also throw a filter blur on it to make that pixilated small file look a little nicer
Actually, you are right, but when we use the 'Filter blur' effect on the mobile version, it feels laggy.
@@gowthammurugan6392 Interesting. Which part feels laggy?
Hi Kail, thanks, good idea with pulse.
I was waiting for this video.
what a coincidence got this issue in my job task xD thanks a lot!
Awesome tutorial, thanks Kyle.
exactly what I needed thank you
Amazing as always thank you so much man
Grest tutorial. Thank you
Considering that jpeg encodes in 8x8 blocks, maybe 16x16 or 24x24 pixels would work better?
I would also add a blur filter to smooth out those low res jpeg artifacts.
Ey bruh at 15:41 I am not seeing the card for the suggested video.
This is nice. Thank you dude.
Web Dev is the best👍
Thankyou much for sharing this awesome technique. ))))
Very usefull video ! Thank you !
Thanks for this Video!
Amazing content!
Great stuff thanks for sharing.
Your are the life saver....the (img.complete) one
Great content! Thank you!
This guy is awesome!
Ow man! You are awesome!
very helpfull content thankyou for sharing this.
It is important to mention that images that have the attribute loading="lazy" but are not loaded yet are not available on the print layout!
If the print layout is important, a lazy loading method using IntersectionObserver would be the better option.
Nice, thank you!
Thank you for this very informative video .. pls do make a video for video loading time will be very helpful :)
Super cool, thank you
I really don't see how blurry jpegs are nice looking, they are even quite horrible imo, but the idea and technique as a whole is for sure nice and useful.
Great video!
You have the best tutorials out there. I also notice you shake your head sideways alot when talking.
This is good to know.... But one more thing... Can you show how to implement this feature in react front end application???
The lack of use of js here till the end makes my day
Use Ctrl + Alt + Down / Up to get multiple cursors as he did in the video
Great video. Thanks.
Just use a picture tag and webp images with jpg fallback. Also, images on the first fold of the viewport should never be lazy loaded
Could you elaborate what you mean by “first gold of the viewport?“ Thanks!
@@skykingjason basically the area on the screen that is visible to you as soon as the page loads
@@MarkPanado and y though?
@@mohithguptakorangi1766 empty content when the page elements first load. It also causes a little bit more of delay before the image gets load, the browser has to check if the image is currently in the viewport, bad for mobile users on 3g.
@@hetoverseo3887 didn't know that, thanks
I have been using 'BlurHash' for multiple apps for some time now. I feel like it gives nicer results and the size for the blurred img is just bytes (!)
And i forgot to mention: no network requests for the blurred imgs
@@chrisprenn Hi. Thanks for the nice info!
wow no library or framework. You are awesome man.
Simply amazing explanation
Great advice :)
Thanks, ill just use progressive jpegs.
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.
Is that the third argument?
@@cookieman.19 Yes, add { once: true } for the third argument 👍
thats what i want thanks very much i had same porblem in my real portfolio
nice tricks to load images thanks for sharing.
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
Also to make the no-scripts users see the actual picture eventually...
Is there a reason to use ffmpeg over imagemagick? I was under the impression that ffmpeg is tailored for videos, and imagemagick for pictures.
No, he says as much (something like "there are tons of ways, use what ever you want")
I'm guessing he just had a good workflow set up for ffmpeg that he was familiar with, so he threw the images at it because he could :P
That's awesome!
Thanks again man! can you made also one video about file types? webp and avif versus jpeg also svg can be 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?
Does it work? Yes.
Is it clear and readable? Yes.
Good.
Are there other ways of doing it? Of course. Tons.
Welcome back
1:45 the images are 755B and are taking forever to load ??
Very useful. King.
That was amazing
Love this man, awesome video! Can you please do a vid on requestAnimationFrame()?
What about Progressive JPEG?
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.
The problem with this is that you make double additional request to server to load blurry image for each image. Perhaps it would be better if you combine all these small blurry images into a single sprite image.
Embed them as data uris
Yes, creating more http requests is bad for performance so this would only be a visual fix.
A poor one at that, hence the actual pro version would be to use placeholders.
That's cool, but what to do with dynamically fetched images? It's there a way to do the same trick?
Hmm, not if the images you're fetching don't provide progressive loading or also have a small variant.
You'd have to just get the most important images or versions as fast as possible, and use generic placeholders/colors in the meantime
use skeletons instead
love the content
You are a savior :D
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
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!
The "load" of a
Thank you.
did you noticed: when slow 3g is enabled - browser downloads all 16 images in one time, so "lazy" sucks ?
My fingers were hovering over the keys to scream "what about responsive images?" and at the last moment you linked it in = )
What about webp though = p