Generator Srcset

Buat srcset, sizes, dan markup picture di satu tempat

Menulis markup gambar responsif secara manual itu merepotkan — daftar srcset, atribut sizes yang harus cocok, blok <picture> dengan fallback WebP dan AVIF — dan satu salah ketik saja membuat browser diam-diam mengunduh file yang salah. Srcset generator ini membangun seluruh tag untuk Anda: masukkan nama file dan lebar-lebar yang diinginkan, dan alat ini menghasilkan elemen <img> atau <picture> responsif lengkap dan siap salin dengan descriptor yang benar, lazy loading, dan async decoding.

Ini adalah generator gambar responsif gratis yang berjalan sepenuhnya di browser — tanpa daftar, tidak ada yang diunggah, dan tetap berfungsi offline setelah dimuat.

srcset dan sizes, dijelaskan

Gambar responsif membutuhkan dua bagian yang bekerja bersama. srcset adalah daftar file beserta lebar aslinya — hero-640.jpg 640w memberi tahu browser bahwa file itu lebarnya 640 piksel. sizes menjelaskan seberapa lebar gambar akan ditampilkan dalam tata letak Anda, misalnya (max-width: 600px) 100vw, 600px. Browser membaca sizes, mengalikannya dengan device pixel ratio, lalu mengunduh kandidat srcset yang paling mendekati.

Ganti descriptor ke x dan Anda mendapat markup berbasis kepadatan piksel — logo.png 1x, logo@2x.png 2x — ideal untuk gambar berukuran tetap seperti logo dan ikon di layar retina, di mana descriptor w dan sizes justru berlebihan.

Kapan menggunakan elemen picture sebagai gantinya

srcset biasa menangani resolution switching — gambar yang sama dalam ukuran berbeda. Gunakan elemen <picture> ketika Anda butuh kendali lebih: menyajikan format next-gen dengan fallback, atau art direction (crop yang berbeda di mobile dibanding desktop).

Dalam mode <picture>, alat ini menghasilkan <source type="image/avif">, <source type="image/webp">, dan fallback <img> JPEG atau PNG, sehingga browser modern mendapat format terkecil dan browser lama tetap melihat gambar.

Resize gambar Anda ke setiap lebar, secara lokal

Markup hanyalah setengah pekerjaan — Anda masih butuh file yang benar-benar sudah di-resize. Jatuhkan sebuah gambar ke dalam alat ini dan ia akan me-resize-nya ke setiap lebar yang Anda tentukan langsung di HTML canvas, lalu membiarkan Anda mengunduh seluruh set dengan nama file yang persis cocok dengan markup yang dihasilkan (hero-320.jpg, hero-640.jpg, dan seterusnya).

Tidak ada upload dan tidak ada build pipeline. Karena memperbesar melebihi ukuran asli hanya menambah blur, alat ini menandai lebar mana pun yang lebih besar dari sumber Anda sehingga set gambar Anda tetap akurat.

Perbandingan dengan Squoosh, Responsivebreakpoints.com, dan CloudFlare Image Resize

Squoosh (dari Google) unggul dalam kompresi dan konversi satu gambar — sangat bagus untuk memilih setelan kualitas yang tepat untuk WebP atau AVIF. Tetapi ia tidak menghasilkan markup srcset atau tag gambar responsif lengkap untuk ditempel ke HTML. Ini alat kompresi, bukan generator markup.

Responsivebreakpoints.com oleh Cloudinary mengunggah gambar Anda ke server Cloudinary untuk menghitung breakpoint optimal dan menghasilkan gambar yang sudah di-resize. Hasilnya solid, tetapi file Anda meninggalkan perangkat dan tunduk pada ketentuan Cloudinary. Cloudflare Image Resize dan Imgix adalah layanan CDN — keduanya memproses gambar saat pengiriman tetapi membutuhkan setup akun, integrasi API, dan tagihan berkelanjutan. Srcset generator UtiloKit berada di posisi berbeda: ia menghasilkan markup HTML lengkap dan me-resize gambar secara lokal di sisi klien, tanpa upload, tanpa akun, tanpa biaya, dan tanpa batas ukuran file. Berguna saat Anda ingin markup atau file hasil resize langsung jadi, tanpa perlu memasang infrastruktur.

Lebar, breakpoint, dan Core Web Vitals

Set lebar yang andal adalah 320, 640, 960, 1280, dan 1920, kira-kira menggandakan di setiap langkah untuk mencakup ponsel hingga layar retina besar; tambahkan 2560 untuk hero full-bleed. Menyajikan gambar berukuran pas adalah salah satu kemenangan terbesar untuk Core Web Vitals: byte yang lebih sedikit berarti Largest Contentful Paint yang lebih cepat, dan menambahkan atribut width serta height mencegah pergeseran tata letak (CLS) yang merugikan pengguna maupun peringkat.

Tambahkan loading="lazy" pada gambar di luar layar agar hanya dimuat saat digulir ke tampilan, dan fetchpriority="high" pada hero Anda agar dimuat lebih dulu — keduanya cukup satu klik toggle di sini.

