A better image reset for your CSS

Подписаться 913 тыс.

Просмотров 106 тыс.

50% 1

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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 166

@WarrenGroom 6 месяцев назад

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

@CrispyCircuits 6 месяцев назад

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

@dom8429 6 месяцев назад

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

@TechnicJelle 6 месяцев назад

Wait what!? I thought that too!

@RayAndrewsDev 6 месяцев назад

Only realized that a few months ago myself :)

@CarlosHernandez101400 6 месяцев назад

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

@JosephCodette 6 месяцев назад

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 😊

@chainedbeauty 6 месяцев назад

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

@zarkasias 6 месяцев назад

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

@kaustavroy6542 6 месяцев назад

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 ❤

@Locklesh 6 месяцев назад

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

@HuynhLuong227 6 месяцев назад

great tricks, really thanks Kevin, love your content.

@pibbz13 6 месяцев назад

Thank you! This is so useful :D

@osaid56 4 месяца назад

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

@RakeshSingh-vl2mz 6 месяцев назад

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

@hovhadovah 6 месяцев назад

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_ 6 месяцев назад

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 6 месяцев назад

@@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 6 месяцев назад

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

@okelecomedyhouse6994 6 месяцев назад

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

@D7460N 6 месяцев назад

Perfect timing, sir.

@programingwithali2461 6 месяцев назад

Thanks for this content

@AndrewSmithDev 6 месяцев назад

I like the background image hack!

@valmirvirtuoso3796 6 месяцев назад

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

@spatialoptic 5 месяцев назад

Using this and it is great!

@xphstos_ 6 месяцев назад

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!

@Pompiduskus 6 месяцев назад

this is awesome !!!

@mk72v2oq 6 месяцев назад

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 6 месяцев назад

How to? Do you need multiple jpgs?

@mk72v2oq 6 месяцев назад

@@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 6 месяцев назад

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 6 месяцев назад

@@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 6 месяцев назад

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.

@houston61452 6 месяцев назад

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.

@MasterHobbitLoL 6 месяцев назад

Great video

@wardxela 6 месяцев назад

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 4 месяца назад

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

@lewisone 6 месяцев назад

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 2 месяца назад

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)

@serychristianrenaud 6 месяцев назад

Thankd 👍

@KlaudiusL 6 месяцев назад

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 6 месяцев назад

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

@zzord 6 месяцев назад

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

@KlaudiusL 6 месяцев назад

@@zzord Yeah .. nice catch. Thanks

@dealloc 6 месяцев назад

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

@manuelenng 6 месяцев назад

Oh! Kevin Powell. I bless the day I followed your RU-vid channel.

@enriquegrageda 6 месяцев назад

I like the low resolution to high resolution effect 😃

@LaughingInCorner 6 месяцев назад

This is great

@tenthlegionstudios1343 6 месяцев назад

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

@JohnBortins 6 месяцев назад

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

@crstnio 6 месяцев назад

Built into my new project! ✅

@EugeneKoshelev 5 месяцев назад

Cool!

@bendavies925 6 месяцев назад

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

@xorlop 6 месяцев назад

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.

@NebihTV 2 месяца назад

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

@VaibhavShete 6 месяцев назад

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.

@tonimaunde 6 месяцев назад

8:10. What a nerd! Beautiful technique.

@PBearne 6 месяцев назад

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

@davidcooper4327 4 месяца назад

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.

@Benjambles 6 месяцев назад

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 6 месяцев назад

Perhaps lazy loading then.

@thekwoka4707 6 месяцев назад

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.

@hubyxreds 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

@philibertetienne1747 6 месяцев назад

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 6 месяцев назад

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.

@incarnateTheGreat 6 месяцев назад

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

@henriquesalgueiro2744 6 месяцев назад

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

@kosmar 3 месяца назад

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

@nathanmiddleton1478 6 месяцев назад

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

@SebastianMares 6 месяцев назад

Just my thought

@HolgerNestmann 6 месяцев назад

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

@thekwoka4707 6 месяцев назад

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

@RhayvenBlood 6 месяцев назад

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

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

@paradoxify_ 6 месяцев назад

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?

@MaxWeir 6 месяцев назад

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 6 месяцев назад

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

@KevinPowell 6 месяцев назад

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.

@dj10schannel 3 месяца назад

Interesting 🤔

@HolgerNestmann 6 месяцев назад

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

@fabbahiense 4 месяца назад

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

@nomadshiba 6 месяцев назад

great

@Stoney_Eagle 6 месяцев назад

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 6 месяцев назад

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

@thekwoka4707 6 месяцев назад

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.

@PicSta 6 месяцев назад

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

@seabass_1 3 месяца назад

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

@jmsherry 6 месяцев назад

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

@najmantube 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

@@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 5 месяцев назад

@@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 5 месяцев назад

@@trevoreyre You're right!

@letshev 6 месяцев назад

Is this applicable to SVG images inside the img tag?

@Antimated 6 месяцев назад

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

@KevinPowell 6 месяцев назад

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

@cupcake4fia686 6 месяцев назад

Thank you for the video, also 🇵🇸

@MatthewMichalsky 6 месяцев назад

🇮🇱❤

@scryspc 4 месяца назад

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.

@dzigizord6567 3 месяца назад

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

@dasten123 6 месяцев назад

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?

@Tony.Nguyen137 6 месяцев назад

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

@sito8943 6 месяцев назад

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

@adam4813 6 месяцев назад

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.

@MonsterSmart 6 месяцев назад

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"

@mihao-runs 6 месяцев назад

height auto sometimes messes up in safari :/

@outpost31737 6 месяцев назад

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

@danish_ayoub 6 месяцев назад

interesting

@QwDragon 6 месяцев назад

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

@thekwoka4707 6 месяцев назад

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

@pinnaclewd 6 месяцев назад

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

@HolgerNestmann 6 месяцев назад

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 6 месяцев назад

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.