Imej Paparan Retina: Menyediakan Grafik Tajam pada Skrin High-DPI

Terakhir dikemaskini: June 28, 2026

Skrin Retina dan skrin DPI yang tinggi memuatkan lebih banyak piksel dalam ruang fizikal yang sama, jadi imej yang disesuaikan untuk skrin standard kelihatan lembut dan berpiksel pada skrin tersebut. Menyajikan imej tajam pada skrin ini bermakna menyediakan versi resolusi yang lebih tinggi dan memberitahu pelayar bila untuk menggunakannya. Panduan ini meliputi aliran kerja 2x dan 3x, sintaks markup srcset yang menyampaikan fail yang betul, dan keseimbangan antara ketajaman dan berat halaman.

Jawapan ringkas: bagaimana membuat imej tajam pada skrin retina?

Cipta versi imej pada dua kali (dan untuk telefon, tiga kali) dimensi piksel paparan, kemudian gunakan atribut srcset untuk menawarkan kedua-dua versi tersebut. Pelayar hanya memuat turun fail resolusi tinggi pada skrin yang boleh menunjukkannya, jadi paparan standard tidak akan memuat turun bait tambahan. Foto yang dipaparkan pada lebar 400 piksel memerlukan sumber 800 piksel (2x) untuk retina. Eksport kedua-duanya dengan mampatan yang sesuai — fail 2x lebih besar tetapi bukan dua kali ganda, kerana kecekapan mampatan bertambah baik dengan resolusi.

Apakah itu paparan retina atau DPI tinggi?

Paparan retina adalah istilah pemasaran untuk skrin dengan ketumpatan piksel yang cukup tinggi sehingga mata tidak dapat membezakan piksel individu pada jarak pandangan normal. Apple mencipta istilah ini, tetapi konsepnya terpakai kepada kebanyakan telefon, tablet, dan komputer riba moden. Ukuran praktikal ialah nisbah piksel peranti (DPR) — berapa banyak piksel fizikal yang mewakili satu piksel CSS.

• Skrin 2x memerlukan dua kali ganda piksel linear (empat kali ganda jumlah) untuk kelihatan tajam.
• Skrin telefon 3x memerlukan tiga kali ganda piksel linear.
• Skrin standard 1x memuat turun imej asas dan tidak membazir apa-apa.

Panduan Mozilla mengenai nisbah piksel peranti mendokumentasikan cara pelayar melaporkan dan menggunakan DPR, yang merupakan asas setiap strategi imej retina.

Bagaimana anda mencipta versi imej 2x dan 3x?

Mulakan daripada sumber resolusi tinggi dan saizkan semula ia ke setiap sasaran berbanding meningkatkan saiz fail kecil. Foto yang ditujukan untuk slot paparan lebar 400 piksel memerlukan versi 400px (1x) dan 800px (2x), dan versi 1200px (3x) untuk telefon.

1. Mulakan daripada sumber sekurang-kurangnya sebesar sasaran terbesar anda (3x).
2. Saizkan semula ke lebar 1x, 2x, dan 3x.
3. Mampatkan setiap versi — fail 2x dan 3x mampat lebih baik bagi setiap piksel.
4. Eksport sebagai WebP untuk fail berkualiti tinggi yang paling kecil.
5. Sediakan semua versi dan biarkan pelayar memilih.

• Jangan pernah meningkatkan saiz imej kecil ke 2x — ia kekal lembut dan hanya menjadi lebih berat.
• Fail 2x biasanya kurang daripada dua kali ganda bait 1x kerana mampatan yang lebih baik.
• Versi 3x paling penting untuk telefon dengan skrin kecil dan padat.

Bagaimana anda menyediakan versi yang betul dengan srcset?

Atribut srcset pada tag <img> memberitahu pelayar fail mana yang perlu dimuat turun berdasarkan DPR skrin. Pelayar mengendalikan pemilihan, jadi anda menyediakan pilihan dan markup tersebut.

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

• Deskriptor 1x, 2x, 3x memetakan fail kepada nisbah piksel peranti.
• Pelayar hanya memuat turun versi yang sepadan dengan skrin.
• Sentiasa sertakan lebar dan tinggi untuk mencegah anjakan susun atur (layout shift).
• Atribut src adalah sandaran untuk pelayar lama.

Untuk imej responsif yang juga menukar dimensi merentasi lebar skrin, gabungkan srcset dengan atribut sizes dan deskriptor lebar (400w, 800w) dan bukannya deskriptor DPR. Panduan imej responsif meliputi corak yang lebih maju itu, dan panduan SEO imej menerangkan bagaimana imej yang tajam dan bersaiz betul juga membantu prestasi carian.

Bila menggunakan SVG berbanding raster

