Performa gambar

Gambar sering kali menjadi 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 mengirimkan lebih sedikit byte, tetapi Anda juga dapat mengoptimalkan jumlah byte yang dikirim kepada pengguna dengan menampilkan 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 pada ukuran yang tepat. Dalam hal ini, istilah size mengacu pada dimensions gambar. Tanpa mempertimbangkan variabel lain, gambar yang ditampilkan dalam penampung 500x500 piksel akan berukuran optimal pada 500x500 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 dalam resolusi lebih tinggi akan membuat teks dan gambar menjadi jauh lebih kecil—tepatnya setengah dari ukuran sebelumnya. Namun, 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.

Meninjau kembali contoh sebelumnya, jika perangkat memiliki DPR 2 dan gambar ditampilkan dalam penampung berukuran 500 x 500 piksel, berarti gambar persegi 1.000 piksel (disebut sebagai ukuran intrinsik) kini menjadi ukuran yang optimal. Demikian pula, jika perangkat memiliki DPR 3, maka gambar persegi 1.500 piksel akan menjadi ukuran 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 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 deskripsi kepadatan piksel untuk mengisyaratkan browser agar menggunakan image-500.png pada perangkat dengan DPR 1, image-1000.jpg pada perangkat dengan DPR 2, dan image-1500.jpg pada perangkat dengan DPR 3.

Meskipun semua ini mungkin tampak terpotong dan kering, DPR layar bukanlah satu-satunya pertimbangan dalam memilih gambar yang optimal untuk halaman tertentu. Tata letak halaman juga merupakan pertimbangan lain.

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 penampung dengannya—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 dikombinasikan dengan deskripsi lebar srcset, browser dapat memilih sumber gambar mana 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 kandidat gambar yang dapat dipilih browser, dipisahkan dengan 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 adalah lebar 1.000 piksel.

Dengan menggunakan informasi ini, browser mengevaluasi kondisi media dalam atribut sizes, dan—dalam hal ini—diinstruksikan bahwa jika lebar area pandang perangkat melebihi 768 piksel, gambar akan ditampilkan dengan lebar 500 piksel. Pada perangkat yang lebih kecil, gambar ditampilkan dalam ukuran 100vw—atau lebar area pandang penuh.

Kemudian, browser 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 1000 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 sehingga membutuhkan lebih sedikit waktu untuk didownload. Dengan menampilkan 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 kompresi lossy dan 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 menikmati dukungan yang cukup baik di seluruh browser. AVIF mendukung kompresi lossy dan lossless, serta pengujian telah menunjukkan penghematan lebih besar dari 50% jika dibandingkan dengan JPEG dalam beberapa kasus. AVIF juga menawarkan fitur Wide Color Gamut (WCG) dan Rentang Dinamis Tinggi (HDR).

Compression

Jika gambar terkait, ada dua jenis kompresi:

1. Kompresi lossy
2. Kompresi lossless

Kompresi lossy berfungsi dengan mengurangi akurasi gambar melalui kuantisasi, dan informasi warna tambahan dapat dihapus menggunakan subsampling kroma. Kompresi lossy paling efektif pada gambar dengan kepadatan tinggi dengan banyak noise dan warna—biasanya foto atau gambar dengan konten serupa. Ini karena artefak yang dihasilkan oleh kompresi lossy cenderung tidak terlihat dalam gambar mendetail tersebut. Namun, kompresi lossy mungkin kurang efektif dengan gambar yang berisi tepi tajam seperti gambar garis, detail yang mirip, atau teks. Kompresi lossy dapat diterapkan pada gambar JPEG, WebP, dan AVIF.

Kompresi lossless mengurangi ukuran file dengan mengompresi gambar tanpa kehilangan data. Kompresi lossless menjelaskan piksel berdasarkan perbedaan dari piksel di dekatnya. 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 tingkat kompresi yang berbeda sampai Anda menemukan kompromi yang baik antara kualitas gambar dan ukuran file. Beberapa layanan pengoptimalan gambar lanjutan dapat melakukannya untuk Anda secara otomatis, tetapi mungkin tidak menguntungkan 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 akan memilih elemen <source> pertama yang ditentukan dan cocok. Jika dapat merender gambar dalam format tersebut, akan digunakan gambar tersebut. Jika tidak, browser akan berpindah ke elemen <source> yang ditentukan berikutnya. Dalam cuplikan HTML sebelumnya, format AVIF lebih diprioritaskan daripada format WebP, kembali ke format JPEG jika AVIF atau WebP tidak didukung.

Elemen <picture> memerlukan elemen <img> yang disarangkan di dalamnya. Atribut alt, width, dan height ditentukan di <img> dan digunakan, terlepas dari <source> mana yang dipilih.

