Generator Srcset (Gambar responsif)

Hasilkan HTML srcset/sizes dari daftar lebar tanpa merusak LCP/CLS.

srcset

Overview

Generate multiple sizes and the corresponding srcset/sizes HTML to adopt responsive images.

How to use

  1. Load a source image.
  2. Specify a list of required widths.
  3. Copy the generated HTML.

Use cases

  • Optimize article images.
  • Provide multiple resolutions for hero images.
  • Reduce transfer for galleries/cards.

Tips & knowledge

  • Make sizes match your actual layout.
  • Use suitable quality per width for more savings.
  • Combine with loading="lazy" for better LCP.