Cara Saiz Imej untuk Web: Ukuran, Retina dan srcset

Dikemaskini kali terakhir: June 28, 2026

Saya mengubah saiz foto hero yang sama dalam empat cara dan mengukur perbezaannya: sebuah JPEG kamera 4.2MB, yang disajikan seperti sedia ada pada slot paparan 800px, menjadi WebP 94KB tanpa kehilangan kualiti yang ketara. Mengubah saiz imej untuk web adalah kemenangan berat halaman terbesar yang tersedia, dan sebahagian besarnya bergantung pada empat keputusan: saiz paparan, faktor retina, format, dan pemampatan (compression). Ini ialah aliran kerja yang saya jalankan pada setiap laman web yang saya siapkan.

Jawapan ringkas: bagaimana anda patut mengubah saiz imej untuk web?

Ubah saiz setiap imej kepada kira-kira dua kali lebar paparan (faktor retina), eksportkannya sebagai WebP, mampatkan kepada kualiti 80, dan sediakan tangga srcset yang pendek supaya telefon dan komputer riba masing-masing mendapat fail yang sesuai. Untuk hero lebar penuh yang dipaparkan pada 1920px, satu WebP tunggal dari 1920 hingga 2560px pada kualiti 80 biasanya sudah memadai. Jika anda abaikan ini, anda memaksa setiap peranti untuk memuat turun piksel resolusi desktop.

Seberapa besar saiz imej web yang sepatutnya?

Saiz yang betul ialah saiz paparan, bukan saiz sumber. Buka DevTools, periksa imej tersebut, baca lebar kotak CSS terbesar yang pernah dipakainya merentasi breakpoint, kemudian eksport pada lebar itu didarabkan dengan sasaran ketumpatan anda.

Untuk kebanyakan imej artikel dan produk yang jatuh dalam julat yang boleh diramal. Saya mengukur setiap ruang sebelum saya eksport, kerana meneka adalah cara foto 4000px berakhir di lajur 600px.

Jangan pernah biarkan CSS melakukan pengecilan saiz (downscaling). Sebuah <img> yang digayakan kepada width: 400px masih memuat turun fail penuh — pelayar akan buang piksel tambahan selepas bait sudah berada di talian. Saiz semula sumber dahulu, kemudian percayai CSS hanya untuk susun atur.

Langkah demi langkah: aliran kerja saiz semula saya

Ini urutan tepat yang saya jalankan. Saya mengujinya terhadap audit gambar Lighthouse dan ia secara konsisten lulus pemeriksaan "imej bersaiz betul".

• Ukur lebar yang dirender terbesar dengan DevTools.
• Darabkan dengan 2 untuk retina (3x hanya untuk gambar utama telefon padat).
• Saiz semula ke bawah dengan penapis berkualiti tinggi (Lanczos).
• Eksport sebagai WebP pada kualiti 80, turunkan kepada 75 jika fail masih berat.
• Jana tangga srcset untuk slot responsif.
• Mampatkan semula jika fail masih melebihi 200KB.

from PIL import Image

def resize_for_web(src, out, max_width=1440, quality=80):
    img = Image.open(src)
    if img.width > max_width:
        ratio = max_width / img.width
        img = img.resize((max_width, int(img.height * ratio)),
                         Image.LANCZOS)
    img.save(out, "WEBP", quality=quality)

Apabila saya mengukurnya, ini menukar foto 4000x2667 (JPEG 4.2MB) kepada WebP 1440x960 pada 94KB — pengurangan 98 peratus tanpa kehilangan ketajaman yang kelihatan pada paparan standard. Peraturan yang lebih mendalam untuk mengekalkan butiran melalui pengecilan saiz agresif terdapat di keep quality while resizing.

Retina dan 2x: adakah anda benar-benar memerlukan piksel berganda?

Kebanyakannya ya, untuk apa-apa yang pengguna lihat dengan teliti. Skrin 2x memuatkan empat kali ganda piksel dalam ruang fizikal yang sama, jadi fail 1x kelihatan lembut. Peraturan selamat: eksport pada lebar CSS 2x untuk imej kandungan.

