After many years of following, watching, and taking your courses, I've just this second realised that you open your videos with "Hello my front end friends", not "Hello my friend and friends", that I thought that I'd heard dozens and dozens of times, lol. Just LOVE your videos, the most value I get from KZread, by a huge margin ❤️

@CrispyCircuits

7 ай бұрын

I thought the same thing! Been watching for a long time.

@dom8429

7 ай бұрын

WHAT thats crazy I never noticed but it makes so much sense now

@TechnicJelle

7 ай бұрын

Wait what!? I thought that too!

@RayAndrewsDev

7 ай бұрын

Only realized that a few months ago myself :)

@CarlosHernandez101400

7 ай бұрын

Well, crap 😂😂. I never understood why he says hello to just one friend first. It turns out I need my hearing checked. 😂😂

I saw the video and immediately implemented it in a project. Thanks for sharing as always! ❤

This is what a high quality video is all about . Learning new stuff on every video. I didn't even know about the shape margins thing , checking that out next. Thanks Kevin ❤

This is great!! The explanation shows how this reset can really help improve performance.

Fantastic content. I love watching your videos. I learn something new pretty much everytime I watch one. You're a great teacher!

great tricks, really thanks Kevin, love your content.

maaaaan this is veeeeeeeeery nice video, it made me think again about my understanding of this stuff, very beneficial, thanks a lot man.

Thank you!! I've been screaming my lungs out every time I was seeing display block on images! Vertical align is the way to go!

Thank you! This is so useful :D

Perfect timing, sir.

So much informative I am hell impressed by your knowledge thank you sir❤

Good stuff ! You can also style the alt attribute img[alt] if needed ! I used it for small thumbnails where I wanted an overflow of none when the alt is displayed 😊

@hobbit125

17 сағат бұрын

That's not styling the alt attribute (you can't style attributes.) That's styling any img element that has an alt attribute.

Thanks for this content

this is awesome !!!

I like the background image hack!

Using this and it is great!

You have been a very big influence in my life and I really appreciate you for that and I would really like to know the courses u have done so far so I can follow my mentor and his foot steps to learn the same courses as you

The low-res image part is a very interesting concept that I am for sure going to use from now on, especially since I have experienced slow internet in public places and see how important if can be. Very cool insights.

@eduardoalvarez4457

3 ай бұрын

maybe it can be combined with CSS filter blur to remove the ugly compression. (note that the filter needs to be done by the browser not be applied to the low res image directly because blurring the image adds more colors, meaning the low res will have a big file size, defeating its purpose)

Dealing with high quality images is not uncommon nowadays. Low-res technique is something! I really appreciate you for sharing this kind of things with us.

@mrgamerzyt3945

5 ай бұрын

Yea, this technique will really be helpful. I personally have tried to do it before but failed 😭

Great video

Thankd 👍

Your channel is very good Kevin, congratulations, i'am from Brazil, and I discovered your channel a short time ago, but with KZread's automatic subtitles I've been getting by, good job! Can you make some content about animations? Or someone who recommends something from your channel that you've already done.

This is great

Oh! Kevin Powell. I bless the day I followed your KZread channel.

Excellent video, as always! I noticed a major drawback with the low-res background image, in the case of a .png with transparency, we'll see blurred pixels from the low-res image behind the edges of the source image.

I like the low resolution to high resolution effect 😃

I don't think vertical-align: middle is a one-to-one replacement for display: block, but correct me if I'm mistaken. Per my understanding, display: block removes the line height from the image entirely (since block-level elements can't have a line height), while vertical-align keeps the line height but moves the image down vertically so it no longer seems like it has uneven spacing. Technically the image still has extraneous spacing, but now above and below as opposed to just below.

@xphstos_

7 ай бұрын

You're kinda right. If you use imagery in your site just for decoration. Then yes.. display block seems more reasonable reset but if we're talking about a blog site were most of the images live inside article's body then it's best to add display block when needed and keep vertical align middle for the rest. Although vertical align does behave like display block. There is no excess space on top or bottom if you use it. So why don't we use that as a default reset!? As a personal rule I try to avoid turning block elements to inline and vice versa. It feels like I'm using div with display: inline... it doesn't affect anything perfomance wise or semantically but it feels wrong!

@hovhadovah

7 ай бұрын

@@xphstos_ Hmm, I just tested in a jsfiddle and vertical-align: middle does appear to work the same way. I wonder _why_ this works, though. Does line height behave differently for images?

@nikolaypanayotov6941

7 ай бұрын

Vertical align top should remove it completely. Some other elements have this as well, for example

Built into my new project! ✅

Regarding of lowres version images: progressive jpeg exist. It loads in low quality first and gradually improves during loading. This is a very old feature and supported by all browsers. That's it, simply encode your jpegs as progressive and no extra html/css manipulations needed.

@r-i-ch

7 ай бұрын

How to? Do you need multiple jpgs?

@mk72v2oq

7 ай бұрын

@@r-i-ch advanced image viewers/editors simply have "progressive" option when saving jpeg. That's all, the image will be encoded in progressive mode, no extra manipulations required.

@KevinPowell

7 ай бұрын

I know, and you can even see that working here, but it still starts with the lowres one first, and then you can see the quality improving over that image as the better image loads in.

@mk72v2oq

7 ай бұрын

@@KevinPowell I mean to encode original image as progressive. The image in the video loads pixels sequentially top-to-bottom. A progressive image on the other hand starts with low-res version and gradually "emerges" improving in quality.

@Eckster

7 ай бұрын

Yeah, I'm a bit confused why this is better than progressive encoded images, I suppose it gives you better control over load priority and just how low quality the original one is? Seems less efficient though and definitely more inconvenient.

Cool!

wow this was super applicable to what I am doing at work today. I want an SVG from the server to be in place of the image until it loads.So with slight modification I can serve the SVG from my server that will be loaded with the html, until my image can load in. Thanks!!

Added this to one project. Now I need to make some small adjustments where images lack margin.

That background low-res hack reminds me of Netscape back in the day.

I did the low res solution already in 2015.. unbelievable that people just came up now with this. 😂

Instead of using a crappy/broken/low quality image, use a blurried version. Smooth color transition favor the jpeg algorithm. _comparation_ original image: 1 Mb low quality image: 49 kb blurried image: 15 Kb

@xorlop

7 ай бұрын

I would be interesting to try and convert to svg with a couple of squares then blur the svg

@zzord

7 ай бұрын

Or another option is to use blurhash. That's only a few bytes per image and looks very nice.

@KlaudiusL

7 ай бұрын

@@zzord Yeah .. nice catch. Thanks

@dealloc

7 ай бұрын

@@zzordAnd also relatively cheap to decode! I love Blurhash :)

