A better image reset for your CSS

One of the most common resets in CSS is to set a max-width: 100% and a display: block on our images. In this video, I look at why it might also be a good idea to declare background-size, font-style, and shape-margin, among other things.
🔗 Links
✅ Harry Roberts post on Twitter: / 1717841334462005661
✅ Harry's article on low-quality image placeholders: csswizardry.com/2023/09/the-u...
✅ More on shape-margin and shape-outside: • Wrap text around any i...
⌚ Timestamps
00:00 - Introduction
00:50 - max-width
01:50 - vertical-align: middle
03:50 - height: auto
04:20 - font-style: italic
05:35 - background-size and background-repeat
09:29 - shape-margin
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@WarrenGroom]

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 KZbin, by a huge margin ❤️

[@CrispyCircuits]

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

[@dom8429]

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

[@TechnicJelle]

Wait what!? I thought that too!

[@RayAndrewsDev]

Only realized that a few months ago myself :)

[@CarlosHernandez101400]

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

[@JosephCodette]

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]

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

[@chainedbeauty]

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

[@kaustavroy6542]

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 ❤

[@zarkasias]

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

[@Locklesh]

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

[@HuynhLuong227]

great tricks, really thanks Kevin, love your content.

[@pibbz13]

Thank you! This is so useful :D

[@hovhadovah]

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_]

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]

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

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

[@lumynou5]

@@hovhadovah AFAIK, the behavior of line height on images is the same as on other inline elements. This works because an image aligns with the baseline of text by default, as the initial value of `vertical-align` is `baseline`, and there is space under the baseline reserved for letters like "g" -- both `display: block` and `vertical-align: middle` remove that space.

[@wardxela]

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]

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

[@D7460N]

Perfect timing, sir.

[@xphstos_]

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!

[@programingwithali2461]

Thanks for this content

[@AndrewSmithDev]

I like the background image hack!

[@osaid56]

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

[@mk72v2oq]

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]

How to? Do you need multiple jpgs?

[@mk72v2oq]

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

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]

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

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.

[@RakeshSingh-vl2mz]

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

[@okelecomedyhouse6994]

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

[@Pompiduskus]

this is awesome !!!

[@spatialoptic]

Using this and it is great!

[@MasterHobbitLoL]

Great video

[@lewisone]

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]

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)

[@houston61452]

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.

[@serychristianrenaud]

Thankd 👍

[@valmirvirtuoso3796]

Your channel is very good Kevin, congratulations, i'am from Brazil, and I discovered your channel a short time ago, but with KZbin'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.

[@NebihTV]

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

[@enriquegrageda]

I like the low resolution to high resolution effect 😃

[@LaughingInCorner]

This is great

[@JohnBortins]

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

[@KlaudiusL]

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]

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

[@zzord]

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

[@KlaudiusL]

@@zzord Yeah .. nice catch. Thanks

[@dealloc]

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

[@tenthlegionstudios1343]

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

[@manuelenng]

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

[@VaibhavShete]

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.

[@EugeneKoshelev]

Cool!

[@crstnio]

Built into my new project! ✅

[@PBearne]

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

[@bendavies925]

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

[@incarnateTheGreat]

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

[@Benjambles]

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]

Perhaps lazy loading then.

[@thekwoka4707]

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

[@martinklasson1981]

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

[@philibertetienne1747]

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]

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.

[@xorlop]

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.

[@hubyxreds]

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]

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]

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

[@davidcooper4327]

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.

[@henriquesalgueiro2744]

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

[@tonimaunde]

8:10. What a nerd! Beautiful technique.

[@RhayvenBlood]

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

[@nomadshiba]

great

[@dj10schannel]

Interesting 🤔

[@paradoxify_]

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?

[@kosmar]

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

[@nathanmiddleton1478]

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

[@SebastianMares]

Just my thought

[@HolgerNestmann]

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

[@thekwoka4707]

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

[@Stoney_Eagle]

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]

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

[@MaxWeir]

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.

[@ruittenbogaard-digital]

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

[@KevinPowell]

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.

[@seabass_1]

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

[@HolgerNestmann]

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

[@Antimated]

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

[@KevinPowell]

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

[@fabbahiense]

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

[@thekwoka4707]

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.

[@letshev]

Is this applicable to SVG images inside the img tag?

[@najmantube]

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]

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]

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

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

@@trevoreyre You're right!

[@PicSta]

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

[@DainSPb]

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?

[@Tony.Nguyen137]

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

[@scryspc]

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.

[@jmsherry]

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?)

[@dzigizord6567]

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

[@adam4813]

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.

[@danish_ayoub]

interesting

[@outpost31737]

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

[@dasten123]

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?

[@mihao-runs]

height auto sometimes messes up in safari :/

[@cupcake4fia686]

Thank you for the video, also 🇵🇸

[@MatthewMichalsky]

🇮🇱❤

[@QwDragon]

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

[@thekwoka4707]

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

[@pinnaclewd]

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

[@HolgerNestmann]

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]

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.

[@royerromero7u7]

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

[@MonsterSmart]

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"

[@ncmathsadist]

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

[@giannismentz3570]

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

[@rohitpariyar1095]

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

[@dienvidbriedis1184]

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!

[@sito8943]

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

[@NovaKirsch]

Harry??? Harry???

[@lucienchu9649]

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

[@lumynou5]

I wonder why this is called "optimization", does `display: block` have a worse performance? Since both can solve the problem, it seems no reason to use `vertical-align` because inline elements cannot have things like `margin: auto`.

[@brad1785]

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

[@hunin27]

wassup guys

[@junsu-ho]

classic overcomplicating things from Kevin xD 😅

[@kliMaLd]

2023 - slow 3G?

[@codeguy11]

Instructions unclear. My images didn't load

[@badcatdesign]

Sometimes we just miss "lowsrc" 🤣

[@MohammadAk-rx6kl]

Third

[@vivekv4250]

Second

[@BoobCheese]

first

[@funkologie]

Get serious 😂

[@Manic_Drone_Idiom]

This video needs no padding

[@rumisbadforyou9670]

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

[@mirabilis]

CSS is pain

[@cemondel]

overengineering

[@stillready6405]

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