Gunakan Ukuran Gambar yang Tepat

Ukur tampilan terlebar yang pernah dirender oleh gambar, kalikan dua untuk layar dengan densitas tinggi, lalu ubah ukuran pustaka Anda ke angka tersebut. Menyajikan foto berukuran 4000 piksel ke dalam slot 800 piksel berarti browser mengunduh sekitar 25 kali lebih banyak data piksel daripada yang dapat ditampilkannya, lalu membuang sisanya.

Pada koneksi ponsel, pengunjung membayar semua itu, baik dalam hal waktu maupun kuota data. Menentukan ukuran gambar dengan tepat biasanya merupakan satu-satunya pengurangan bobot halaman terbesar yang tersedia untuk sebuah situs, dan ini hanya memerlukan satu kali proses massal, bukan desain ulang.

Mengapa gambar yang terlalu besar memakan biaya sangat besar

Ukuran file berbanding lurus dengan jumlah piksel, sehingga memangkas lebar dan tinggi menjadi setengahnya akan membuang sekitar 75 persen data. Hubungan ini bersifat kuadratik, bukan linier, itulah sebabnya pemborosan tersebut membengkak dengan cepat.

Baris pertama adalah kasus umum pada situs-situs di mana editor mengunggah langsung dari kamera. Browser mengunduh 4.2 MB, memperkecil ukurannya, dan menampilkan file yang setara dengan 180 KB.

Cara mengukur ukuran tampilan yang sebenarnya

Klik kanan gambar pada halaman aktif Anda, pilih Inspect (Periksa), dan baca dimensi yang ditampilkan, bukan dimensi aslinya. Browser melaporkan kedua angka tersebut, dan selisih di antara keduanya adalah pemborosan.

Periksa kasus terlebar, bukan kasus yang tipikal. Gambar di dalam kolom artikel mungkin dirender pada 700 piksel di desktop dan 380 di ponsel, jadi 700 adalah angka yang penting. Lakukan pengujian pada jendela browser terlebar yang realistis digunakan oleh pengunjung Anda, karena spanduk lebar penuh (full width banner) akan membesar mengikuti viewport dan membutuhkan kalkulasi yang berbeda.

Aturan penggandaan untuk layar densitas tinggi

Kalikan lebar tampilan dengan 2 dan berhenti di situ, karena layar di atas densitas tersebut tidak menunjukkan peningkatan lebih lanjut yang dapat disadari oleh siapa pun. Gambar yang ditampilkan pada 700 piksel harus diekspor pada 1400 piksel.

Mengalikan dengan tiga terkadang disarankan tetapi jarang sekali diperlukan. Perbedaan antara densitas 2 dan 3 kali tidak dapat dideteksi pada jarak pandang normal, sementara ukuran file membengkak lebih dari setengahnya. Mengompresi lebih kuat pada densitas 2 kali menghasilkan hasil yang lebih baik daripada mengompresi ringan pada 3 kali, karena piksel ekstra tersebut menyamarkan kompresi.

Lebar tampilan umum untuk mengubah ukuran

• Gambar badan artikel: ditampilkan sekitar 700 px, ekspor pada 1400 px.
• Hero lebar penuh: ditampilkan hingga 1920 px, ekspor pada 1920 px dan kompres lebih kuat.
• Fitur setengah lebar: ditampilkan sekitar 600 px, ekspor pada 1200 px.
• Thumbnail kisi produk: ditampilkan sekitar 300 px, ekspor pada 600 px.
• Foto profil atau penulis: ditampilkan sekitar 80 px, ekspor pada 160 px.
• Logo di header: ditampilkan sekitar 180 px, ekspor pada 360 px atau gunakan grafis vektor.

Mengapa gambar lebar penuh adalah pengecualian

Spanduk lebar penuh tidak memiliki ukuran tampilan yang tetap, jadi batasi pada 1920 piksel dan kompres lebih kuat alih-alih menggandakannya. Menggandakan gambar lebar penuh menjadi 3840 piksel menghasilkan file yang tidak dapat dibenarkan untuk halaman mana pun.

Spanduk biasanya dilihat dari kejauhan dan memiliki detail halus yang lebih sedikit daripada foto produk, yang berarti kompresi agresif tidak begitu terlihat pada spanduk tersebut. Spanduk 1920 piksel dengan kualitas 70 di WebP biasanya berukuran di bawah 200 KB dan terlihat tepat di setiap layar, sementara versi 3840 piksel tidak memberikan manfaat visual apa pun dengan bobot 4 kali lipat.

Cara memperbaiki seluruh pustaka

Untuk mengubah ukuran situs yang ada dengan benar, ikuti 6 langkah ini.

1. Daftar slot gambar dalam desain Anda, yang biasanya terdiri dari 4 hingga 6 ukuran berbeda, bukan puluhan.
2. Ukur lebar tampilan setiap slot menggunakan inspektur browser pada halaman aktif.
3. Kalikan dua setiap lebar untuk mendapatkan ukuran ekspor Anda.
4. Urutkan pustaka ke dalam folder berdasarkan slot, karena proses massal menerapkan satu ukuran ke setiap file di dalamnya.
5. Ubah ukuran setiap folder ke lebar targetnya, lalu kompres dan konversi dalam satu langkah yang sama.
6. Ganti file dengan tetap mempertahankan nama yang sama agar halaman yang ada tetap berfungsi.