I remember when some websites used to feature this low-res-then-hi-res images, but when I checked it had turned out that there's a special way of encoding in jpg: Progressive JPEG! Don't think it is supported in webp so we don't see it much these days. That also maybe because overall the internet speed is better than those days. But it does exactly this. Shows a low res version of the image and progressively enhances it!! All in a single image file, not making you store hi-res and low-res separately.

We added a background color placeholder in WP performance-lab plugin

at 7:05, did you chuckle at what you said? hahaha

If you have a lot of images, and a slow network, preloading low-res images may also not be great. You could also consider using blob urls which will add to the initial page weight, but should compress fairly well.

@clintquasar

7 ай бұрын

Perhaps lazy loading then.

@thekwoka4707

7 ай бұрын

No, just use srcset and sizes properly. And lazy loading too, of course.

@martinklasson1981

6 ай бұрын

​@@thekwoka4707 I just am not that fond of srcset/sizes - because they use the viewport and not the container as the "judge" of what image to load? I can not understand why there is a better native solution already for this.

My first big takeaway was that you can undock the dev tools. I've been wrestling with docking on the side vs underneath for years.

great

Wait, that shape-outside gives me an idea for a redesign that would work well with that style of positioning o:

Hey yall just a heads up to get that progressive image loading scan effect, I think your image needs to be interlaced. Otherwise, it will replace original all at once.

watched this on the subway. ironically i saw the lowres image part in a very low res video.

Pleease make a video of handling with browsers input autofill (how to change the way it styles) 🙏🏻

Interesting 🤔

8:10. What a nerd! Beautiful technique.

Hello Kevin, thanks for all the inspiration ✨️ Lighthouse in chrome devtools gives the advice to use srcset and avif format for optimized images. Would it be something you recommend in addition to current content of your wonderful video ?

@thekwoka4707

7 ай бұрын

Srcset is better 100%. This lowres placeholder thing is nonsense. Use srcset and sizes with a. Generous helping of options in webp, and all the loading issues are solved.

Nice video! I wonder what are the advantages of a low res placeholder vs a progresive jpg? Also in specific cases you don't want to have contents shifting may be better to use a transparent placeholder and an absolute object on top of it.

@tombyrer1808

7 ай бұрын

As suggested in the video, you can preload 'above the fold' placeholders. A very low resolution placeholder might be less kb than the first pass of a progressive image. Also, depending on your target browsers, might be better not to use jpegs, but only AVIF & WebP.

@hubyxreds

7 ай бұрын

@@tombyrer1808 I don't know the math behind the progressive scan but I'm certain that the first pass is smaller than a reduced image. Btw, I would stay away from the AVIF format for now until its compatibility improves.

This is so funny. I basically built the same fake progressive image image loader this morning. What'd be really cool if we'd had a pseudo class during loading - we could blur the background image or indicate loading indicator without javascript

The low res placeholder thing is a bad bandage. It just increases network congestion. Use a proper src-set and sizes attributes so that you srent acrually loading it massively oversized images, and the browser can adapt to poor network conditions.

If I have many images in my site, do I have to prefetch low-res images of them in head tag if I want to use them? Wouldn't it make a mess?

whats best practice as far as this vs like figure , picture, source stuff

In the hero image, wouldn't it negatively affect the lighthouse, for example?

Awesome tips! But I was just wondering... what is the advantage of a background-image over ?

@KevinPowell

7 ай бұрын

That was deprecated with the release of html5. The purpose of that was what we can do with srcset now, with several different versions. From what I understand, it's purpose wasn't to act as a placeholder, but was an alternative version that was lower res.

