Bagaimana URL srcset diberi nama?

Setiap lebar menambahkan sufiks - w sebelum ekstensi berkas, mis. photo-640w.jpg.

Untuk apa atribut sizes?

Atribut ini memberi tahu peramban berapa banyak ruang yang ditempati gambar sehingga dapat memilih sumber yang tepat.

Generator Srcset

Bangun tag img responsif dengan srcset dan sizes.

URL gambar dasarLebar (px)Atribut sizesTeks alt

Keluaran

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Masukkan URL gambar dasar dan lebar target untuk menghasilkan tag <img> responsif dengan atribut srcset dan sizes.

Cara pakai

Masukkan URL gambar dasar.
Daftarkan lebar yang Anda inginkan, dipisahkan dengan koma.
Salin tag img responsif yang dihasilkan.

Pertanyaan umum

Bagaimana URL srcset diberi nama?: Setiap lebar menambahkan sufiks -<lebar>w sebelum ekstensi berkas, mis. photo-640w.jpg.
Untuk apa atribut sizes?: Atribut ini memberi tahu peramban berapa banyak ruang yang ditempati gambar sehingga dapat memilih sumber yang tepat.

Alat terkait

Pembuat Meta Tag
Pratinjau Open Graph
Generator Meta Viewport