Uploaded December 2023 | Updated September 2026, 2 hours ago

---

A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.

All credit goes to Harry Roberts, who originally shared this technique on Twitter.

Harry's Tweet: twitter.com/csswizardry/status/1717841334462005661
CodePen Demo: codepen.io/ZoranJambor/pen/JjxzYPa

Follow Harry Roberts:
✍️ Blog: csswizardry.com
🐦 Twitter: twitter.com/csswizardry

Get CSS Stickers Pack:
🔖 stickers.css-weekly.com

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Course Mastering Prettier & Stylelint
🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.

Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

📖 Chapters
00:00 Why you should use this technique
00:49 Demo setup
01:12 Fix distorted images
02:14 Fix empty space under images
03:02 Style alt text
03:59 Style low-quality image placeholders (LQIP)
05:07 Add margin for shape-outside

- Zoran Jambor
#css #cssbasics