Di mana saya sengaja melanggar peraturan itu:

• Latar belakang dekoratif yang kabur atau pudar boleh kekal dekat 1x.
• Imej di bawah lipatan (below-the-fold) di mana ketajaman kurang penting boleh menggunakan 1.5x.
• Ikon dan logo lebih baik sebagai SVG, yang bebas resolusi.

Panduan imej web.dev Google mengesyorkan deskriptor ketumpatan atau deskriptor lebar; deskriptor lebar melalui srcset lebih mudah untuk difikirkan, jadi itulah yang saya gunakan secara lalai.

Menyediakan varian responsif dengan srcset

Satu fail bagi setiap imej jarang sekali sesuai untuk setiap peranti. Telefon tidak memerlukan fail 1440px, dan monitor 4K tidak seharusnya berpuas hati dengan yang 480px. srcset membolehkan anda menawarkan beberapa lebar dan membiarkan pelayar memilih.

<img
  src="hero-960.webp"
  srcset="hero-480.webp 480w, hero-720.webp 720w,
          hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  alt="Hero illustration of a city skyline at dusk"
  width="960" height="640" loading="lazy">

Atribut sizes mesti memberitahu kebenaran tentang slot yang dirender. Jika anda meninggalkannya pada nilai lalai 100vw, pelayar menganggap imej itu meliputi keseluruhan viewport dan memuat turun varian terbesar. Memilih lebar mana yang perlu dijana adalah keputusan tersendiri — kaedah yang saya gunakan untuk merapikan tangga terdapat di responsive image breakpoints.

Saiz Fail Berbanding Dimensi: Mana Yang Lebih Penting?

Kedua-duanya penting, tetapi atas sebab yang berbeza. Dimensi menentukan kiraan piksel; manakala mampatan dan format menentukan bait per piksel. Imej bersaiz betul dengan mampatan yang buruk masih berat, dan imej kecil tetapi terlalu dimampatkan kelihatan rosak.

Sasaran yang saya cuba capai adalah di bawah 200KB untuk kebanyakan imej kandungan, dan di bawah 100KB untuk apa-apa sahaja di atas lipatan yang menyumbang kepada Largest Contentful Paint. Apabila fail melebihi itu, tuas pertama yang saya tarik ialah kualiti mampatan, diikuti format. Perincian pada tahap bait tentang bagaimana mampatan mengurangkan berat terdapat dalam compress without losing quality.

Lighthouse menandakan imej bersaiz besar sebagai peluang konkrit. Jalankannya dari Chrome DevTools atau ikuti Lighthouse documentation — audit "imej bersaiz betul" melaporkan dengan tepat berapa banyak KB yang anda bazirkan dengan menghantar lebih piksel daripada yang diperlukan oleh ruang tersebut.

Memilih format yang betul

Format adalah tempat banyak bait tersembunyi. Saya menggunakan WebP secara lalai untuk hampir semua yang bersifat fotografi, dengan AVIF di mana saya mampu menyediakan sandaran (fallback). Memadankan format kepada kandungan sama pentingnya dengan dimensi: PNG yang digunakan untuk foto lebih berat daripada fail yang sama sebagai WebP tanpa faedah.

Panduan imej responsif MDN meliputi elemen <picture> untuk menghidangkan AVIF dengan sandaran WebP atau JPEG. Saya hanya menggunakan <picture> apabila saya memerlukan rundingan format; untuk foto responsif biasa, srcset sahaja sudah memadai.

Kesilapan yang saya lihat semasa mengaudit laman web

Apabila saya mengaudit laman web yang perlahan, masalah imej akan berulang. Ini adalah kesilapan yang paling kerap saya betulkan.

• Memuat naik fail resolusi kamera dan mengecilkannya menggunakan CSS.
• Satu fail gergasi untuk setiap breakpoint berbanding tangga srcset.
• Terlupa width dan height, yang menyebabkan anjakan susun atur (layout shift).
• Meninggalkan sizes pada nilai lalai supaya pelayar mengambil fail terbesar.
• Memuatkan setiap imej dengan segera (eagerly) berbanding menangguhkan imej di bawah lipatan (below the fold).