Untuk logo, ikon, dan ilustrasi dengan bentuk rata, anda boleh mengelakkan masalah 2x/3x sepenuhnya dengan menggunakan SVG. Grafik vektor boleh diskalakan tanpa had tanpa penalti resolusi — fail SVG yang sama tajam pada monitor 1x dan telefon 3x, kerana ia dilukis daripada matematik dan bukannya disimpan sebagai piksel.

SVG adalah jawapan yang betul apabila imej terdiri daripada bentuk-bentuk dan bukannya butiran fotografi. Pertukaran nilainya ialah SVG perlu dioptimumkan — metadata yang tidak digunakan dan sisa editor membengkakkannya — dan panduan SVG ke PNG meliputi aliran kerja apabila anda benar-benar memerlukan sandaran raster untuk persekitaran yang tidak dapat merender vektor. Untuk laman web jenama dengan logo di bahagian atas, SVG menghapuskan persoalan retina sepenuhnya untuk elemen itu.

Menguji imej retina anda

Menjana fail adalah separuh daripada kerja; mengesahkan bahawa ia benar-benar dimuat turun dengan betul adalah separuh lagi. Beberapa semakan mengesahkan persediaan berfungsi dan bukannya secara senyap menyediakan fail yang salah.

1. Buka halaman pada peranti retina atau tetapkan DPR pelayar kepada 2x dalam alat pembangunan (dev tools).
2. Periksa elemen imej dan sahkan currentSrc yang dimuat turun ialah fail 2x atau 3x.
3. Tukar ke DPR 1x dan sahkan ia memuat turun fail 1x sebaliknya.
4. Semak tab rangkaian untuk mengesahkan hanya satu versi dimuat turun bagi setiap skrin.
5. Lihat pada 100% pada skrin retina dan sahkan imej itu tajam, bukan lembut.

Override nisbah piksel peranti alat pembangunan pelayar membolehkan anda menguji tanpa peranti fizikal, walaupun skrin retina sebenar adalah bukti terakhir. Mod kegagalan biasa ialah kesilapan markup dalam srcset yang menyebabkan pelayar kembali kepada src asas, yang kelihatan lembut pada retina tanpa menimbulkan ralat. Tab rangkaian menangkap ini dengan serta-merta — jika anda melihat fail 1x dimuat turun pada skrin 2x, srcset tidak disambungkan dengan betul.

Mengimbangi ketajaman dan berat halaman

Perangkap dengan imej retina ialah menyediakan fail resolusi tinggi kepada setiap skrin, yang menggandakan atau menggandakan berat halaman untuk pengguna yang tidak dapat melihat perbezaannya. Pendekatan srcset mengelakkan ini, tetapi hanya jika anda benar-benar menjana versi yang lebih kecil dan merujuknya. Satu fail 3x yang disajikan kepada semua orang adalah kesilapan paling biasa.

Panduan web.dev mengenai imej responsif mendokumentasikan impak prestasi untuk melakukan ini dengan betul, dan panduan Core Web Vitals menghubungkan berat imej secara langsung kepada metrik LCP yang mempengaruhi kedudukan. Matlamatnya ialah ketajaman di mana ia diperlukan dan kawalan di tempat lain — biarkan pelayar memilih, dan jana setiap versi supaya ia mempunyai sesuatu yang bagus untuk dipilih.

Soalan lazim

Bagaimana saya membuat imej tajam pada skrin retina?

Sediakan versi 2x (dan pilihan 3x) imej raster pada saiz paparan, menggunakan srcset supaya pelayar memilih fail yang betul mengikut nisbah piksel peranti. Imej 1x pada skrin retina kelihatan lembut; varian 2x memulihkan ketajaman.

Adakah saya memerlukan imej 2x untuk setiap grafik?

Untuk grafik tajam dan foto hero, ya — skrin retina menunjukkan kelembutan jika tidak. Untuk imej hiasan atau di bawah lipatan (below-the-fold), satu fail 1x selalunya sudah memadai. Sediakan kedua-duanya dengan srcset supaya peranti bukan retina tidak memuat turun fail besar itu.

Bila saya harus menggunakan SVG berbanding raster 2x?

Untuk logo, ikon, dan grafik rata, ya — SVG bebas resolusi dan kekal tajam pada sebarang saiz tanpa fail tambahan. Untuk foto, raster (dengan varian 2x) masih pilihan yang betul. Lihat panduan SVG ke PNG.

Bagaimana saya menyediakan imej retina?

Gunakan srcset dengan sumber 1x dan 2x (dan pilihan 3x), membiarkan pelayar memilih mengikut nisbah piksel peranti. Hantar 1x sebagai src lalai supaya pelayar lama kembali dengan bersih. Pelayar hanya memuat turun varian yang diperlukan.

Adakah srcset melambatkan halaman?

Tidak — pelayar hanya memuat turun satu-satunya varian yang diperlukan, jadi skrin kecil mendapat fail kecil. Tanpa srcset, setiap peranti memuat turun fail terbesar. srcset menjimatkan bait, ia tidak menambahnya.