Gambar sering kali menjadi aset terberat dan paling umum di web. Sebagai seorang hasil tersebut, mengoptimalkan gambar dapat meningkatkan performa di situs Anda secara signifikan. Pada umumnya, mengoptimalkan gambar berarti mengurangi waktu jaringan dengan mengirim lebih sedikit {i>byte<i}, tetapi Anda juga dapat mengoptimalkan jumlah {i>byte<i} yang dikirim ke pengguna dengan menyajikan gambar dengan ukuran yang sesuai 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 ketika menggunakan sumber daya gambar adalah untuk menampilkan gambar dengan ukuran yang tepat—dalam hal ini, istilah ukuran mengacu pada dimensi gambar. Dengan mempertimbangkan tidak ada variabel lain, gambar ditampilkan dalam penampung 500 piksel kali 500 piksel akan berukuran optimal pada 500 piksel dengan 500 piksel. Misalnya, menggunakan gambar persegi 1000 piksel berarti gambar tersebut dua kali lebih besar dari yang dibutuhkan.
Namun, ada banyak variabel yang terlibat dalam pemilihan ukuran gambar yang tepat, sehingga tugas memilih ukuran gambar yang tepat dalam setiap kasus menjadi cukup rumit. Pada tahun 2010, ketika iPhone 4 dirilis, resolusi layar (640x960) dua kali lipat dari iPhone 3 (320x480). Namun, ukuran fisik layar iPhone 4 tetap kira-kira sama dengan iPhone 3.
Menampilkan semua hal dalam resolusi lebih tinggi akan menghasilkan teks dan gambar jauh lebih kecil—lebih tepat separuh dari ukuran sebelumnya. Sebaliknya, 1 piksel menjadi 2 piksel perangkat. Ini disebut rasio piksel perangkat (DPR). Tujuan iPhone 4—dan banyak model iPhone yang dirilis setelahnya—memiliki DPR 2.
Meninjau kembali contoh sebelumnya, jika perangkat memiliki DPR 2 dan gambar ditampilkan dalam penampung berukuran 500 piksel x 500 piksel, lalu gambar persegi 1000 piksel (disebut sebagai ukuran intrinsik) kini merupakan ukuran yang optimal. Demikian pula, jika perangkat memiliki DPR 3, maka gambar persegi 1500 piksel akan menjadi ukuran yang optimal.
srcset
Elemen <img> mendukung atribut srcset, yang memungkinkan Anda menentukan
daftar sumber gambar yang mungkin digunakan oleh browser. Setiap sumber gambar ditentukan
harus menyertakan URL gambar, dan deskriptor lebar atau kepadatan piksel.
<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 deskriptor kepadatan piksel untuk memberikan petunjuk ke browser
untuk menggunakan image-500.png di perangkat dengan DPR 1, image-1000.jpg di perangkat
dengan DPR 2, dan image-1500.jpg pada perangkat dengan DPR 3.
Meskipun ini mungkin tampak jelek, DPR sebuah layar bukanlah satu-satunya dalam memilih gambar yang optimal untuk halaman tertentu. Halaman tata letak menjadi pertimbangan lain.
sizes
Solusi sebelumnya hanya berfungsi jika Anda menampilkan gambar pada piksel CSS yang sama di semua area pandang. Dalam banyak kasus, tata letak laman—dan atribut ukurannya sesuai dengan itu—berubah tergantung 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 deskriptor lebar srcset, browser dapat memilih sumber gambar
yang terbaik 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 gambar
kandidat yang dapat dipilih browser, yang dipisahkan dengan koma. Setiap kandidat di
daftar terdiri dari URL gambar, diikuti dengan sintaksis yang menunjukkan
lebar intrinsik gambar. Ukuran intrinsik gambar adalah dimensinya. Sebagai
contoh, deskripsi 1000w menunjukkan bahwa lebar intrinsik gambar adalah
Lebar 1000 piksel.
Dengan menggunakan informasi ini, browser mengevaluasi kondisi media di sizes
, dan — dalam hal ini — diinstruksikan bahwa jika lebar area pandang perangkat
melebihi 768 piksel, gambar ditampilkan dengan lebar 500 piksel. Pada layar yang lebih kecil,
perangkat, gambar akan ditampilkan pada 100vw—atau lebar area pandang penuh.
Kemudian, browser dapat menggabungkan informasi ini dengan daftar gambar srcset
sumber lainnya untuk menemukan gambar yang optimal. Misalnya, jika pengguna menggunakan perangkat seluler
perangkat dengan lebar layar 320 piksel dengan DPR 3, gambar akan ditampilkan
pukul 320 CSS pixels x 3 DPR = 960 device pixels. Dalam contoh ini, yang terdekat
gambar berukuran image-1000.jpg yang memiliki lebar intrinsik 1000
piksel (1000w).
Format file
Browser mendukung berbagai format file gambar. Format gambar modern seperti WebP dan AVIF dapat memberikan kompresi yang lebih baik daripada PNG atau JPEG, sehingga ukuran file gambar lebih kecil sehingga waktu pengunduhan yang dibutuhkan menjadi lebih singkat. 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 yang berfungsi di semua browser modern. WebP sering kali memiliki kompresi yang lebih baik daripada JPEG, PNG, atau GIF, yang menawarkan 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, mendapatkan dukungan yang cukup baik di seluruh browser. AVIF mendukung lossy serta kompresi lossless, dan pengujian menunjukkan penghematan lebih dari 50% saat dibandingkan dengan JPEG dalam beberapa kasus. AVIF juga menawarkan Wide Color Gamut (WCG) dan Fitur Rentang Dinamis Tinggi (HDR).
Kompresi
Ada dua jenis kompresi untuk gambar:
Kompresi lossy bekerja dengan mengurangi akurasi gambar melalui kuantisasi, dan informasi warna tambahan dapat dibuang menggunakan subsampling kroma. Kompresi lossy paling efektif pada gambar dengan kepadatan tinggi yang memiliki banyak noise dan warna—biasanya foto atau gambar dengan konten yang serupa. Hal ini karena artefak yang dihasilkan oleh kompresi lossy cenderung tidak terlihat gambar yang sangat detail. Namun, kompresi lossy mungkin kurang efektif dengan gambar yang berisi tepian tajam seperti seni garis, detail yang mirip dengan aslinya, atau teks. Kompresi lossy dapat diterapkan ke gambar JPEG, WebP, dan AVIF.
Kompresi lossless mengurangi ukuran file dengan mengompresi gambar tanpa data kerugian. Kompresi lossless menjelaskan piksel berdasarkan perbedaan dari piksel yang berdekatan. Kompresi lossless digunakan untuk GIF, PNG, WebP, dan Format gambar AVIF.
Anda dapat mengompresi gambar menggunakan Squoosh, ImageOptim, atau gambar pengoptimalan klasik. 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 tingkat lanjut dapat melakukannya untuk Anda secara otomatis, tetapi mungkin tidak layak secara finansial untuk 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
gambar AVIF dan WebP, namun beralih ke gambar lama yang lebih kompatibel
format baru jika browser tidak mendukung format modern. Dengan pendekatan ini,
browser memilih elemen <source> pertama yang ditentukan dan cocok. Jika dapat
merender gambar dalam format tersebut, maka gambar itu akan digunakan. Jika tidak, browser
berpindah ke elemen <source> berikutnya yang ditentukan. Dalam HTML sebelumnya
ini, format AVIF lebih diprioritaskan daripada format WebP, dengan kembali ke
dalam format JPEG jika AVIF atau WebP tidak didukung.
Elemen <picture> memerlukan elemen <img> yang disusun bertingkat di dalamnya. Tujuan
Atribut alt, width, dan height ditentukan di <img> dan digunakan
terlepas dari <source> yang dipilih.
Elemen <source> juga mendukung media, srcset, dan sizes
. Serupa dengan contoh <img> sebelumnya, ini menunjukkan
browser untuk memilih gambar pada area pandang yang berbeda.
<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 yang 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,
kandidat gambar yang dipilih ditampilkan dengan lebar 500 piksel. Pada perangkat yang lebih kecil,
ini akan memenuhi seluruh lebar tampilan yang terlihat. Dengan menggabungkan media dan srcset
Anda bisa memiliki kontrol yang lebih baik atas gambar yang akan digunakan.
Diilustrasikan dalam tabel berikut, di mana beberapa lebar {i>viewport<i} 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 pada ukuran eksternal dengan lebar 500 piksel. Aktif
di sisi lain, pengguna seluler dengan DPR 3 mengunduh
image-1500.jpg—gambar yang sama yang digunakan di perangkat desktop dengan DPR 3.
<picture>
<source
media="(min-width: 560px) 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
Elemen <source> untuk menggunakan gambar yang berbeda bagi perangkat lebar dengan DPR tinggi:
| Lebar Area Pandang (piksel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.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 pada 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
yang menyajikan gambar besar pada area pandang kecil:
<picture>
<source
media="(min-width: 560px)"
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, deskriptor lebar telah dihapus dan digantikan
deskriptor 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 bekerja dengan gambar responsif, Anda dapat menemukan banyak variasi ukuran, dan format untuk setiap gambar. Dalam contoh sebelumnya, variasi untuk setiap ukuran akan digunakan, tetapi mengecualikan AVIF dan WebP. Berapa banyak varian yang harus Anda miliki? Seperti banyak masalah teknik, jawabannya cenderung "tergantung".
Meskipun Anda tergoda untuk memiliki sebanyak mungkin variasi yang paling cocok, setiap varian gambar tambahan memiliki biaya dan membuat penggunaan atau cache browser. Dengan hanya satu varian, setiap pengguna menerima gambar yang sama, sehingga dapat disimpan di {i>cache<i} dengan sangat efisien.
Di sisi lain, jika ada banyak variasi, setiap varian membutuhkan entri cache. Biaya server dapat meningkat dan dapat menurunkan performa jika entri cache varian telah kedaluwarsa, dan gambar harus diambil lagi dari ke server origin.
Selain itu, ukuran dokumen HTML Anda berkembang dengan setiap variasi. Anda mungkin mendapati diri Anda mengirimkan beberapa kilobita HTML untuk setiap gambar.
Menayangkan gambar berdasarkan header permintaan Accept
Header permintaan HTTP Accept memberi tahu server jenis konten mana
oleh 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 kode yang disederhanakan yang dapat Anda tambahkan ke
backend JavaScript server Anda untuk memilih dan menayangkan format gambar yang optimal.
Jika header permintaan Accept menyertakan image/avif, maka gambar AVIF akan
dilayani. Sebaliknya, jika header Accept menyertakan image/webp, gambar WebP
ditayangkan. Jika kedua kondisi ini tidak terpenuhi, maka gambar JPEG
dilayani.
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 sama seperti yang akan Anda temukan di Jaringan Penayangan Konten Gambar (CDN). CDN Gambar adalah solusi yang sangat baik untuk mengoptimalkan gambar dan mengirimkan format yang optimal berdasarkan perangkat dan browser pengguna.
Kuncinya adalah menemukan keseimbangan, membuat kandidat gambar dalam jumlah 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 ukuran pada halaman dan perangkat yang digunakan pengguna. Sebagai contoh, {i>hero image <i}lebar penuh mungkin membutuhkan lebih banyak varian halaman listingan produk e-commerce.
Pemuatan lambat
Anda dapat memberi tahu browser untuk menjalankan gambar dengan lambat saat gambar tersebut muncul di
area tampilan menggunakan atribut loading. Nilai atribut lazy memberi tahu
browser tidak mendownload gambar hingga berada di (atau dekat) area pandang. Ini
menghemat {i>bandwidth<i}, sehingga {i>browser<i} dapat
memprioritaskan sumber daya yang diperlukan
merender konten penting yang sudah ada di area pandang.
decoding
Atribut decoding memberi tahu browser cara mendekode gambar. J
nilai async memberi tahu browser bahwa gambar dapat didekode secara asinkron,
mungkin meningkatkan waktu untuk merender konten lainnya. Nilai sync memberi tahu
browser bahwa gambar harus disajikan bersamaan dengan konten lainnya.
Nilai default auto memungkinkan browser menentukan pilihan terbaik untuk
.
Demo gambar
Menguji pengetahuan Anda
Format gambar mana yang mendukung kompresi lossless?
Format gambar mana yang mendukung kompresi lossy?
Apa yang ditunjukkan oleh deskripsi lebar (misalnya, 1000w)
browser tentang kandidat gambar yang ditentukan dalam srcset
?
Apa yang ditunjukkan atribut sizes kepada browser tentang
Elemen <img> tempatnya diterapkan?
srcset elemen <img> harus dimuat,
berdasarkan dimensi
area pandang pengguna saat ini.
srcset milik elemen <img>.
Berikutnya: Performa video
Meskipun gambar mungkin merupakan jenis media yang paling umum digunakan di web, gambar ini jauh satu-satunya hal yang perlu Anda perhatikan terkait kinerja. Video adalah jenis media lain yang umum digunakan di seluruh web, dan memiliki pertimbangan performa. Pada modul berikutnya dalam kursus ini, pelajari beberapa cara mengoptimalkan video dan cara memuatnya secara efisien.