Performa gambar

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:

1. Kompresi hilang
2. Kompresi lossless

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:

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:

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

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.