Privat, instan, dan offline — berfungsi di perangkat apa pun

Tidak ada yang perlu diinstal dan tidak ada akun untuk dibuat. Setiap tag dirakit di browser Anda saat Anda mengetik, dan gambar apa pun yang Anda resize diproses secara lokal dengan API canvas — tidak ada yang pernah diunggah. Generator ini bekerja offline setelah halaman dimuat, sehingga Anda bisa membangun markup img srcset dan <picture> responsif di mana saja — di pesawat, di ponsel, tanpa Wi-Fi.

Cara browser sebenarnya memilih gambar dari srcset

Memahami algoritma pemilihan browser menjelaskan mengapa srcset dan sizes sama-sama diperlukan. Ketika browser mem-parsing tag <img>, ia melewati tiga langkah sebelum mengunduh apa pun. Pertama, ia membaca atribut sizes dan mencari kondisi media pertama yang cocok dengan viewport saat ini — misalnya sizes="(max-width: 768px) 100vw, 50vw" berarti gambar menempati 100% viewport di mobile dan 50% di layar yang lebih lebar. Kedua, ia mengalikan lebar CSS itu dengan device pixel ratio layar (1× di monitor standar, 2× di kebanyakan ponsel modern, 3× di perangkat Android kelas atas) untuk mendapatkan jumlah piksel target yang dibutuhkan. Ketiga, ia memindai daftar srcset dan mengunduh kandidat yang descriptor lebarnya (w) paling mendekati target tersebut tanpa turun di bawahnya.

Seluruh perhitungan ini terjadi sebelum satu byte data gambar pun diambil, itulah sebabnya petunjuk sizes sangat penting untuk efisiensi — hilangkan itu dan browser mengasumsikan gambar selebar 100vw, hampir selalu menyebabkannya mengambil file yang jauh lebih besar dari yang dibutuhkan pada tata letak desktop atau tablet. Descriptor lebar (w) adalah pilihan tepat untuk gambar fluid yang mengikuti tata letak karena memungkinkan browser memperhitungkan baik lebar tata letak maupun kepadatan piksel secara dinamis. Descriptor kepadatan (x) adalah pilihan tepat untuk elemen UI berukuran tetap — ikon 48 px yang harus tampak tajam di layar retina hanya butuh icon.png 1x, icon@2x.png 2x dan tidak lebih. Mencampur kedua jenis descriptor dalam satu atribut srcset adalah HTML yang tidak valid.

Satu nuansa penting: spesifikasi secara eksplisit mengizinkan browser menyajikan gambar yang lebih besar dari yang sebenarnya dibutuhkan jika gambar itu sudah tersimpan di cache. Browser yang sudah mengunduh versi 1280w untuk viewport lebar diizinkan menggunakannya kembali saat jendela diubah ukurannya ke mobile, alih-alih mengunduh ulang file 640w. Ini perilaku yang disengaja — Anda memberikan petunjuk, bukan perintah — sehingga Anda mungkin tidak melihat pergantian file di semua skenario pengujian.

Format gambar modern: JPEG, PNG, WebP, AVIF, dan JPEG XL dibandingkan

JPEG (Joint Photographic Experts Group, 1992) adalah dasarnya: kompresi lossy dengan warna 8-bit dan tanpa dukungan transparansi, unggul untuk foto di mana sedikit kehilangan kualitas nyaris tak terlihat. PNG (1996) menggunakan kompresi lossless dan mendukung transparansi penuh lewat alpha channel, menjadikannya pilihan tepat untuk logo, ikon, screenshot, dan grafik dengan warna datar atau tepi tegas di mana artefak kompresi akan terlihat. Tidak satu pun dari kedua format ini beradaptasi dengan baik terhadap kebutuhan pengiriman modern — file JPEG sering lebih besar dari perlunya, dan file PNG untuk foto berukuran sangat besar.

WebP (Google, 2010) mendukung mode lossy maupun lossless plus transparansi, dan menghasilkan file yang kira-kira 25–34% lebih kecil dari JPEG pada kualitas persepsi yang setara. Format ini sudah didukung penuh di Chrome, Firefox, Edge, dan Safari sejak 2020, menjadikannya default praktis untuk proyek baru saat ini. AVIF (AV1 Image File Format, 2019) mendorong kompresi lebih jauh lagi — biasanya 50% lebih kecil dari JPEG pada kualitas yang sama — dan juga mendukung transparansi serta HDR wide-colour. Chrome, Firefox, dan Safari semuanya mendukungnya sejak 2023, meski encoding-nya lebih lambat dan ada beberapa kasus tepi profil warna yang perlu diuji. Pola modernnya adalah menawarkan AVIF lebih dulu, WebP kedua, dan JPEG sebagai fallback terakhir di dalam elemen <picture>, sehingga setiap browser mendapat format terkecil yang dipahaminya.