Mengurutkan ke dalam folder adalah langkah yang mengubah ini menjadi pekerjaan massal. Sebagian besar situs menggunakan ukuran gambar berbeda yang jauh lebih sedikit daripada yang mereka duga, dan pengelompokan berdasarkan slot menghilangkan kebutuhan untuk menangani file satu per satu.

Gambar responsif dan atribut srcset

Gunakan srcset untuk menawarkan beberapa ukuran dan biarkan browser memilih ukuran yang tepat untuk setiap perangkat. Ponsel kemudian akan mengunduh file 400 piksel sementara desktop mengunduh file 1400 piksel dari markup yang sama.

Hasilkan 3 lebar per gambar, umumnya 400, 800, dan 1600 piksel, lalu daftarkan bersama dengan lebar pikselnya agar browser dapat memilih. Sebagian besar sistem konten menghasilkan ini secara otomatis saat diunggah, jadi periksa apa yang sudah dilakukan oleh platform Anda. Jika platform Anda melakukannya, mengunggah file asli dengan ukuran yang tepat tetap akan meningkatkan kualitas setiap varian yang dihasilkan.

Ubah ukuran sebelum mengompresi, selalu

Mengubah ukuran terlebih dahulu berarti kompresi memiliki beban kerja yang lebih sedikit, sehingga kualitas dapat tetap tinggi sementara ukuran file tetap kecil. Mengompresi terlebih dahulu lalu mengubah ukuran setelahnya akan membuang detail yang kemudian Anda buang lagi.

Urutan ini juga memengaruhi tampilan hasil akhir. Gambar yang dikompresi pada ukuran penuh membawa artefak yang menjadi lebih terlihat saat gambar diperkecil, karena artefak tersebut ikut mengecil bersamanya. Mengubah ukuran terlebih dahulu menghasilkan sumber yang lebih bersih untuk enkoder dan hasil yang jauh lebih baik pada ukuran file yang sama.

Apa pengaruhnya terhadap kecepatan halaman

Menentukan ukuran gambar dengan tepat biasanya memangkas 60 hingga 90 persen bobot gambar pada situs yang belum pernah melakukannya. Peningkatan ini lebih besar daripada perubahan format apa pun dan biasanya lebih besar daripada gabungan semua optimasi lainnya.

Efeknya sangat terasa pada pengunjung seluler, di mana koneksi lebih lambat dan data membutuhkan biaya. Largest Contentful Paint meningkat secara langsung, karena pengukuran tersebut biasanya ditentukan oleh satu gambar besar. Menyelesaikan audit "Properly size images" di Lighthouse sering kali menyelesaikan 2 atau 3 peringatan terkait pada saat yang sama.

Jangan pernah memperbesar gambar agar pas

Memperbesar gambar akan menambahkan piksel yang tidak pernah ditangkap oleh kamera, sehingga hasilnya menjadi buram dan ukuran file membengkak tanpa manfaat apa pun. Memperkecil ukuran selalu aman, sementara memperbesar ukuran adalah satu-satunya operasi yang dipastikan akan terlihat lebih buruk.

Jika gambar sumber lebih kecil dari slot yang harus diisi, pilihan yang paling tepat adalah menggunakannya pada ukuran aslinya, memotong tata letak di sekitarnya, atau mengganti gambar tersebut. Memperbesar foto 600 piksel menjadi 1600 piksel menghasilkan file buram dengan bobot 4 kali lipat dari aslinya, yang gagal dalam hal kualitas sekaligus kecepatan pada saat yang sama.

Memeriksa halaman untuk gambar yang terlalu besar

Buka alat pengembang (developer tools), beralih ke tab Network (Jaringan), filter berdasarkan gambar, lalu muat ulang halaman. Daftar tersebut menampilkan setiap gambar beserta ukuran transfernya, diurutkan dari yang terbesar.

Setiap gambar tunggal yang berukuran di atas 500 KB patut diselidiki, dan halaman mana pun dengan total gambar lebih dari 2 MB memiliki masalah. Arahkan kursor ke atas gambar di panel Elements untuk melihat ukuran asli dan ukuran tampilan secara berdampingan. Selisih yang besar antara kedua angka tersebut adalah definisi dari gambar dengan ukuran yang tidak tepat, dan ini dapat terlihat dalam hitungan detik.

Mengubah ukuran pustaka dalam satu proses massal

Atur lebar target sekali dan terapkan ke setiap file di dalam folder, alih-alih mengubah ukuran gambar satu per satu. Pustaka yang berisi beberapa ratus gambar dapat diubah ukurannya dalam hitungan menit jika pekerjaan tersebut dilakukan secara massal.

Masukkan hingga 500 file sekaligus, atau seret arsip ZIP langsung ke dalam, lalu atur lebar, format, dan target kompresi untuk seluruh rangkaian tersebut. Semuanya berjalan di dalam browser Anda pada prosesor Anda sendiri, sehingga aset situs klien, aset pementasan (staging), dan galeri yang belum diterbitkan tidak pernah sampai ke server. Tidak ada yang diunggah, yang berarti perubahan ukuran seluruh pustaka terjadi tanpa ada satu file pun yang melintasi jaringan.