Performa gambar

Gambar sering kali menjadi resource yang paling berat dan paling umum di web. Oleh karena itu, mengoptimalkan gambar dapat meningkatkan performa situs Anda secara signifikan. Dalam sebagian besar kasus, 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 CSS background-image.

Image size

Pengoptimalan pertama yang dapat Anda lakukan saat menggunakan resource gambar adalah menampilkan gambar dalam ukuran yang benar. Dalam hal ini, istilah ukuran mengacu pada dimensi gambar. Tanpa mempertimbangkan variabel lain, gambar yang ditampilkan dalam penampung berukuran 500 piksel x 500 piksel akan berukuran optimal 500 piksel x 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 layarnya (640x960) dua kali lipat dari iPhone 3 (320x480). Namun, ukuran fisik layar iPhone 4 tetap hampir sama dengan iPhone 3.

Menampilkan semuanya pada resolusi yang lebih tinggi akan membuat teks dan gambar menjadi jauh lebih kecil—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.

Kembali ke contoh sebelumnya, jika perangkat memiliki DPR 2 dan gambar ditampilkan dalam penampung 500 piksel kali 500 piksel, maka gambar persegi 1.000 piksel (disebut sebagai ukuran intrinsik) kini menjadi ukuran yang optimal. Demikian pula, jika perangkat memiliki DPR 3, maka gambar persegi berukuran 1500 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 deskriptor kepadatan piksel lebar atau.

<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 memberi petunjuk kepada 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 semuanya tampak jelas, DPR layar bukan 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 tampilan. Dalam banyak kasus, tata letak halaman—dan ukuran penampungnya—berubah bergantung pada perangkat pengguna.

Dengan atribut sizes, Anda dapat menentukan serangkaian ukuran sumber, dengan setiap ukuran sumber terdiri dari kondisi media dan nilai. Atribut sizes mendeskripsikan ukuran tampilan yang diinginkan dari gambar dalam piksel CSS. Jika digabungkan dengan deskriptor lebar srcset, browser dapat memilih sumber gambar mana 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 dengan koma. Setiap kandidat dalam daftar terdiri dari URL gambar, diikuti dengan sintaksis yang menunjukkan lebar intrinsik gambar. Ukuran intrinsik gambar adalah dimensinya. Misalnya, deskriptor 1000w menunjukkan bahwa lebar intrinsik gambar adalah 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 pada 100vw—atau lebar area tampilan 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 dan DPR 3, gambar ditampilkan pada 320 CSS pixels x 3 DPR = 960 device pixels. Dalam contoh ini, gambar berukuran paling dekat 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 dan waktu download 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 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 codec JPEG.

AVIF adalah format gambar yang lebih baru, dan meskipun tidak didukung seluas WebP, format ini memang didukung dengan cukup baik di berbagai 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

Terkait gambar, 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 kepadatan tinggi dengan banyak derau dan warna—biasanya foto atau gambar dengan konten serupa. Hal ini karena artefak yang dihasilkan oleh kompresi lossy cenderung tidak terlihat dalam gambar yang sangat detail seperti itu. Namun, kompresi lossy mungkin kurang efektif dengan gambar yang berisi tepi tajam seperti seni garis, detail yang sangat jelas, 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 mendeskripsikan piksel berdasarkan perbedaan dari piksel di sekitarnya. Kompresi lossless digunakan untuk format gambar GIF, PNG, WebP, dan AVIF.

Anda dapat mengompresi gambar menggunakan Squoosh, ImageOptim, atau layanan pengoptimalan gambar. Saat memadatkan, 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 untuk Anda secara otomatis, tetapi mungkin tidak layak 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 dan cocok. Jika dapat merender gambar dalam format tersebut, gambar tersebut akan digunakan. Jika tidak, browser akan beralih ke elemen <source> yang ditentukan berikutnya. Dalam cuplikan HTML di atas, format AVIF diprioritaskan daripada format WebP, dan akan menggunakan 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> mana yang dipilih.

Elemen <source> juga mendukung atribut media, srcset, dan sizes. Mirip dengan contoh <img> sebelumnya, ini menunjukkan kepada browser gambar mana yang akan dipilih pada berbagai viewport.

<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 mengambil kondisi media. Dalam contoh sebelumnya, DPR perangkat digunakan sebagai kondisi media. Perangkat apa pun dengan DPR lebih besar dari atau sama dengan 1,5 akan menggunakan elemen <source> pertama. Elemen <source> memberi tahu browser bahwa, di 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 menggunakan seluruh lebar area tampilan. Dengan menggabungkan atribut media dan srcset, Anda dapat memiliki kontrol yang lebih baik atas gambar yang akan digunakan.

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

Perangkat dengan DPR 1 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 gambar yang berpotensi lebih besar, yaitu gambar yang sama dengan yang digunakan di perangkat desktop dengan DPR 3.image-1500.jpg

<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:

Dengan kueri tambahan ini, Anda dapat melihat bahwa image-1000-sm.jpg dan image-1500-sm.jpg ditampilkan di area tampilan 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 pada area tampilan 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, deskriptor lebar telah dihapus dan diganti dengan deskriptor rasio piksel perangkat. Gambar yang ditayangkan di perangkat seluler dibatasi hingga /image-500.jpg atau /image-1000.jpg, bahkan di perangkat dengan DPR 3.

Cara mengelola kompleksitas

Saat bekerja dengan gambar responsif, Anda mungkin memiliki banyak variasi ukuran dan format yang berbeda untuk setiap gambar. Dalam contoh sebelumnya, variasi untuk setiap ukuran digunakan, tetapi AVIF dan WebP dikecualikan. Berapa banyak varian yang harus Anda miliki? Seperti banyak masalah engineering, jawabannya cenderung "tergantung".

Meskipun Anda mungkin tergoda untuk memiliki banyak variasi agar dapat memberikan kecocokan terbaik, 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 performa dapat menurun jika entri cache varian telah berakhir, dan gambar perlu diambil lagi dari server asal.

Selain itu, ukuran dokumen HTML Anda bertambah dengan setiap variasi. Anda dapat mengirimkan beberapa kilobyte HTML untuk setiap gambar.

Menayangkan gambar berdasarkan header permintaan Accept

Header permintaan HTTP Accept memberi tahu server jenis konten mana 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 satu pun dari kondisi ini benar, 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.

Hal 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 mengirimkan format optimal berdasarkan perangkat dan browser pengguna.

Kuncinya adalah menemukan keseimbangan, membuat sejumlah kandidat gambar yang wajar, dan mengukur dampaknya terhadap pengalaman pengguna. Gambar yang berbeda dapat memberikan hasil yang berbeda, dan pengoptimalan yang diterapkan pada setiap gambar bergantung pada ukurannya dalam halaman dan perangkat yang digunakan pengguna Anda. Misalnya, gambar 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 tampilan. 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. Nilai async memberi tahu browser bahwa gambar dapat didekode secara asinkron, sehingga dapat meningkatkan waktu untuk merender konten lain. Nilai sync memberi tahu browser bahwa gambar harus ditampilkan pada saat yang sama dengan konten lainnya. Nilai default auto memungkinkan browser memutuskan apa yang terbaik bagi pengguna.

Demo gambar

Menguji pengetahuan Anda

Berikutnya: Performa video

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