Elemen <source> juga mendukung atribut media, srcset, dan sizes. Serupa dengan contoh <img> sebelumnya, hal ini menunjukkan gambar yang akan dipilih di area pandang yang berbeda kepada browser.

<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. Pada contoh sebelumnya, DPR perangkat digunakan sebagai kondisi media. Perangkat apa pun 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 akan ditampilkan dengan lebar 500 piksel. Pada perangkat yang lebih kecil, ini mengisi seluruh lebar area pandang. Dengan menggabungkan atribut media dan srcset, Anda dapat memiliki kontrol yang lebih baik terkait gambar yang akan digunakan.

Hal ini diilustrasikan dalam tabel berikut, dengan beberapa lebar area pandang dan rasio piksel perangkat dievaluasi:

Perangkat dengan DPR 1 akan mendownload gambar image-500.jpg, termasuk sebagian besar pengguna desktop, yang melihat gambar pada ukuran ekstrinsik selebar 500 piksel. Di sisi lain, pengguna seluler dengan DPR 3 mendownload image-1500.jpg yang berpotensi lebih besar—gambar yang sama yang digunakan pada 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 <source> tambahan agar dapat menggunakan gambar yang berbeda untuk perangkat lebar dengan DPR tinggi:

Dengan kueri tambahan ini, Anda dapat melihat bahwa image-1000-sm.jpg dan image-1500-sm.jpg ditampilkan di area pandang yang kecil. Informasi tambahan ini memungkinkan Anda mengompresi gambar lebih lanjut, karena artefak kompresi tidak terlalu terlihat pada ukuran dan kepadatan tersebut, sekaligus tidak mengurangi kualitas gambar di perangkat desktop.

Atau, dengan menyesuaikan atribut srcset dan media, Anda dapat menghindari penayangan gambar besar di area pandang yang 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 diganti dengan deskripsi rasio piksel perangkat. Gambar yang ditayangkan di perangkat seluler dibatasi hingga /image-500.jpg atau /image-1000.jpg, bahkan pada perangkat dengan DPR 3.

Cara mengelola kompleksitas

Saat menggunakan gambar responsif, Anda dapat menemukan berbagai variasi ukuran dan format untuk setiap gambar. Dalam contoh sebelumnya, digunakan variasi untuk setiap ukuran, tetapi mengecualikan AVIF dan WebP. Berapa banyak varian yang harus Anda miliki? Seperti banyak masalah teknik, jawabannya cenderung "tergantung".

Meskipun Anda mungkin tergoda untuk memiliki sebanyak mungkin variasi untuk memberikan ukuran yang paling sesuai, setiap varian gambar tambahan akan menimbulkan biaya dan membuat penggunaan cache browser menjadi kurang efisien. Dengan hanya satu varian, setiap pengguna 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 image perlu diambil kembali dari server origin.

Selain itu, ukuran dokumen HTML Anda bertambah seiring setiap variasi. Anda mungkin akan mengirimkan beberapa kilobita 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 menampilkan format gambar yang optimal tanpa menambahkan byte ekstra ke respons HTML.

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 ditayangkan. Atau, jika header Accept menyertakan image/webp, gambar WebP akan ditayangkan. Jika kedua kondisi ini tidak terpenuhi, gambar JPEG akan ditayangkan.

Anda dapat mengubah respons berdasarkan konten header permintaan Accept di hampir setiap jenis server web—misalnya, Anda dapat menulis ulang permintaan gambar di server Apache berdasarkan header Accept menggunakan mod_rewrite.

Perilaku ini berbeda dengan perilaku yang akan Anda temukan di Jaringan Penayangan Konten Gambar (CDN). 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 berada di (atau dekat) area pandang. Tindakan 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 tersebut. Nilai async memberi tahu browser bahwa gambar dapat didekode secara asinkron, sehingga meningkatkan waktu untuk merender konten lainnya. Nilai sync memberi tahu browser bahwa gambar harus ditampilkan bersamaan dengan konten lainnya. Nilai default auto memungkinkan browser menentukan apa yang terbaik bagi pengguna.

Demo gambar

Menguji pengetahuan Anda

Berikutnya: Performa video

Meskipun gambar mungkin merupakan jenis media yang paling umum digunakan di web, gambar tersebut bukan satu-satunya yang perlu Anda ingat terkait performa. Video adalah jenis media umum lainnya yang digunakan di seluruh web, dan memiliki pertimbangan performanya sendiri. Pada modul berikutnya dalam kursus ini, pelajari beberapa teknik untuk mengoptimalkan video dan cara memuatnya secara efisien.