Sajikan Imej Format Generasi Seterusnya

Amaran Lighthouse bermaksud tukarkan fail JPEG dan PNG anda kepada WebP atau AVIF, kemudian sajikan fail tersebut melalui elemen picture dengan imej asal sebagai sandaran (fallback). Audit ini adalah antara yang paling mudah untuk diselesaikan, kerana pembetulannya adalah bersifat mekanikal dan bukannya melibatkan seni bina laman web.

Lighthouse mengeluarkan amaran apabila ia menemui imej yang dipercayai akan bersaiz jauh lebih kecil dalam format moden. Anggaran ini adalah berdasarkan fail yang dimuat turunnya, jadi penjimatan yang dilaporkan biasanya boleh dicapai dan kadangkala agak konservatif.

Apa yang diukur oleh Lighthouse

Lighthouse mengekod semula setiap imej sebagai WebP secara dalaman dan melaporkan perbezaannya apabila penjimatan melebihi ambang tertentu. Angka dalam laporan tersebut adalah anggaran sebenar dan bukannya sekadar cadangan umum.

Imej di bawah ambang tersebut akan diabaikan, itulah sebabnya halaman dengan 30 imej mungkin hanya menunjukkan 4 imej dalam audit. Fail yang disenaraikan adalah fail yang patut dibetulkan terlebih dahulu. Menyelesaikan fail-fail ini biasanya akan membuang amaran tersebut sepenuhnya, walaupun imej lain pada halaman tersebut kekal dalam format lama.

Markup yang memenuhi keperluan audit

Gunakan elemen picture dengan AVIF terlebih dahulu, WebP kedua dan JPEG asal dalam tag img. Pelayar akan memilih sumber pertama yang difahaminya, jadi pelayar yang lebih baharu akan mendapat fail yang kecil manakala pelayar lama masih mendapat imej.

Tag img mesti dikekalkan, kerana ia membawa teks alt, dimensi dan sandaran. Mengabaikan atribut width dan height akan menyebabkan anjakan reka letak (layout shift) semasa imej dimuatkan, yang akan merosakkan ukuran Core Web Vitals yang lain semasa membetulkan ukuran yang ini. Tetapkan kedua-dua atribut kepada saiz piksel intrinsik imej sandaran.

Cara menyelesaikan audit

Untuk menyelesaikan amaran ini dengan betul, ikuti 6 langkah ini.

1. Buka laporan Lighthouse dan senaraikan imej yang dinamakannya, iaitu imej dengan penjimatan yang boleh diukur.
2. Periksa saiz paparan setiap imej, memandangkan banyak imej bersaiz terlalu besar selain berada dalam format yang salah.
3. Ubah saiz setiap imej kepada lebar paparan sebenar, digandakan untuk skrin ketumpatan tinggi.
4. Tukarkan kepada WebP pada kualiti 80, dan kepada AVIF pada kualiti 65 untuk imej terbesar pada halaman.
5. Sajikan hasil tersebut melalui elemen picture dengan imej asal sebagai sandaran img.
6. Jalankan semula Lighthouse untuk mengesahkan bahawa amaran telah hilang dan tiada anjakan reka letak yang berlaku.

Langkah 3 lebih penting daripada langkah 4. Dimensi mengawal sebahagian besar saiz fail, dan WebP yang bersaiz terlalu besar tetap merupakan imej yang bersaiz terlalu besar. Penukaran secara pukal mengambil masa beberapa minit, manakala menulis markup biasanya mengambil masa lebih lama.

Format mana untuk imej yang mana

Adakah platform anda sudah melakukan ini

Banyak sistem kandungan dan hos menukar imej secara automatik, jadi periksa sebelum membina apa-apa secara manual. Melakukan kerja yang sama dua kali adalah perkara biasa dan merugikan.

Uji dalam masa 2 minit. Buka halaman yang diterbitkan, klik kanan pada imej dan buka imej tersebut dalam tab baharu, kemudian baca pelanjutan fail dalam bar alamat. Pelanjutan .webp pada fail yang anda muat naik sebagai JPEG bermakna platform tersebut sudah melakukan penukaran. Shopify, kebanyakan hos WordPress terurus dan beberapa pembina laman web melakukan ini secara lalai.

Mengapa amaran tersebut kadangkala kembali

Muat naik baharu akan memperkenalkan semula masalah ini apabila langkah penukaran dilakukan secara manual dan bukannya automatik. Laman web yang dibersihkan pada bulan Januari akan menunjukkan amaran itu semula menjelang bulan Jun jika editor memuat naik terus dari kamera.

Betulkan proses tersebut dan bukannya fail sahaja. Sama ada dayakan penukaran automatik pada peringkat platform, atau persetujui peraturan mudah bahawa imej mesti diubah saiz dan ditukar sebelum dimuat naik. Menulis peraturan tersebut adalah penting pada mana-mana laman web yang mempunyai lebih daripada seorang penerbit, memandangkan audit mengukur imej yang paling teruk dan bukannya imej purata.

Patutkah anda menggunakan AVIF, WebP, atau kedua-duanya

