Cara memampatkan imej untuk laman web

Mengapa mengoptimumkan imej meningkatkan laman web

Imej biasanya mewakili sebahagian besar data yang dimuat turun oleh sesebuah halaman. Fail besar melambatkan kemunculan kandungan, menggunakan lebih banyak data mudah alih dan boleh memburukkan pengalaman pelawat. Pengoptimuman menggabungkan tiga keputusan: dimensi, format dan peringkat pemampatan.

Tidak ada had yang sempurna untuk semua imej. Thumbnail harus jauh lebih ringan daripada gambar yang memenuhi seluruh skrin. Matlamatnya adalah untuk menyediakan piksel dan kualiti yang mencukupi untuk ruang sebenar, tanpa memaksa pelayar memuat turun maklumat yang tidak akan digunakan.

Aliran langkah demi langkah yang disyorkan

1. Kenal pasti lebar maksimum yang akan ditampilkan imej dalam reka bentuk.
2. Potong bingkai sebelum memampatkan supaya kawasan yang akan dihapus tidak dikekalkan.
3. Pilih format mengikut kandungan dan keperluan ketelusan.
4. Buka fail dalam Pemampat Imej dan cuba kualiti sederhana-tinggi.
5. Bandingkan saiz dan periksa teks, tepi, wajah dan degradasi.
6. Terbitkan hasil dan semak halaman di telefon dan desktop.

Dimensi: Elakkan memuat naik lebih banyak piksel daripada yang perlu

Jika kad memaparkan imej dengan lebar 600 piksel, memuat naik gambar 5000 piksel biasanya adalah pembaziran. Pelayar akan mengecilkannya secara visual, tetapi sebelum itu ia terpaksa memuat turun fail sepenuhnya. Sediakan versi yang hampir dengan saiz maksimum yang diperlukan oleh reka bentuk.

Untuk skrin berketumpatan tinggi boleh berguna untuk menyediakan versi lebih kurang dua kali ganda, tetapi yang ideal adalah laman web menggunakan imej responsif dengan SRCSET y saiz. Jadi setiap peranti memuat turun varian yang sesuai dan bukannya fail gergasi yang sama.

Format mana yang perlu dipilih

• JPG: Keserasian yang baik dan saiz yang munasabah untuk gambar yang tidak telus.
• WebP: berguna untuk foto dan grafik web; boleh mengekalkan ketelusan dan menawarkan fail padat.
• PNG: sesuai untuk kelegapan, tangkapan dengan teks yang jelas dan grafik sederhana; boleh menjadi besar pada fotografi.
• SVG: ideal untuk logo dan ikon vektor apabila fail itu selamat dan reka bentuk dibuat sebagai vektor.

Menukar format tidak menjamin fail lebih kecil. Sentiasa bandingkan hasil dan kekalkan format asal apabila ia sudah menjadi pilihan paling cekap. Rujuk perbandingan antara JPG, PNG dan WebP jika anda tidak tahu yang mana satu hendak dipilih.

Cara Memilih Kualiti Pemampatan

Mulakan dengan tetapan yang mengutamakan penampilan dan kurangkan secara beransur-ansur. Foto lebih toleran kepada pemampatan berbanding tangkapan antaramuka, diagram dan teks kecil. Jika muncul halo, blok atau tepi kabur, tingkatkan kualiti atau cuba format lain.

Nilai fail dalam halaman, bukan hanya dalam paparan zum masuk. Perbezaan kecil yang 300% kelihatan mungkin tidak ketara pada saiz biasa; Sebaliknya, huruf yang tidak boleh dibaca pada kad adalah masalah sebenar.

Pemampatan bukan pengganti pelaksanaan yang baik

Selain mengoptimumkan fail, simpan ruang dengan atribut lebar y ketinggian untuk mengelakkan lompatan kandungan. Gunakan pemuatan tertunda pada imej yang berada di luar blok boleh lihat pertama, tetapi jangan tunda imej utama jika diperlukan untuk memahami halaman.

Juga perlu menentukan cache panjang untuk fail bernama versi dan mengelakkan memuatkan imej yang sama dalam pelbagai resolusi melalui CSS. Keputusan ini memerlukan perubahan di laman web, tetapi melengkapkan penjimatan yang dicapai semasa mampatan.

Kesilapan Biasa

Mampatkan sebelum membuat keputusan saiz

Menukar saiz selepas itu memaksa untuk memproses fail dua kali dan boleh menyebabkan kehilangan kualiti. Tentukan bingkai dan dimensi terlebih dahulu; mampatkan di akhir.

Tukar tangkapan skrin kepada JPG dengan kualiti rendah

Huruf dan garis halus boleh menghasilkan tompokan. Cuba PNG atau WebP dengan kualiti yang lebih tinggi dan bandingkan saiz fail.

Gunakan imej kecil sebagai pengepala

Membesarkannya tidak memulihkan butiran. Ia bermula dari fon yang cukup besar dan menghasilkan varian yang lebih kecil dari versi itu.

Soalan Lazim

Berapa berat sepatutnya imej web?

Bergantung pada dimensinya, kepentingan dan kerumitannya. Gunakan sebagai kriteria berat paling ringan yang mengekalkan kualiti yang boleh diterima dalam saiz akhirnya, bukannya mengejar angka universal.

Adakah saya perlu menukar semua imej kepada WebP?

Tidak semestinya. WebP berguna, tetapi PNG mudah atau fail yang telah dioptimumkan mungkin tidak bertambah baik. Tukar satu sampel, ukur dan simpan asal.

Adakah memampatkan imej sahaja meningkatkan kedudukan?

Membantu pengalaman dan prestasi, tetapi penempatan juga bergantung pada kandungan yang berguna, penjejakan, pautan, niat pencarian, dan banyak isyarat lain. Pemampatan adalah sebahagian daripada web yang disediakan dengan baik.