Respon Cepat: Persiapkan gambar dengan dimensi maksimum yang akan ditampilkan, gunakan JPG atau WebP untuk foto, pertahankan PNG ketika memerlukan transparansi dan kompres hingga menemukan ukuran terkecil yang masih terlihat baik dalam desain akhir.

Mengapa mengoptimalkan gambar meningkatkan sebuah situs web

Gambar biasanya mewakili bagian penting dari data yang diunduh oleh suatu halaman. File besar menunda munculnya konten, menggunakan lebih banyak data seluler, dan dapat memperburuk pengalaman pengunjung. Optimisasi menggabungkan tiga keputusan: dimensi, format, dan tingkat kompresi.

Tidak ada batas sempurna untuk semua gambar. Thumbnail harus jauh lebih ringan daripada foto yang memenuhi seluruh layar. Tujuannya adalah menyediakan cukup piksel dan kualitas untuk ruang yang sebenarnya, tanpa memaksa browser mengunduh informasi yang tidak akan digunakan.

Alur langkah demi langkah yang direkomendasikan

  1. Identifikasi lebar maksimum di mana gambar akan muncul dalam desain.
  2. Potong bingkai sebelum dikompres agar tidak menyimpan area yang akan dihapus.
  3. Pilih format sesuai dengan konten dan kebutuhan transparansi.
  4. Buka berkas di kompresor gambar dan menguji kualitas sedang-tinggi.
  5. Bandingkan ukuran dan periksa teks, tepi, wajah, dan gradasi.
  6. Publikasikan hasil dan periksa halaman di ponsel dan desktop.

Dimensi: hindari mengunggah piksel lebih banyak dari yang diperlukan

Jika sebuah kartu menampilkan gambar dengan lebar 600 piksel, memuat foto berukuran 5000 piksel biasanya merupakan pemborosan. Browser akan menampilkannya secara visual lebih kecil, tetapi sebelumnya harus mengunduh seluruh file. Siapkan versi yang mendekati ukuran maksimum yang dibutuhkan oleh desain.

Untuk layar dengan kepadatan tinggi, mungkin berguna menyediakan versi kira-kira dua kali lebih besar, tetapi idealnya situs menggunakan gambar responsif dengan SRCSET y ukuran. Dengan begitu setiap perangkat mengunduh varian yang sesuai alih-alih berkas besar yang sama.

Format mana yang harus dipilih

  • JPG: Kompatibilitas yang baik dan ukuran yang wajar untuk foto yang tidak transparan.
  • WebP: berguna untuk foto dan grafik web; dapat mempertahankan transparansi dan menghasilkan berkas yang ringkas.
  • PNG: Cocok untuk transparansi, tangkapan layar dengan teks tajam, dan grafik sederhana; bisa berat pada fotografi.
  • SVG: ideal untuk logo dan ikon vektor ketika file aman dan desain dibuat sebagai vektor.

Mengonversi format tidak menjamin file lebih kecil. Selalu bandingkan hasilnya dan pertahankan format asli ketika itu adalah opsi paling efisien. Lihatlah Perbandingan antara JPG, PNG, dan WebP jika Anda tidak tahu mana yang harus dipilih.

Cara Memilih Kualitas Kompresi

Mulailah dengan pengaturan yang memprioritaskan tampilan dan turunkan secara bertahap. Foto lebih tahan terhadap kompresi dibandingkan tangkapan layar antarmuka, diagram, dan teks kecil. Jika muncul halo, blok, atau tepi buram, tingkatkan kualitas atau coba format lain.

Evaluasi file di halaman, bukan hanya pada tampilan diperbesar. Perbedaan kecil yang terlihat pada 300% mungkin tidak terlihat pada ukuran normal; sebaliknya, huruf yang tidak terbaca pada kartu jelas merupakan masalah nyata.

Kompresi tidak menggantikan implementasi yang baik.

Selain mengoptimalkan berkas, sisihkan ruang dengan atribut lebar y tinggi untuk menghindari loncatan konten. Gunakan pemuatan tertunda pada gambar yang berada di luar blok pertama yang terlihat, tetapi jangan tunda gambar utama jika diperlukan untuk memahami halaman.

Juga dianjurkan untuk menetapkan cache panjang untuk file dengan nama versi dan menghindari memuat gambar yang sama di beberapa resolusi melalui CSS. Keputusan ini memerlukan perubahan di situs, tetapi melengkapi penghematan yang diperoleh selama kompresi.

Kesalahan Umum

Kompres sebelum menentukan ukuran

Mengubah ukuran setelahnya mengharuskan file diproses dua kali dan dapat menumpuk kehilangan kualitas. Tentukan terlebih dahulu bingkai dan dimensi; kompres di akhir.

Mengonversi tangkapan layar ke JPG dengan kualitas rendah.

Huruf dan garis halus dapat menimbulkan noda data. Coba PNG atau WebP dengan kualitas lebih tinggi dan bandingkan beratnya.

Gunakan gambar kecil sebagai header

Memperbesarnya tidak akan memulihkan detail. Mulai dari font yang cukup besar dan menghasilkan varian yang lebih kecil dari versi tersebut.

Pertanyaan umum

Berapa berat gambar untuk web seharusnya?

Tergantung pada dimensi, pentingnya, dan kompleksitasnya. Gunakan sebagai kriteria berat terkecil yang tetap mempertahankan kualitas yang dapat diterima pada ukuran akhirnya, daripada mengejar angka universal.

Apakah saya perlu mengonversi semua gambar ke WebP?

Tidak selalu. WebP berguna, tetapi PNG sederhana atau file yang sudah dioptimalkan mungkin tidak memperbaiki apa pun. Konversi sampel, ukur, dan simpan file asli.

Apakah mengompresi gambar secara otomatis meningkatkan peringkat?

Membantu pengalaman dan kinerja, tetapi penempatan juga bergantung pada konten yang berguna, perayapan, tautan, niat pencarian, dan banyak sinyal lainnya. Kompresi adalah bagian dari situs web yang disiapkan dengan baik.

Siapkan gambar yang lebih ringan

Sesuaikan kualitas atau tetapkan ukuran target, bandingkan hasil, dan unduh versi yang paling sesuai dengan halaman Anda.

Kompres gambar untuk web