JPEG XL (standar ISO 2022) menjanjikan kompresi bahkan lebih baik dari AVIF, rekompresi JPEG lossless (Anda bisa menyimpan bit asli di dalam file JXL), dan decoding progresif yang sangat baik. Namun, per 2024 dukungan browser masih terbatas — Chrome menghapus flag eksperimentalnya dan masa depan format ini di Chromium tidak pasti, meski Firefox dan Safari telah menambahkan dukungan. Untuk penggunaan produksi saat ini, WebP dan AVIF adalah pilihan aman; JPEG XL layak dipantau ke depannya.

Elemen <picture>: art direction dan pergantian format

Elemen <picture> mengatasi dua masalah yang tidak bisa dipecahkan oleh srcset biasa pada <img>. Yang pertama adalah art direction: menampilkan crop potret yang ketat di mobile dan komposisi landscape yang lebih lebar di desktop. Setiap elemen anak <source> menerima atribut media — <source media="(max-width: 600px)" srcset="portrait-400.jpg 400w, portrait-800.jpg 800w"> — dan browser memuat source pertama yang kondisi medianya cocok, jatuh kembali ke <img> biasa di akhir. Ini secara fundamental berbeda dari resolution switching srcset: Anda menentukan gambar mana yang dimuat, bukan menyerahkannya pada kebijaksanaan browser.

Masalah kedua adalah pergantian format dengan degradasi yang mulus. Atribut type pada elemen <source> memberi tahu browser tipe MIME dari file-file tersebut: <source type="image/avif" srcset="hero.avif 1280w, hero-640.avif 640w">. Browser mencoba setiap source secara berurutan dan menggunakan format pertama yang didukungnya, sehingga pola modern kanonisnya adalah: source AVIF → source WebP → fallback <img> JPEG/PNG. Ini memberikan WebP yang lebih kecil bagi browser tanpa dukungan AVIF, dan JPEG bagi browser tanpa dukungan WebP (nyaris tidak ada saat ini, kecuali iOS Safari lama). Tag <img> selalu wajib ada sebagai anak terakhir dari <picture> — itulah yang benar-benar dirender dan membawa alt, width, height, loading, dan fetchpriority; elemen <source> hanya menyediakan kandidat alternatif.

Anda bisa menggabungkan kedua teknik: source dengan art direction masing-masing bisa membawa srcset-nya sendiri untuk resolution switching, sehingga source potret mobile mungkin mendaftar versi 400w, 800w, dan 1200w, sementara source landscape desktop mendaftar versi 800w, 1280w, dan 1920w. Markup-nya cepat menjadi bertele-tele, dan itulah persis alasan mengapa generator seperti ini ada.

Core Web Vitals: LCP, CLS, dan dampak gambar responsif

Largest Contentful Paint (LCP) mengukur waktu dari mulai navigasi hingga browser merender elemen terbesar yang terlihat — hampir selalu gambar hero atau gambar di atas lipatan layar. Google menggunakan LCP sebagai sinyal peringkat: skor di bawah 2,5 detik dinilai 'Baik', di atas 4 detik dinilai 'Buruk'. Menyajikan gambar 1400 px ke layar mobile 375 px memaksa browser mengunduh kira-kira dua belas kali lebih banyak data dari yang dibutuhkan; srcset yang disusun dengan benar memangkas transfer itu ke file 400 px dan bisa memangkas LCP di mobile hingga lebih dari satu detik. Setiap lebar yang Anda tambahkan ke srcset adalah potensi peningkatan LCP pada perangkat yang jatuh dalam rentang tersebut.

Dua atribut sangat penting khusus untuk gambar LCP. fetchpriority="high" memberi tahu browser untuk memintanya dengan prioritas jaringan tertinggi, mendahului sumber daya lain yang ditemukan belakangan saat parsing. Dan Anda tidak boleh menambahkan loading="lazy" pada gambar LCP Anda — lazy loading menunda pengambilan hingga elemen mendekati viewport, yang untuk hero di atas lipatan berarti jaminan penundaan sebelum unduhan apa pun dimulai. Untuk semua gambar lain — apa pun yang mulai di luar layar — loading="lazy" adalah kemenangan gratis: browser sepenuhnya melewati pengambilan tersebut hingga pengguna menggulir mendekat, mengurangi bobot halaman dan persaingan jaringan selama jendela pemuatan yang kritis.

Cumulative Layout Shift (CLS) adalah Core Web Vital terkait gambar lainnya. Ketika browser memuat gambar tanpa mengetahui dimensinya, ia harus me-reflow halaman begitu gambar tiba, mendorong konten ke bawah dan menghasilkan CLS. Perbaikannya sederhana tapi mudah terlupa: selalu sertakan atribut width dan height pada tag <img> Anda. Browser modern menggunakannya untuk mencadangkan ruang dalam tata letak sebelum gambar dimuat, menghilangkan pergeseran tersebut. Jika gambar Anda fluid (diskalakan dengan CSS max-width: 100%), tambahkan height: auto di stylesheet Anda sehingga browser menggunakan rasio aspek intrinsik dari atribut HTML alih-alih mengunci ke tinggi piksel tetap. Kombinasi ini — dimensi HTML plus height: auto di CSS — adalah perbaikan CLS standar untuk gambar responsif.