Artikel
Optimumkan media laman web untuk kelajuan dan Core Web Vitals
Imej dan video biasanya menyumbang 60 hingga 80 peratus daripada jumlah berat halaman web. 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, tetapi WebM dengan VP9 adalah 20 hingga 40 peratus lebih kecil pada kualiti yang sama, yang penting untuk pengguna mudah alih pada sambungan terhad. Pendekatan praktikal ialah menukar sekali kepada WebM, menghidangkannya sebagai sumber pilihan dalam elemen video, dan mengekalkan MP4 sebagai sandaran. Penukar video di sini menggunakan FFmpeg yang dikompil ke WebAssembly: penukaran berjalan dalam pelayar anda, tiada apa-apa dimuat naik, dan fail sebarang saiz berfungsi selagi peranti anda mempunyai memori yang mencukupi. 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.
Alat dalam artikel ini
- Mampatkan imej Kurangkan saiz fail imej tanpa muat naik. Gelangsar kualiti atau saiz fail sasaran dalam KB. Berkelompok disokong.
- Ubah saiz imej Ubah saiz dan tukar imej anda (JPEG, PNG, WebP) tanpa memuat naiknya.
- Pengoptimum SVG Optimumkan dan minifikasi fail SVG dengan SVGO terus dalam pelayar anda. Tiada muat naik.
- Penukar video Tukar video antara MP4, WebM, MKV dan MOV (H.264/H.265/VP9) dalam pelayar. Tanpa muat naik.
- Imej ke Base64 Tukar imej kepada URI data Base64 (dan sebaliknya) terus dalam pelayar anda. Salin, coretan CSS, 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.