Saiz Imej Betul: Elak Foto Terlalu Besar

Ukur saiz paparan imej yang paling lebar, gandakannya untuk skrin berketumpatan tinggi, dan ubah saiz pustaka anda mengikut nombor tersebut. Memasukkan foto berukuran 4000 piksel ke dalam slot 800 piksel bermakna pelayar memuat turun kira-kira 25 kali lebih banyak data piksel daripada yang boleh dipaparkan, kemudian membuang selebihnya.

Melalui sambungan telefon, pelawat membayar untuk semua data ini, dari segi masa dan kuota data. Mengubah saiz imej dengan betul biasanya merupakan satu-satunya pengurangan berat halaman terbesar yang boleh dilakukan untuk sesebuah tapak web, dan ia hanya memerlukan satu kelompok berbanding reka bentuk semula.

Mengapa imej bersaiz besar menelan kos yang tinggi

Saiz fail berkadar terus dengan bilangan piksel, jadi mengurangkan separuh lebar dan tinggi akan membuang kira-kira 75 peratus data. Hubungan ini adalah kuadratik dan bukannya linear, itulah sebabnya pembaziran meningkat dengan cepat.

Baris pertama ialah kes biasa pada tapak web di mana editor memuat naik terus dari kamera. Pelayar memuat turun 4.2 MB, mengecilkannya, dan memaparkan fail yang setara dengan 180 KB.

Cara mengukur saiz paparan sebenar

Klik kanan imej pada halaman langsung anda, pilih Inspect, dan baca dimensi yang dipaparkan berbanding dimensi asal. Pelayar melaporkan kedua-dua angka tersebut, dan jurang di antaranya ialah pembaziran.

Periksa kes yang paling lebar dan bukannya kes biasa. Imej di dalam lajur artikel mungkin dipaparkan pada 700 piksel pada desktop dan 380 pada telefon, jadi 700 ialah nombor yang penting. Uji pada tetingkap pelayar paling lebar yang digunakan secara realistik oleh pelawat anda, memandangkan sepanduk lebar penuh berkembang mengikut viewport dan memerlukan pengiraan yang berbeza.

Peraturan penggandaan untuk skrin berketumpatan tinggi

Darabkan lebar paparan dengan 2 dan berhenti di situ, kerana skrin melebihi ketumpatan tersebut tidak menunjukkan sebarang peningkatan ketara yang boleh disedari oleh sesiapa pun. Imej yang dipaparkan pada 700 piksel harus dieksport pada 1400.

Menggandakan sebanyak tiga kali ganda kadangkala dicadangkan tetapi jarang sekali berbaloi. Perbezaan antara ketumpatan 2 dan 3 kali ganda tidak dapat dikesan pada jarak tontonan biasa, manakala saiz fail meningkat lebih daripada separuh. Memampatkan dengan lebih kuat pada ketumpatan 2 kali ganda menghasilkan hasil yang lebih baik daripada memampatkan sedikit pada 3 kali ganda, kerana piksel tambahan menyembunyikan kesan mampatan.

Lebar paparan biasa untuk diubah saiz

• Imej badan artikel: dipaparkan sekitar 700 px, eksport pada 1400 px.
• Hero lebar penuh: dipaparkan sehingga 1920 px, eksport pada 1920 px dan mampatkan dengan lebih kuat.
• Ciri separuh lebar: dipaparkan sekitar 600 px, eksport pada 1200 px.
• Lakaran kecil grid produk: dipaparkan sekitar 300 px, eksport pada 600 px.
• Foto penulis atau profil: dipaparkan sekitar 80 px, eksport pada 160 px.
• Logo dalam pengepala: dipaparkan sekitar 180 px, eksport pada 360 px atau gunakan grafik vektor.

Mengapa imej lebar penuh adalah pengecualian

Sepanduk lebar penuh tidak mempunyai saiz paparan tetap, jadi hadkannya pada 1920 piksel dan mampatkannya dengan lebih kuat berbanding menggandakannya. Menggandakan imej lebar penuh kepada 3840 piksel menghasilkan fail yang tidak munasabah untuk mana-mana halaman.

Sepanduk biasanya dilihat dari jauh dan mengandungi kurang butiran halus berbanding foto produk, yang bermaksud mampatan agresif kurang ketara padanya. Sepanduk 1920 piksel pada kualiti 70 dalam WebP biasanya berada di bawah 200 KB dan kelihatan betul pada setiap skrin, manakala versi 3840 piksel tidak memberikan sebarang faedah visual pada 4 kali ganda berat fail.

Cara membetulkan keseluruhan pustaka

Untuk mengubah saiz tapak web sedia ada dengan betul, ikuti 6 langkah ini.

1. Senaraikan slot imej dalam reka bentuk anda, yang biasanya terdiri daripada 4 hingga 6 saiz berbeza dan bukannya berpuluh-puluh.
2. Ukur lebar paparan setiap slot menggunakan pemeriksa pelayar pada halaman langsung.
3. Gandakan setiap lebar untuk mendapatkan saiz eksport anda.
4. Isih pustaka ke dalam folder mengikut slot, memandangkan satu kelompok menggunakan satu saiz untuk setiap fail di dalamnya.
5. Ubah saiz setiap folder mengikut lebar sasaran, kemudian mampat dan tukar format dalam langkah yang sama.
6. Gantikan fail dengan mengekalkan nama yang sama supaya halaman sedia ada terus berfungsi.

