Gambar Tampilan Retina: Menyajikan Grafis Tajam di Layar High-DPI

Terakhir diperbarui: June 28, 2026

Layar Retina dan high-DPI memasukkan lebih banyak piksel ke ruang fisik yang sama, sehingga gambar yang ukurannya disiapkan untuk layar standar terlihat lembut dan berpiksel di layar tersebut. Menyajikan gambar tajam pada layar ini berarti menyiapkan versi resolusi lebih tinggi dan memberi tahu browser kapan harus menggunakannya. Panduan ini membahas alur kerja 2x dan 3x, markup srcset yang mengirimkan file yang tepat, serta keseimbangan antara ketajaman dan bobot halaman.

Jawaban cepat: cara membuat gambar tajam di layar retina?

Buat versi gambar pada dua kali (dan untuk ponsel, tiga kali) dimensi piksel tampilan, lalu gunakan atribut srcset untuk menawarkan kedua versi tersebut. Browser hanya memuat file resolusi tinggi pada layar yang dapat menampilkannya, sehingga layar standar tidak mengunduh byte tambahan. Foto yang ditampilkan dengan lebar 400 piksel membutuhkan sumber 800 piksel (2x) untuk retina. Ekspor keduanya dengan kompresi yang sesuai — file 2x lebih besar tetapi tidak dua kali lipat, karena efisiensi kompresi meningkat seiring resolusi.

Apa itu tampilan retina atau high-DPI?

Tampilan retina adalah istilah pemasaran untuk layar dengan kepadatan piksel cukup tinggi sehingga mata tidak dapat membedakan piksel individual pada jarak pandang normal. Apple yang menciptakan istilah ini, tetapi konsepnya berlaku untuk sebagian besar ponsel, tablet, dan laptop modern. Ukuran praktisnya adalah device pixel ratio (DPR) — berapa banyak piksel fisik yang mewakili satu piksel CSS.

• Layar 2x membutuhkan dua kali lipat piksel linear (empat kali total) agar terlihat tajam.
• Layar ponsel 3x membutuhkan tiga kali lipat piksel linear.
• Layar standar 1x mengunduh gambar dasar dan tidak membuang apa pun.

Panduan Mozilla tentang device pixel ratio mendokumentasikan cara browser melaporkan dan menggunakan DPR, yang merupakan fondasi dari setiap strategi gambar retina.

Bagaimana membuat versi gambar 2x dan 3x?

Mulai dari sumber resolusi tinggi dan ubah ukurannya ke setiap target alih-alih meningkatkan ukuran file kecil. Foto yang ditujukan untuk slot tampilan lebar 400 piksel membutuhkan versi 400px (1x) dan 800px (2x), serta versi 1200px (3x) untuk ponsel.

1. Mulai dari sumber yang setidaknya sebesar target terbesar Anda (3x).
2. Ubah ukurannya ke lebar 1x, 2x, dan 3x.
3. Kompres setiap versi — file 2x dan 3x terkompresi lebih baik per piksel.
4. Ekspor sebagai WebP untuk file berkualitas tinggi terkecil.
5. Sajikan semua versi dan biarkan browser yang memilih.

• Jangan pernah meningkatkan ukuran gambar kecil ke 2x — itu tetap lembut dan hanya menjadi lebih berat.
• File 2x biasanya kurang dari dua kali lipat byte 1x karena kompresi yang lebih baik.
• Versi 3x paling penting untuk ponsel dengan layar kecil dan padat.

Bagaimana menyajikan versi yang tepat dengan srcset?

Atribut srcset pada tag <img> memberi tahu browser file mana yang harus dimuat berdasarkan DPR layar. Browser menangani pemilihan, jadi Anda menyediakan opsi dan markupnya.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Teks alternatif deskriptif"
  width="400" height="300"
/>

• Deskriptor 1x, 2x, 3x memetakan file ke rasio piksel perangkat.
• Browser hanya memuat versi yang cocok dengan layar.
• Selalu sertakan lebar dan tinggi untuk mencegah pergeseran tata letak.
• Atribut src adalah cadangan (fallback) untuk browser lama.

Untuk gambar responsif yang juga mengubah dimensi melintasi lebar layar, gabungkan srcset dengan atribut sizes dan deskriptor lebar (400w, 800w) alih-alih deskriptor DPR. Panduan gambar responsif membahas pola yang lebih canggih itu, dan panduan SEO gambar menjelaskan bagaimana gambar yang tajam dan berukuran benar juga membantu kinerja pencarian.

Kapan menggunakan SVG alih-alih raster