Gunakan WebP sahaja pada kebanyakan laman web, dan tambah AVIF hanya untuk imej terbesar pada halaman. Menyokong kedua-duanya menggandakan jumlah fail yang perlu dijana, disimpan dan diselaraskan untuk penjimatan yang kecil pada imej biasa.

Pengiraan ini berubah pada laman web yang padat dengan fotografi, di mana AVIF menjimatkan lagi 20 hingga 30 peratus pada fail yang sudah sedia berukuran ratusan kilobait. Pada halaman yang membawa imej hero bersaiz 600 KB, itu adalah pengurangan yang ketara. Pada halaman dengan imej kecil (thumbnails) bersaiz 40 KB, saluran paip tambahan memerlukan lebih banyak usaha berbanding hasil yang diperoleh, dan WebP sahaja sudah cukup untuk melepasi audit.

Memeriksa hasil dengan betul

Jalankan semula Lighthouse dalam tetingkap inkognito dengan sambungan (extensions) dinyahdayakan, kerana sambungan pelayar boleh memesongkan ukuran. Skor juga berbeza-beza antara setiap larian, jadi bandingkan 3 larian berbanding mempercayai satu angka sahaja.

Sahkan bahawa pelayar menerima format baharu tersebut dan bukannya sekadar mengandaikannya. Buka alat pembangun (developer tools), beralih ke tab Network, tapis mengikut imej dan muat semula halaman. Lajur Type menunjukkan apa yang sebenarnya disajikan. Halaman yang masih menyajikan JPEG selepas penukaran biasanya bermakna markup elemen picture adalah salah, atau lapisan caching masih menyimpan versi terdahulu.

Audit berkaitan yang muncul bersamanya

• Properly size images. Saiz imej lebih besar daripada ruang paparan yang disediakan. Ubah saiz imej dan bukannya memampatkannya sahaja.
• Efficiently encode images. Pemampatan terlalu ringan. Rendahkan tetapan kualiti.
• Defer offscreen images. Tambah pemuatan malas (lazy loading) pada imej di bawah lipatan (below the fold).
• Largest Contentful Paint element. Biasanya imej hero anda, yang patut diberi perhatian terlebih dahulu.
• Image elements do not have explicit width and height. Tambah kedua-dua atribut untuk mengelakkan anjakan reka letak.

5 audit tersebut biasanya muncul bersama-sama, dan mengubah saiz serta menukar imej yang dinamakan dalam laporan akan menyelesaikan sebahagian besar daripadanya dalam satu langkah.

Sejauh mana ini sebenarnya menambah baik halaman

Menukar kepada format moden biasanya mengurangkan 25 hingga 35 peratus berat imej, dan mengubah saiz terlebih dahulu sering kali mengurangkan jauh lebih banyak. Pada halaman yang padat dengan imej, kesan gabungannya sering kali mencapai 70 hingga 80 peratus.

Penambahbaikan ini ditunjukkan dalam Largest Contentful Paint, yang mengukur seberapa cepat kandungan utama muncul. Ukuran tersebut biasanya ditentukan oleh satu imej, jadi mengurangkan fail hero memberikan kesan yang sangat besar berbanding bahagiannya pada halaman. Mengurangkan 20 imej kecil kurang penting berbanding mengurangkan 1 imej besar.

Apa yang tidak patut dilakukan

Jangan buang sandaran JPEG, dan jangan tukar imej yang akan dimuat turun oleh pelawat. Kedua-dua kesilapan ini mengorbankan fungsi sebenar demi peningkatan skor yang kecil.

Kit media, panduan boleh cetak, templat boleh muat turun dan fail pembekal harus kekal sebagai JPEG atau PNG, memandangkan WebP sukar dikendalikan di luar pelayar. Menyajikan fail tersebut sebagai format moden akan menghasilkan permintaan bantuan daripada pengguna yang tidak dapat membukanya, yang menelan kos lebih tinggi daripada lebar jalur (bandwidth) yang dijimatkan.

Menukar imej yang dinamakan dalam laporan

Tukar daripada fail asal dan bukannya daripada versi yang telah diterbitkan, kerana JPEG yang telah dimampatkan akan membawa kerosakan ke dalam fail baharu. Pengekod tidak dapat membezakan artifak sedia ada daripada perincian sebenar dan akan membazirkan bit untuk mengekalkannya.

Masukkan sehingga 500 fail sekali gus, atau seret arkib ZIP terus ke dalam, dan keseluruhan set akan ditukar dalam satu langkah. Semuanya berjalan di dalam pelayar anda pada pemproses anda sendiri, jadi laman web pelanggan, aset pementasan (staging) dan halaman yang belum diterbitkan tidak akan sampai ke pelayan. Penukaran penuh laman web selesai dalam beberapa minit tanpa satu fail pun merentasi rangkaian.

Simpan fail yang ditukar bersama-sama fail asal menggunakan nama yang sepadan, supaya markup elemen picture boleh dijana dengan corak yang boleh diramal dan bukannya diedit secara manual untuk setiap imej. Folder yang menyimpan hero.jpg, hero.webp dan hero.avif adalah mudah untuk dijadikan templat, dan ia menjadikan migrasi format seterusnya sebagai penukaran kelompok dan bukannya menulis semula setiap halaman.