Mengisih ke dalam folder ialah langkah yang menukarkan proses ini menjadi kerja kelompok. Kebanyakan tapak web menggunakan saiz imej berbeza yang jauh lebih sedikit daripada yang mereka jangkakan, dan pengelompokan mengikut slot mengelakkan keperluan untuk mengendalikan fail secara individu.

Imej responsif dan atribut srcset

Gunakan srcset untuk menawarkan beberapa saiz dan biarkan pelayar memilih saiz yang sesuai untuk setiap peranti. Telefon kemudiannya memuat turun fail 400 piksel manakala desktop memuat turun fail 1400 piksel daripada kod markup yang sama.

Hasilkan 3 lebar bagi setiap imej, biasanya 400, 800 dan 1600 piksel, dan senaraikannya dengan lebar pikselnya supaya pelayar boleh memilih. Kebanyakan sistem kandungan menghasilkan ini secara automatik semasa muat naik, jadi periksa fungsi sedia ada platform anda. Di mana ia berfungsi, memuat naik fail asal yang bersaiz betul masih meningkatkan kualiti setiap varian yang dihasilkan.

Ubah saiz sebelum memampat, sentiasa

Mengubah saiz terlebih dahulu bermakna proses mampatan kurang bekerja, jadi kualiti boleh kekal tinggi manakala saiz fail kekal kecil. Memampat terlebih dahulu dan mengubah saiz kemudian membuang butiran yang kemudiannya anda buang sekali lagi.

Urutan ini juga mempengaruhi rupa hasil akhir. Imej yang dimampatkan pada saiz penuh mengandungi artifak yang menjadi lebih ketara apabila imej dikecilkan, memandangkan artifak tersebut mengecil bersamanya. Mengubah saiz terlebih dahulu menghasilkan sumber yang lebih bersih untuk pengekod dan hasil yang ketara lebih baik pada saiz fail yang sama.

Kesan tindakan ini terhadap kelajuan halaman

Mengubah saiz imej dengan betul biasanya mengurangkan 60 hingga 90 peratus berat imej pada tapak web yang tidak pernah melakukannya sebelum ini. Peningkatan ini adalah lebih besar daripada sebarang perubahan format dan biasanya lebih besar daripada gabungan semua pengoptimuman lain.

Kesannya tertumpu kepada pelawat mudah alih, di mana sambungan adalah lebih perlahan dan data memerlukan kos. Largest Contentful Paint bertambah baik secara langsung, memandangkan ukuran tersebut biasanya ditentukan oleh satu imej yang besar. Menyelesaikan audit "Properly size images" dalam Lighthouse sering kali menyelesaikan 2 atau 3 amaran berkaitan pada masa yang sama.

Jangan sekali-kali membesarkan imej untuk memuatkannya

Membesarkan imej menambah piksel yang tidak pernah dirakam oleh kamera, jadi hasilnya menjadi kabur dan saiz fail meningkat tanpa sebarang faedah. Mengecilkan saiz sentiasa selamat, manakala membesarkan saiz ialah satu-satunya operasi yang pasti kelihatan lebih teruk.

Sekiranya imej sumber lebih kecil daripada slot yang mesti diisinya, pilihan terbaik adalah menggunakannya pada saiz asalnya, memotong reka letak di sekelilingnya, atau menggantikan imej tersebut. Membesarkan foto 600 piksel kepada 1600 piksel menghasilkan fail kabur dengan 4 kali ganda berat fail asal, yang gagal dari segi kualiti dan kelajuan pada masa yang sama.

Memeriksa halaman untuk imej bersaiz besar

Buka alat pembangun, beralih ke tab Network, tapis mengikut imej dan muat semula halaman. Senarai tersebut menunjukkan setiap imej dengan saiz yang dipindahkan, diisih mengikut saiz terbesar dahulu.

Mana-mana imej tunggal melebihi 500 KB patut diperiksa, dan mana-mana halaman dengan jumlah imej melebihi 2 MB mempunyai masalah. Tuding pada imej dalam panel Elements untuk melihat saiz asal dan saiz paparan secara bersebelahan. Jurang yang besar antara 2 nombor tersebut ialah definisi imej bersaiz tidak betul, dan ia boleh dikesan dalam beberapa saat.

Mengubah saiz pustaka dalam satu kelompok

Tetapkan lebar sasaran sekali dan gunakannya pada setiap fail dalam folder, dan bukannya mengubah saiz imej secara individu. Pustaka yang mengandungi beberapa ratus imej boleh diubah saiz dalam beberapa minit apabila kerja tersebut dilakukan secara kelompok.

Masukkan sehingga 500 fail sekaligus, atau seret arkib ZIP terus ke dalam, dan tetapkan lebar, format serta sasaran mampatan untuk keseluruhan set. Semuanya berjalan di dalam pelayar anda pada pemproses anda sendiri, jadi tapak web pelanggan, aset pementasan dan galeri yang belum diterbitkan tidak pernah sampai ke pelayan. Tiada apa-apa yang dimuat naik, yang bermaksud perubahan saiz pustaka penuh berlaku tanpa satu fail pun merentasi rangkaian.