Item terakhir itu adalah peningkatan prestasi percuma. Pola untuk menangguhkan imej di luar skrin dibincangkan dalam lazy loading images — tambah loading="lazy" dan pelayar akan melangkau imej yang belum digulirkan oleh pengguna.

Ringkasan

Sebelum saya menghantar imej, saya semak senarai ini: disesuaikan kepada lebar paparan terbesar 2x, dieksport sebagai WebP, dimampatkan di bawah 200KB, dengan tangga srcset, atribut sizes yang benar, lebar dan tinggi eksplisit, loading="lazy" di bawah lipatan (below the fold), dan teks alt deskriptif.

Satu pengecualian sebenar: mengubah saiz adalah daya penggerak terbesar, tetapi ia bukan keseluruhan tugas. Saya pernah melihat pasukan yang berjaya menetapkan dimensi dan masih menghantar halaman perlahan kerana mereka menghidangkan fail dari sumber asal tanpa caching, tanpa CDN, dan tanpa nama fail yang di-hash kandungan. Ukur menggunakan Lighthouse dan profil peranti sebenar, kemudian percayai nombor berbanding senarai semak. Sebuah WebP 94KB yang dimuat turun semula oleh pelayar pada setiap navigasi masih merupakan kesilapan 94KB.

Soalan Lazim

Saiz apa yang patut digunakan untuk imej hero web?

Padankan saiz paparan: kira-kira 1600px lebar untuk hero penuh lebar, 800–1200px untuk imej lajur kandungan. Mengeksport pada saiz 2x paparan (untuk retina) menggandakan piksel; sediakan saiz yang betul bagi setiap peranti dengan srcset daripada menghantar satu fail besar.

Adakah saya memerlukan imej 2x untuk skrin retina?

Untuk grafik tajam dan foto hero, ya — skrin retina menunjukkan kelembutan jika tidak. Untuk imej di bawah lipatan (below-the-fold) dan dekoratif, satu fail 1x selalunya sudah memadai. Gunakan srcset untuk menghantar varian 1x dan 2x supaya peranti bukan retina tidak memuat turun fail yang besar itu.

Mana yang lebih penting, dimensi atau saiz fail?

Kedua-duanya, tetapi saiz fail lebih mempengaruhi Core Web Vitals. Saiz semula kepada dimensi paparan dahulu (menghapuskan piksel yang terbuang), kemudian mampatkan kepada kualiti sasaran (menghapuskan bait yang terbuang). web speed guide merangkumi susunan penuh.

Bagaimana saya menghantar varian responsif?

Gunakan srcset dengan sumber khusus saiz dan atribut sizes yang menerangkan lebar paparan, membenarkan pelayar memilih fail yang betul bagi setiap viewport. Jana setiap saiz daripada master, kemudian biarkan pelayar membuat pilihan. Lihat responsive images guide.

Apakah itu srcset?

Atribut HTML yang menyenaraikan pelbagai sumber imej pada saiz berbeza, membenarkan pelayar memilih yang betul mengikut viewport. Ia menghantar fail kecil kepada skrin kecil dan fail besar kepada skrin besar, menjimatkan bait. Lihat responsive images guide.

Apakah atribut sizes?

Atribut HTML yang memberitahu pelayar berapa lebar imej dipaparkan pada setiap titik henti (breakpoint), supaya pelayar boleh memilih sumber srcset yang betul sebelum memuat turun. Tanpa sizes, pelayar membuat tekaan. Pasangkan srcset (sumber) dengan sizes (lebar paparan) untuk imej responsif yang dimuat turun secara cekap. Lihat responsive images guide.

Kredit Imej

• MacBook pada meja yang memaparkan susun atur laman web yang direka — foto oleh Tranmautritam di Pexels
• Pandangan dekat monitor komputer yang menunjukkan barisan kod sumber — foto oleh Nemuel Sereti di Pexels
• Skrin komputer riba yang menunjukkan laman web sedang dimuatkan dalam tab pelayar — foto oleh cottonbro studio di Pexels