Optimasi Gambar

Optimasi gambar adalah praktik menghasilkan gambar dengan ukuran file terkecil yang tetap mempertahankan kualitas visual yang dapat diterima sesuai konteks tempat gambar tersebut muncul. Gambar biasanya merupakan bagian terbesar dari ukuran file halaman pada situs konten dan perdagangan, yang menjadikan ini salah satu pekerjaan dengan kinerja pengembalian tertinggi dan salah satu yang paling sering diabaikan.

Ukuran yang tepat adalah faktor tunggal terbesar dan yang paling sering salah. Menyajikan gambar dengan dimensi asli penuhnya padahal gambar tersebut akan ditampilkan dengan ukuran yang jauh lebih kecil akan membuang bandwidth yang sebanding dengan perbedaan luasnya, dan pemborosan ini tidak terlihat karena browser memperkecil ukuran gambar dan tampilannya menjadi benar. Audit rasio antara dimensi yang dikirim dan yang ditampilkan di seluruh situs secara rutin menemukan gambar beberapa kali lebih besar daripada yang dibutuhkan oleh tampilan apa pun.

Format modern memberikan penghematan yang signifikan dengan kualitas yang setara. WebP dan AVIF sama-sama mengkompresi jauh lebih efisien daripada format lama yang digantikannya, dengan AVIF umumnya menghasilkan ukuran file terkecil dengan mengorbankan proses encoding yang lebih lambat. Karena dukungan browser bervariasi, pendekatan praktisnya adalah menggunakan format modern untuk browser yang menerimanya dan secara otomatis beralih ke format lama, yang didukung oleh elemen gambar dan negosiasi konten tanpa kehilangan kompatibilitas.

Pengiriman responsif memastikan setiap perangkat menerima versi yang sesuai, bukan satu ukuran untuk semua. Dengan menyediakan beberapa lebar melalui kumpulan sumber, dengan informasi ukuran sehingga browser dapat memilih sebelum tata letak selesai, berarti ponsel mengunduh gambar kecil dan layar besar mengunduh gambar besar. Tanpa ini, perangkat seluler akan mengunduh file berukuran desktop atau layar desktop akan menampilkan gambar yang tampak buram.

Pengaturan kompresi melibatkan pertimbangan yang biasanya dibuat terlalu konservatif. Kompresi lossy pada pengaturan kualitas sedang biasanya menghasilkan file yang jauh lebih kecil daripada aslinya dengan perbedaan yang tidak terlihat dalam tampilan normal, dan naluri untuk mempertahankan kualitas maksimum sering kali menghabiskan biaya beberapa kali lipat ukuran file untuk perbedaan yang tidak dapat dilihat siapa pun. Menguji ambang batas persepsi sebenarnya untuk citra suatu situs, daripada menggunakan kualitas maksimum secara default, adalah hal yang layak dilakukan.

Strategi pemuatan menentukan kapan biaya tersebut dikeluarkan. Gambar di bawah tampilan awal harus ditunda agar tidak bersaing dengan konten yang sebenarnya dapat dilihat pengunjung, sementara gambar yang kemungkinan merupakan elemen terbesar dalam tampilan awal harus dimuat dengan cepat dan diberi prioritas. Menerapkan penundaan secara sembarangan, termasuk pada gambar utama (hero image), adalah kesalahan umum yang memperburuk metrik pemuatan utama.

Gambar dekoratif perlu diteliti sebelum dioptimalkan, karena gambar termurah adalah gambar yang tidak ditampilkan. Foto latar belakang berukuran besar, slide carousel yang sebagian besar pengunjung tidak pernah lewati, dan gambar stok yang ditambahkan untuk mengisi ruang semuanya memiliki biaya nyata dan seringkali tidak berkontribusi pada pemahaman atau konversi. Menguji apakah gambar-gambar tersebut sepadan dengan biayanya adalah pertanyaan desain yang mendahului pekerjaan teknis apa pun pada saat penyampaian.

Stabilitas tata letak membutuhkan deklarasi dimensi. Gambar tanpa lebar dan tinggi yang ditentukan, atau rasio aspek yang setara, menyebabkan konten bergeser saat dimuat, yang merupakan kerugian yang terukur dan gangguan nyata bagi siapa pun yang membaca atau mengakses tautan. Hal ini mudah diperbaiki dan tetap menjadi salah satu penyebab paling umum dari ketidakstabilan tata letak.

Karena pekerjaan ini mencakup produksi konten, implementasi templat, dan infrastruktur pengiriman, peningkatan yang berkelanjutan membutuhkan otomatisasi daripada disiplin manual. Dalam praktiknya, audit dan prioritas berada di dalam kinerja web pekerjaan, transformasi otomatis, dan pengiriman responsif diimplementasikan melalui pengembangan produk atau ditangani di ujung jaringan oleh jaringan pengiriman, dan dampaknya paling besar bagi e-commerce katalog yang setiap halaman daftarnya memuat puluhan gambar.