A better image reset for your CSS
ฝัง
- เผยแพร่เมื่อ 9 มิ.ย. 2024
- 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 TH-cam 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!
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 TH-cam, by a huge margin ❤️
I thought the same thing! Been watching for a long time.
WHAT thats crazy I never noticed but it makes so much sense now
Wait what!?
I thought that too!
Only realized that a few months ago myself :)
Well, crap 😂😂. I never understood why he says hello to just one friend first. It turns out I need my hearing checked. 😂😂
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 😊
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 ❤
Fantastic content. I love watching your videos. I learn something new pretty much everytime I watch one. You're a great teacher!
This is great!! The explanation shows how this reset can really help improve performance.
I saw the video and immediately implemented it in a project. Thanks for sharing as always! ❤
maaaaan this is veeeeeeeeery nice video, it made me think again about my understanding of this stuff, very beneficial, thanks a lot man.
great tricks, really thanks Kevin, love your content.
So much informative
I am hell impressed by your knowledge thank you sir❤
Thank you! This is so useful :D
Perfect timing, sir.
Thanks for this content
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.
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!
@@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?
Vertical align top should remove it completely. Some other elements have this as well, for example
Using this and it is great!
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.
Yea, this technique will really be helpful. I personally have tried to do it before but failed 😭
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
I like the background image hack!
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!
this is awesome !!!
Great video
Your channel is very good Kevin, congratulations, i'am from Brazil, and I discovered your channel a short time ago, but with TH-cam'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.
Thankd 👍
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.
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.
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)
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.
How to? Do you need multiple jpgs?
@@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.
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.
@@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.
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.
This is great
I like the low resolution to high resolution effect 😃
Oh! Kevin Powell. I bless the day I followed your TH-cam channel.
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!!
Built into my new project! ✅
We added a background color placeholder in WP performance-lab plugin
Added this to one project. Now I need to make some small adjustments where images lack margin.
Cool!
8:10. What a nerd! Beautiful technique.
That background low-res hack reminds me of Netscape back in the day.
at 7:05, did you chuckle at what you said? hahaha
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
I would be interesting to try and convert to svg with a couple of squares then blur the svg
Or another option is to use blurhash. That's only a few bytes per image and looks very nice.
@@zzord Yeah .. nice catch. Thanks
@@zzordAnd also relatively cheap to decode! I love Blurhash :)
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.
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.
I did the low res solution already in 2015.. unbelievable that people just came up now with this. 😂
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.
Pleease make a video of handling with browsers input autofill (how to change the way it styles) 🙏🏻
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 ?
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.
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.
@@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.
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.
Perhaps lazy loading then.
No, just use srcset and sizes properly.
And lazy loading too, of course.
@@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.
Interesting 🤔
watched this on the subway. ironically i saw the lowres image part in a very low res video.
great
Wait, that shape-outside gives me an idea for a redesign that would work well with that style of positioning o:
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?
In the hero image, wouldn't it negatively affect the lighthouse, for example?
whats best practice as far as this vs like figure , picture, source stuff
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.
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
Whatever happened to progressive JPEG? Doesn't that do the same thing without making two network connections?
Just my thought
nothing happened. They are still great. This is good for png, gifs or maybe user uploaded jpgs. HTTP2 helps on the connection overhead
It's also larger than a webp, so why bother?
Awesome tips! But I was just wondering... what is the advantage of a background-image over ?
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.
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?
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.
Can I use width and height 100% + object-fit: cover/contain on image or it it bad practise
Wouldn't it be better to apply this to picture, svg and video tag as well?
Why using the background image hack when we can use tag and have a low res image while big one is loading
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 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?)
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.
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
Is this applicable to SVG images inside the img tag?
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?
interesting
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.
Would all of this work with a figure tag and multiple source-sets?
For an image inside a figure, I don't see why it wouldn't work :)
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.
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.
@@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)?
@@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.
@@trevoreyre You're right!
Thank you for the video, also 🇵🇸
🇮🇱❤
height auto sometimes messes up in safari :/
img {
display: block;
max-width:100%;
height: auto;
font-size: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 1rem;
}
Most hosting providers already include a built-in lazy load option. Great idea but more code and unnecessary in most cases.
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"
Why eberybody makes low resolution images instead of using progressive jpeg?
Progressive jpg load slower, since they are larger, by a LOT, than webp
An image, by default, is an "overgrown character."
Isn't this extra loading of a low-res img redundant, since jpg already has this built-in, in its "progressive" property?
Hmmm is this really any better than a webp compressed with lazy load?
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
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.
Eres un genio, piensas doblar el idioma al español para tus suscripciones latinos?
Instructions unclear. My images didn't load
Harry??? Harry???
classic overcomplicating things from Kevin xD 😅
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!
wassup guys
The real ultimate low-quality image placeholder technique is a progressive JPEG/JPEG-XL.
image always drive me crazy, even the most basic styling.
2023 - slow 3G?
Third
Sometimes we just miss "lowsrc" 🤣
first
Second
This video needs no padding
Get serious 😂
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
Pretty cool "trick/hack". I will start using it :D
CSS is pain
overengineering