interesting

I love the background image idea, but how could I use this method as a carousel? And for a page that has multiple cards with carousels.

Just a shout-out to adam-7 pngs that have this progressive loading of a lowres version for an image, while loading the higher res, out of the box.

About the background-image trick: isn't it better to use progressive jpeg instead of messing with duplicated image files that may cause some SEO and maintenance issues?

Whatever happened to progressive JPEG? Doesn't that do the same thing without making two network connections?

@SebastianMares

7 ай бұрын

Just my thought

@HolgerNestmann

7 ай бұрын

nothing happened. They are still great. This is good for png, gifs or maybe user uploaded jpgs. HTTP2 helps on the connection overhead

@thekwoka4707

7 ай бұрын

It's also larger than a webp, so why bother?

Wouldn't it be better to apply this to picture, svg and video tag as well?

Thank you for the video, also 🇵🇸

@MatthewMichalsky

7 ай бұрын

🇮🇱❤

Is this applicable to SVG images inside the img tag?

Most hosting providers already include a built-in lazy load option. Great idea but more code and unnecessary in most cases.

If you leave it as display inline and you have it as an isolated element surely that loses the ability to use vertical margins, no? That could be problematic?! (Case for inline-block?)

Can I use width and height 100% + object-fit: cover/contain on image or it it bad practise

Is there a way to get rid of that broken image thingy and the border for missing images? (Specific use case only) I can use Javascript but a plain css/html option would be nice.

@KevinPowell

7 ай бұрын

You can use a psuedo element (::before and ::after) on images, which only shows up when an image is broken, otherwise it doesn't do anything. I haven't played around with that much though, so I'm not sure how support is across browsers

img { display: block; max-width:100%; height: auto; font-size: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; }

An image, by default, is an "overgrown character."

Why using the background image hack when we can use tag and have a low res image while big one is loading

Instead of the low res version I get a white background while the high res image is loading over it and I'm not sure why.

That was amazing Kevin, thanks face-blue-smilingface-blue-smiling

shape-margin... Yea I already see developer in the corpo having PR blocked with the PR changes requests like "why is this shape-margin is for? When we are not using it then it shouldn't be here"

I don't get why the shape-margin should be included in the img reset. If it's just for those special cases, why not specify it along with the float and stuff?

Would it be overkill (or bad SEO) to preface all alt text with 'Image:', e.g. alt="Image: range of hills"? This, along with italic text, would help to distinguish it from the surrounding text if image loading failed.

@thekwoka4707

7 ай бұрын

It's more just not appropriate. Alt text is not a description of the image (description is a separate atteibute). Alt text is supposed to communicate whatever the point of the image is, not describe what the image is. In this case, the hills has no point. So it is decorative and wouldn't have an alt, to be each compliment.

@najmantube

7 ай бұрын

@@thekwoka4707 That's a critique of the use of alt text in the video. My point was that, given the alt text did have some use and was correctly written, wouldn't prefixing the alt text with 'Image:' help people who had to read it on the screen (because image loading failed)?

@trevoreyre

6 ай бұрын

@@najmantube You usually don’t want to say it’s an image in your alt text. A screen reader will announce that the element is an image before reading the alt text, and a broken image will have the little broken image icon next to the alt text for sighted users. So in both cases, it’s already clear that it’s an image and including that in your alt text is redundant.

@najmantube

6 ай бұрын

@@trevoreyre You're right!

Eres un genio, piensas doblar el idioma al español para tus suscripciones latinos?

Would all of this work with a figure tag and multiple source-sets?

@KevinPowell

7 ай бұрын

For an image inside a figure, I don't see why it wouldn't work :)

height auto sometimes messes up in safari :/

Harry??? Harry???

if i'm on slow 3g network, last thing i need is to load extra low res images just because designer wanted to flex his css skills. fail!

Why eberybody makes low resolution images instead of using progressive jpeg?

@thekwoka4707

7 ай бұрын

Progressive jpg load slower, since they are larger, by a LOT, than webp

Hmmm is this really any better than a webp compressed with lazy load?

@HolgerNestmann

7 ай бұрын

yes. WebP doesnt offer progressive or deinterlaced loading. So having a couple of pixel large placeholder is still helping while the (albeit faster) loading webp arrives

@thekwoka4707

7 ай бұрын

No it's not. It's just worse. If you have proper srcsets sizes and loading attributes, then the image loading thing isn't an issue.

Isn't this extra loading of a low-res img redundant, since jpg already has this built-in, in its "progressive" property?

classic overcomplicating things from Kevin xD 😅

wassup guys

The real ultimate low-quality image placeholder technique is a progressive JPEG/JPEG-XL.

Instructions unclear. My images didn't load

image always drive me crazy, even the most basic styling.

Sometimes we just miss "lowsrc" 🤣

2023 - slow 3G?

Third

Second

first

Get serious 😂

CSS is pain

why purposefully add bloat? buy your customers an i9, then add all the bloat you want till then, keep your hands away from my cpu

This video needs no padding

overengineering

Pretty cool "trick/hack". I will start using it :D