Gambar sering kali merupakan resource terberat dan paling umum di web. Oleh karena itu, mengoptimalkan gambar dapat meningkatkan performa di situs Anda secara signifikan. Pada umumnya, mengoptimalkan gambar berarti mengurangi waktu jaringan dengan mengirim lebih sedikit byte, tetapi Anda juga dapat mengoptimalkan jumlah byte yang dikirim ke pengguna dengan menayangkan gambar yang berukuran tepat untuk perangkat pengguna.
Gambar dapat ditambahkan ke halaman menggunakan elemen <img> atau <picture>, atau
properti background-image CSS.
Image size
Pengoptimalan pertama yang dapat Anda lakukan terkait penggunaan resource gambar adalah menampilkan gambar dengan ukuran yang benar—dalam hal ini, istilah ukuran mengacu pada dimensi gambar. Dengan mempertimbangkan tidak adanya variabel lain, gambar yang ditampilkan dalam penampung 500 piksel kali 500 piksel akan berukuran optimal 500 piksel kali 500 piksel. Misalnya, menggunakan gambar persegi 1.000 piksel berarti gambar tersebut dua kali lebih besar dari yang diperlukan.
Namun, ada banyak variabel yang terlibat dalam memilih ukuran gambar yang tepat, sehingga tugas memilih ukuran gambar yang tepat dalam setiap kasus menjadi cukup rumit. Pada tahun 2010, saat iPhone 4 dirilis, resolusi layar (640x960) dua kali lipat dari iPhone 3 (320x480). Namun, ukuran fisik layar iPhone 4 tetap kurang lebih sama dengan iPhone 3.
Menampilkan semuanya pada resolusi yang lebih tinggi akan membuat teks dan gambar secara signifikan lebih kecil—persisnya setengah dari ukuran sebelumnya. Sebagai gantinya, 1 piksel menjadi 2 piksel perangkat. Hal ini disebut rasio piksel perangkat (DPR). iPhone 4—dan banyak model iPhone yang dirilis setelahnya—memiliki DPR 2.
Melihat kembali contoh sebelumnya, jika perangkat memiliki DPR 2 dan gambar ditampilkan dalam penampung 500 piksel kali 500 piksel, gambar persegi 1.000 piksel (disebut sebagai ukuran intrinsik) kini menjadi ukuran yang optimal. Demikian pula, jika perangkat memiliki DPR 3, gambar persegi 1.500 piksel akan menjadi ukuran yang optimal.
srcset
Elemen <img> mendukung atribut srcset, yang memungkinkan Anda menentukan
daftar kemungkinan sumber gambar yang dapat digunakan browser. Setiap sumber gambar yang ditentukan
harus menyertakan URL gambar, dan deskripsi kepadatan piksel atau lebar.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
Cuplikan HTML sebelumnya menggunakan deskripsi kepadatan piksel untuk memberi tahu browser
agar menggunakan image-500.png di perangkat dengan DPR 1, image-1000.jpg di perangkat
dengan DPR 2, dan image-1500.jpg di perangkat dengan DPR 3.
Meskipun semua ini mungkin tampak sederhana, DPR layar bukan satu-satunya pertimbangan dalam memilih gambar yang optimal untuk halaman tertentu. Tata letak halaman adalah pertimbangan lainnya.
sizes
Solusi sebelumnya hanya berfungsi jika Anda menampilkan gambar dengan ukuran piksel CSS yang sama di semua area pandang. Dalam banyak kasus, tata letak halaman—dan ukuran penampungnya—berubah bergantung pada perangkat pengguna.
Atribut sizes memungkinkan Anda menentukan kumpulan ukuran sumber, dengan setiap
ukuran sumber terdiri dari kondisi media dan nilai. Atribut sizes
menjelaskan ukuran tampilan gambar yang diinginkan dalam piksel CSS. Jika digabungkan
dengan deskripsi lebar srcset, browser dapat memilih sumber gambar
yang paling sesuai untuk perangkat pengguna.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
Dalam cuplikan HTML sebelumnya, atribut srcset menentukan daftar kandidat gambar
yang dapat dipilih browser, yang dipisahkan oleh koma. Setiap kandidat dalam
daftar terdiri dari URL gambar, diikuti dengan sintaksis yang menunjukkan lebar intrinsik gambar. Ukuran intrinsik gambar adalah dimensinya. Misalnya, deskripsi 1000w menunjukkan bahwa lebar intrinsik gambar
berukuran 1.000 piksel.
Dengan menggunakan informasi ini, browser mengevaluasi kondisi media dalam atribut sizes, dan—dalam hal ini—diberi petunjuk bahwa jika lebar area pandang perangkat melebihi 768 piksel, gambar akan ditampilkan dengan lebar 500 piksel. Pada perangkat
yang lebih kecil, gambar ditampilkan di 100vw—atau lebar area pandang penuh.
Browser kemudian dapat menggabungkan informasi ini dengan daftar sumber gambar
srcset untuk menemukan gambar yang optimal. Misalnya, jika pengguna menggunakan perangkat
seluler dengan lebar layar 320 piksel dengan DPR 3, gambar akan ditampilkan
di 320 CSS pixels x 3 DPR = 960 device pixels. Dalam contoh ini, gambar
berukuran terdekat adalah image-1000.jpg yang memiliki lebar intrinsik 1.000
piksel (1000w).
Format file
Browser mendukung beberapa format file gambar yang berbeda. Format gambar modern seperti WebP dan AVIF dapat memberikan kompresi yang lebih baik daripada PNG atau JPEG, sehingga ukuran file gambar Anda lebih kecil dan memerlukan waktu lebih sedikit untuk didownload. Dengan menayangkan gambar dalam format modern, Anda dapat mengurangi waktu pemuatan resource, yang dapat menghasilkan Largest Contentful Paint (LCP) yang lebih rendah.
WebP adalah format yang didukung secara luas dan berfungsi di semua browser modern. WebP sering kali memiliki kompresi yang lebih baik daripada JPEG, PNG, atau GIF, yang menawarkan kompresi lossy dan kompresi lossless. WebP juga mendukung transparansi saluran alfa meskipun menggunakan kompresi lossy—fitur yang tidak ditawarkan oleh codec JPEG.
AVIF adalah format gambar yang lebih baru, dan meskipun tidak didukung secara luas seperti WebP, format ini memang memiliki dukungan yang cukup baik di seluruh browser. AVIF mendukung kompresi lossy dan lossless, dan pengujian telah menunjukkan penghematan lebih dari 50% jika dibandingkan dengan JPEG dalam beberapa kasus. AVIF juga menawarkan fitur Wide Color Gamut (WCG) dan High Dynamic Range (HDR).
Kompresi
Untuk gambar, ada dua jenis kompresi:
Kompresi lossy berfungsi dengan mengurangi akurasi gambar melalui kuantisasi, dan informasi warna tambahan dapat dihapus menggunakan subsampling kromatik. Kompresi lossy paling efektif pada gambar dengan kepadatan tinggi yang memiliki banyak derau dan warna—biasanya foto atau gambar dengan konten serupa. Hal ini karena artefak yang dihasilkan oleh kompresi lossy jauh lebih kecil kemungkinannya untuk dilihat dalam gambar yang begitu mendetail. Namun, kompresi lossy mungkin kurang efektif dengan gambar yang berisi tepi tajam seperti gambar garis, detail yang sama tajamnya, atau teks. Kompresi lossy dapat diterapkan ke gambar JPEG, WebP, dan AVIF.
Kompresi lossless mengurangi ukuran file dengan mengompresi gambar tanpa kehilangan data. Kompresi lossless menjelaskan piksel berdasarkan perbedaan dari piksel tetangganya. Kompresi lossless digunakan untuk format gambar GIF, PNG, WebP, dan AVIF.
Anda dapat mengompresi gambar menggunakan Squoosh, ImageOptim, atau layanan pengoptimalan gambar. Saat mengompresi, tidak ada setelan universal yang cocok untuk semua kasus. Pendekatan yang direkomendasikan adalah bereksperimen dengan berbagai tingkat kompresi hingga Anda menemukan kompromi yang baik antara kualitas gambar dan ukuran file. Beberapa layanan pengoptimalan gambar lanjutan dapat melakukannya secara otomatis untuk Anda, tetapi mungkin tidak terjangkau secara finansial bagi semua pengguna.
Elemen <picture>
Elemen <picture> memberi Anda fleksibilitas yang lebih besar dalam menentukan beberapa
kandidat gambar:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Saat menggunakan elemen <source> dalam elemen <picture>, Anda dapat menambahkan dukungan untuk gambar AVIF dan WebP, tetapi kembali ke format gambar lama yang lebih kompatibel jika browser tidak mendukung format modern. Dengan pendekatan ini, browser memilih elemen <source> pertama yang ditentukan yang cocok. Jika dapat
merender gambar dalam format tersebut, gambar tersebut akan digunakan. Jika tidak, browser
akan beralih ke elemen <source> berikutnya yang ditentukan. Dalam cuplikan HTML
sebelumnya, format AVIF lebih diprioritaskan daripada format WebP, yang kembali ke
format JPEG jika AVIF atau WebP tidak didukung.
Elemen <picture> memerlukan elemen <img> yang disusun bertingkat di dalamnya. Atribut
alt, width, dan height ditentukan di <img> dan digunakan
terlepas dari <source> yang dipilih.
Elemen <source> juga mendukung atribut media, srcset, dan sizes. Serupa dengan contoh <img> sebelumnya, ini menunjukkan kepada browser gambar mana yang akan dipilih di berbagai area pandang.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Atribut media menggunakan kondisi media. Dalam contoh sebelumnya, DPR perangkat digunakan sebagai kondisi media. Setiap perangkat dengan DPR lebih besar dari
atau sama dengan 1,5 akan menggunakan elemen <source> pertama. Elemen <source>
memberi tahu browser bahwa, pada perangkat dengan area pandang yang lebih lebar dari 768 piksel, calon gambar yang dipilih ditampilkan dengan lebar 500 piksel. Pada perangkat yang lebih kecil,
hal ini akan menghabiskan seluruh lebar area pandang. Dengan menggabungkan atribut media dan srcset, Anda dapat memiliki kontrol yang lebih baik atas gambar yang akan digunakan.
Hal ini diilustrasikan dalam tabel berikut, dengan beberapa lebar area pandang dan rasio piksel perangkat dievaluasi:
| Lebar Area Pandang (piksel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Perangkat dengan DPR 1 akan mendownload gambar image-500.jpg, termasuk sebagian besar
pengguna desktop—yang melihat gambar dengan ukuran ekstrinsik selebar 500 piksel. Di
sisi lain, pengguna seluler dengan DPR 3 mendownload image-1500.jpg yang berpotensi lebih besar—gambar yang sama dengan yang digunakan di perangkat desktop dengan DPR 3.
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Dalam contoh ini, elemen <picture> disesuaikan untuk menyertakan elemen
<source> tambahan guna menggunakan gambar yang berbeda untuk perangkat lebar dengan DPR tinggi:
| Lebar Area Pandang (piksel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 1000-sm.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Dengan kueri tambahan ini, Anda dapat melihat bahwa image-1000-sm.jpg dan
image-1500-sm.jpg ditampilkan di area pandang kecil. Informasi tambahan ini
memungkinkan Anda mengompresi gambar lebih lanjut, karena artefak kompresi tidak terlalu
terlihat pada ukuran dan kepadatan tersebut, sekaligus tidak mengorbankan kualitas gambar
di perangkat desktop.
Atau, dengan menyesuaikan atribut srcset dan media, Anda dapat menghindari
penayangan gambar besar di area pandang kecil:
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Dalam cuplikan HTML sebelumnya, deskripsi lebar telah dihapus dan diganti dengan
deskripsi rasio piksel perangkat. Gambar yang ditayangkan di perangkat seluler dibatasi
ke /image-500.jpg atau /image-1000.jpg, bahkan di perangkat dengan DPR 3.
Cara mengelola kompleksitas
Saat menangani gambar responsif, Anda mungkin menemukan banyak variasi ukuran dan format yang berbeda untuk setiap gambar. Dalam contoh sebelumnya, variasi untuk setiap ukuran digunakan, tetapi mengecualikan AVIF dan WebP. Berapa banyak varian yang sebaiknya Anda miliki? Seperti banyak masalah teknik, jawabannya cenderung "tergantung".
Meskipun Anda mungkin ingin memiliki sebanyak mungkin variasi untuk memberikan hasil yang paling sesuai, setiap varian gambar tambahan akan menimbulkan biaya dan membuat penggunaan cache browser menjadi kurang efisien. Dengan hanya satu varian, setiap pengguna akan menerima gambar yang sama, sehingga dapat di-cache dengan sangat efisien.
Di sisi lain, jika ada banyak variasi, setiap varian memerlukan entri cache lain. Biaya server dapat meningkat dan dapat menurunkan performa jika entri cache varian telah habis masa berlakunya, dan gambar perlu diambil lagi dari server origin.
Selain itu, ukuran dokumen HTML Anda akan bertambah dengan setiap variasi. Anda mungkin mengirimkan beberapa kilobyte HTML untuk setiap gambar.
Menayangkan gambar berdasarkan header permintaan Accept
Header permintaan HTTP Accept memberi tahu server jenis konten yang
dipahami browser pengguna. Informasi ini dapat digunakan oleh server Anda untuk menayangkan
format gambar yang optimal tanpa menambahkan byte tambahan ke respons HTML Anda.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
Cuplikan HTML sebelumnya adalah versi sederhana dari kode yang dapat Anda tambahkan ke
backend JavaScript server untuk memilih dan menayangkan format gambar yang optimal.
Jika header Accept permintaan menyertakan image/avif, gambar AVIF akan
disajikan. Jika tidak, jika header Accept menyertakan image/webp, gambar WebP
akan ditayangkan. Jika tidak ada satu pun kondisi ini yang benar, gambar JPEG akan
dikirim.
Anda dapat mengubah respons berdasarkan konten header permintaan Accept
di hampir semua jenis server web—misalnya, Anda dapat menulis ulang permintaan gambar
di server Apache berdasarkan header Accept menggunakan mod_rewrite.
Perilaku ini tidak berbeda dengan perilaku yang akan Anda temukan di Jaringan Penayangan Konten (CDN) Gambar. CDN gambar adalah solusi yang sangat baik untuk mengoptimalkan gambar dan mengirim format yang optimal berdasarkan perangkat dan browser pengguna.
Kuncinya adalah menemukan keseimbangan, menghasilkan jumlah kandidat gambar yang wajar, dan mengukur dampaknya terhadap pengalaman pengguna. Gambar yang berbeda dapat memberikan hasil yang berbeda, dan pengoptimalan yang diterapkan ke setiap gambar bergantung pada ukurannya dalam halaman dan perangkat yang digunakan pengguna Anda. Misalnya, banner besar lebar penuh mungkin memerlukan lebih banyak varian daripada gambar thumbnail di halaman listingan produk e-commerce.
Pemuatan lambat
Anda dapat memberi tahu browser untuk memuat gambar secara lambat saat gambar muncul di
area pandang menggunakan atribut loading. Nilai atribut lazy memberi tahu browser untuk tidak mendownload gambar hingga gambar berada di (atau di dekat) area pandang. Hal ini
menghemat bandwidth, sehingga browser dapat memprioritaskan resource yang diperlukan untuk
merender konten penting yang sudah ada di area pandang.
decoding
Atribut decoding memberi tahu browser cara mendekode gambar. Nilai
async memberi tahu browser bahwa gambar dapat didekode secara asinkron,
yang mungkin meningkatkan waktu untuk merender konten lain. Nilai sync memberi tahu browser bahwa gambar harus ditampilkan secara bersamaan dengan konten lainnya.
Nilai default auto memungkinkan browser memutuskan mana yang terbaik untuk
pengguna.
Demo gambar
Menguji pengetahuan Anda
Format gambar mana yang mendukung kompresi lossless?
Format gambar mana yang mendukung kompresi lossy?
Apa yang diberi tahu deskripsi lebar (misalnya, 1000w)
kepada browser tentang kandidat gambar yang ditentukan dalam atribut
srcset?
Apa yang disampaikan atribut sizes kepada browser tentang elemen <img> yang diterapkan?
srcset elemen <img> yang harus dimuat,
mengingat dimensi area pandang pengguna saat ini.
srcset elemen <img>.
Berikutnya: Performa video
Meskipun gambar mungkin merupakan jenis media yang paling umum digunakan di web, gambar jauh dari satu-satunya jenis media yang perlu Anda perhatikan dalam hal performa. Video adalah jenis media umum lainnya yang digunakan di seluruh web, dan memiliki pertimbangan performanya sendiri. Di modul berikutnya dalam kursus ini, pelajari beberapa teknik seputar pengoptimalan video dan cara memuat video secara efisien.