Untuk logo, ikon, dan ilustrasi dengan bentuk datar, Anda dapat menghindari seluruh masalah 2x/3x dengan menggunakan SVG. Grafis vektor dapat diskalakan tanpa batas dengan tanpa penalti resolusi — file SVG yang sama tajam di monitor 1x dan ponsel 3x, karena digambar dari matematika daripada disimpan sebagai piksel.

SVG adalah jawaban yang tepat kapan pun gambar terbuat dari bentuk daripada detail fotografi. Pertukaran nilainya adalah bahwa SVG perlu dioptimalkan — metadata yang tidak digunakan dan sampah editor membengkakkannya — dan panduan SVG ke PNG membahas alur kerja saat Anda memang membutuhkan cadangan raster untuk lingkungan yang tidak dapat merender vektor. Untuk situs merek dengan logo di header, SVG menghilangkan pertanyaan retina sepenuhnya untuk elemen itu.

Menguji gambar retina Anda

Menghasilkan file adalah setengah dari pekerjaan; memverifikasi bahwa file tersebut benar-benar dimuat dengan benar adalah setengah lainnya. Beberapa pemeriksaan memastikan pengaturan berfungsi daripada diam-diam menyajikan file yang salah.

1. Buka halaman di perangkat retina atau atur DPR browser ke 2x di dev tools.
2. Periksa elemen gambar dan konfirmasi currentSrc yang dimuat adalah file 2x atau 3x.
3. Beralih ke DPR 1x dan konfirmasi bahwa itu memuat file 1x sebagai gantinya.
4. Periksa tab jaringan untuk memverifikasi hanya satu versi yang diunduh per layar.
5. Lihat pada 100% di layar retina dan konfirmasi gambar tajam, tidak lembut.

Pengaturan device pixel ratio dev tools browser memungkinkan Anda menguji tanpa perangkat fisik, meskipun layar retina asli adalah bukti akhir. Mode kegagalan umum adalah kesalahan ketik markup dalam srcset yang membuat browser kembali ke src dasar, yang terlihat lembut di retina tanpa menimbulkan error. Tab jaringan menangkap ini segera — jika Anda melihat file 1x dimuat pada layar 2x, maka srcset belum terpasang dengan benar.

Menyeimbangkan ketajaman dan bobot halaman

Jebakan dengan gambar retina adalah menyajikan file resolusi tinggi ke setiap layar, yang menggandakan atau melipatgandakan bobot halaman untuk pengguna yang tidak dapat melihat perbedaannya. Pendekatan srcset menghindari ini, tetapi hanya jika Anda benar-benar menghasilkan versi yang lebih kecil dan merujuknya. Satu file 3x yang disajikan kepada semua orang adalah kesalahan paling umum.

Panduan web.dev tentang gambar responsif mendokumentasikan dampak kinerja dari melakukan ini dengan benar, dan panduan Core Web Vitals menghubungkan bobot gambar langsung ke metrik LCP yang memengaruhi peringkat. Tujuannya adalah ketajaman di tempat ia terlihat dan pengendalian di tempat lain — biarkan browser memilih, dan hasilkan setiap versi sehingga ia memiliki sesuatu yang bagus untuk dipilih.

Pertanyaan yang sering diajukan

Bagaimana cara membuat gambar tajam di layar retina?

Sajikan versi 2x (dan opsional 3x) dari gambar raster pada ukuran tampilan, menggunakan srcset agar browser memilih file yang tepat berdasarkan rasio piksel perangkat. Gambar 1x di layar retina terlihat lembut; varian 2x memulihkan ketajaman.

Apakah saya membutuhkan gambar 2x untuk setiap grafis?

Untuk grafis tajam dan foto hero, ya — layar retina akan menunjukkan kelembutan jika tidak. Untuk gambar dekoratif atau di bawah lipatan (below-the-fold), satu file 1x seringkali sudah cukup. Sajikan keduanya dengan srcset agar perangkat non-retina tidak mengunduh file besar.

Kapan saya harus menggunakan SVG alih-alih raster 2x?

Untuk logo, ikon, dan grafis datar, ya — SVG independen resolusi dan tetap tajam pada ukuran apa pun tanpa file tambahan. Untuk foto, raster (dengan varian 2x) masih pilihan yang tepat. Lihat panduan SVG ke PNG.

Bagaimana cara menyajikan gambar retina?

Gunakan srcset dengan sumber 1x dan 2x (dan opsional 3x), membiarkan browser memilih berdasarkan rasio piksel perangkat. Kirimkan 1x sebagai src default agar browser lama dapat kembali dengan bersih. Browser hanya mengunduh varian yang dibutuhkannya.

Apakah srcset memperlambat halaman?

Tidak — browser hanya mengunduh satu varian yang dibutuhkan, jadi layar kecil mendapatkan file kecil. Tanpa srcset, setiap perangkat mengunduh file terbesar. srcset menghemat byte, tidak menambahnya.