Artikel
Optimumkan media laman web untuk kelajuan dan Core Web Vitals
Imej biasanya menyumbang kira-kira 40 peratus daripada jumlah berat sesebuah halaman web, lebih banyak daripada mana-mana jenis sumber lain, dan video menambah jauh lebih banyak lagi pada halaman yang kaya dengan media. Mengoptimumkannya dengan betul ialah perkara berdaya ungkit tertinggi yang boleh anda lakukan untuk kelajuan muatan, skor Core Web Vitals dan kedudukan carian. Berita baiknya: tiada satu pun memerlukan perisian khusus atau pelayan, dan fail anda tidak pernah perlu meninggalkan peranti anda.
Pilih format yang betul sebelum apa-apa lagi
Pemilihan format lebih penting daripada mana-mana peluncur kualiti. Untuk foto pada halaman web, WebP ialah lalai yang tepat: ia 25 hingga 35 peratus lebih kecil daripada JPEG pada kualiti visual yang sama dan setiap pelayar moden menyokongnya. AVIF memampat lebih jauh lagi, sehingga 50 peratus lebih baik daripada JPEG, dengan kos pengekodan yang lebih perlahan. Gunakan AVIF untuk imej hero dan foto produk yang anda mampatkan sekali; gunakan WebP untuk apa-apa yang anda proses secara berkelompok atau perlukan dengan cepat. PNG hanya sesuai di tempat anda memerlukan ketepatan tanpa kehilangan atau latar belakang lutsinar. SVG ialah satu-satunya pilihan munasabah untuk logo, ikon dan ilustrasi: ia berskala kepada sebarang saiz dan selalunya berberat beberapa kilobait berbanding ratusan untuk setara yang dirasterkan.
Mampatkan imej tanpa kehilangan kualiti yang ketara
Mulakan dengan mengubah saiz kepada dimensi paparan sebenar: imej hero yang dipaparkan pada lebar 1280 piksel tidak memerlukan data 4000 piksel. Ubah saiz dahulu, kemudian mampatkan. Untuk foto, kualiti 80 dalam WebP atau JPEG ialah lantai praktikal yang di bawahnya penonton biasa mula perasan, jadi sasarkan 75 hingga 85 dan lihat keluaran pada zum penuh sebelum menerbitkan. Untuk grafik dengan teks dan kawasan rata, PNG tanpa kehilangan atau SVG mengekalkan ketajaman yang dikaburkan oleh format dengan kehilangan. Pemampat imej di laman ini mengendalikan semua format ini, berjalan sepenuhnya dalam pelayar anda, dan menggunakan algoritma yang sama seperti alat desktop khusus.
Tukar video untuk web tanpa memuat naiknya
Gelung latar belakang dan video terbenam ialah tempat pengoptimuman media web sering tidak mencapai sasaran. MP4 dengan H.264 dimainkan di mana-mana, dan WebM ialah alternatif bebas royalti yang disokong oleh setiap pelayar moden. Penukar video di laman ini mengekod WebM dengan VP8, yang berada dalam kelas pemampatan yang sama dengan H.264: pertukaran bekas sahaja tidak mengecilkan fail, keuntungan sebenar ialah rantaian codec yang sepenuhnya bebas royalti dan sokongan asli untuk saluran alfa. Pendekatan praktikal ialah menukar sekali kepada WebM, menghidangkannya sebagai sumber pilihan dalam elemen video, dan mengekalkan MP4 sebagai sandaran untuk pelayar yang lebih lama. Penukaran berjalan dalam pelayar anda melalui FFmpeg yang dikompil ke WebAssembly: tiada apa-apa dimuat naik, dan fail sehingga 500 MB ditukar tanpa baris gilir. Untuk video latar belakang sebaris, pertimbangkan juga pemangkas video untuk memotong saat-saat mati sebelum pengekodan: tempoh ialah pemacu terbesar saiz fail.
Aset sebaris: base64 dan SVG
Imej yang sangat kecil, ikon dan favikon yang dibenamkan terus dalam HTML atau CSS sebagai rentetan base64 menghapuskan satu perjalanan pergi balik rangkaian setiap aset. Ini masuk akal untuk aset di bawah kira-kira 2 KB yang muncul pada setiap halaman, seperti sprite logo atau penunjuk pemuatan. Aset yang lebih besar patut kekal sebagai fail berasingan kerana base64 mengekod 33 peratus lebih besar daripada binari, dan pelayar menyimpan cache rujukan fail tetapi bukan data sebaris secara berasingan. Pengoptimum SVG mengeluarkan lebihan editor daripada SVG yang dieksport tanpa menyentuh keluaran visual. Penukar imej-ke-base64 menjana URI data sedia tampal dalam pelayar anda.
Hantar saiz yang tepat dan muatkan ia dahulu
Dua butiran penghantaran sama pentingnya dengan fail itu sendiri. Yang pertama ialah saiz responsif. Dengan senarai srcset menggunakan penerang lebar (image-400.webp 400w, image-800.webp 800w dan seterusnya), penyemak imbas memilih fail terkecil yang masih memenuhi skrin, dengan mendarabkan lebar CSS dengan nisbah piksel peranti (device pixel ratio) sebelum membuat sebarang permintaan. Telefon dengan tataletak selebar 390px dan skrin 3x memerlukan kira-kira 1170 piksel, jadi ia mengambil versi 1200w dan melangkau fail desktop asal. Yang kedua ialah keutamaan. Penyemak imbas menjalankan preload scanner (pengimbas pramuat) yang membaca ke hadapan dan mula memuat turun imej sebelum penghurai utama sampai kepada imej tersebut; menambah fetchpriority="high" pada imej terbesar anda yang berada di kawasan above-the-fold (bahagian atas halaman yang kelihatan tanpa menatal) memberitahu penyemak imbas untuk mengambilnya dahulu, yang biasanya menentukan Largest Contentful Paint anda.
Alat dalam artikel ini
- Mampatkan imejKurangkan saiz fail imej tanpa muat naik. Gelangsar kualiti atau saiz fail sasaran dalam KB. Berkelompok disokong.
- Ubah saiz imejUbah saiz dan tukar imej anda (JPEG, PNG, WebP) tanpa memuat naiknya.
- Pengoptimum SVGOptimumkan dan minifikasi fail SVG dengan SVGO terus dalam pelayar anda. Tiada muat naik.
- Penukar videoTukar video antara MP4, WebM, MKV dan MOV (H.264/VP8) dalam pelayar anda. Tiada muat naik.
- Imej ke Base64Tukar imej kepada URI data Base64 (dan sebaliknya) terus dalam pelayar anda. Salin, coretan CSS, tiada muat naik.
- Penggelongsor perbandingan imejBandingkan dua imej sebelah-menyebelah atau dengan penggelongsor (sebelum/selepas). Tiada muat naik.
Soalan lazim
Adakah pemampatan imej mempengaruhi kedudukan carian saya?
Google menggunakan Core Web Vitals sebagai isyarat kedudukan, dan Largest Contentful Paint hampir selalu merupakan imej atau poster video. Halaman yang imej hero-nya dimuatkan dalam masa kurang sesaat memperoleh skor lebih baik daripada halaman yang mengambil masa tiga saat. Pemampatan dan format yang betul mempengaruhi metrik ini secara langsung, jadi ya, pengoptimuman imej mempunyai kesan SEO yang boleh diukur. Kesannya paling kuat pada mudah alih, di mana sambungan lebih perlahan dan penalti untuk imej berat adalah lebih besar.
Mengapa memproses media secara setempat berbanding menggunakan perkhidmatan web?
Kebanyakan alat media dalam talian memerlukan memuat naik fail anda ke pelayan jauh, yang mengambil masa, menggunakan jalur lebar, dan bermakna salinan fail anda wujud pada infrastruktur yang tidak anda kawal. Alat di laman ini berjalan sepenuhnya dalam pelayar anda: imej dan video anda diproses pada peranti anda dan keluaran dimuat turun terus. Tiada akaun, tiada menunggu muat naik, dan tiada apa-apa tentang fail anda yang dihantar ke pelayan.