📝Markdown & HTML

Responsive Image Pattern

Standard code for high-performance images.

Explanation

Using lazy loading and decoding ensures images don't slow down your page load.

Examples

Safe Image
Output
<img src="..." loading="lazy" decoding="async" alt="...">

Code Examples

HTML5 
<img 
  src="photo-large.webp"
  srcset="photo-small.webp 400w, photo-large.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Descriptive text"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
>

💡 Tips

  • Always include width and height to prevent layout shifts (CLS)
  • Use WebP or AVIF for much smaller file sizes
  • loading="lazy" is supported in all modern browsers natively

⚠️ Common Pitfalls

  • Failing to provide a fallback src for very old browsers
← Back to All Templates