The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Gambar

Desain web responsif berarti bahwa tidak hanya layout yang bisa berubah berdasarkan karakteristik perangkat, namun materi juga dapat berubah. Misalnya, pada tampilan (2x) resolusi tinggi, grafis resolusi tinggi memastikan ketajaman. Gambar dengan lebar 50% mungkin bekerja dengan baik ketika browser lebarnya 800 px, namun menggunakan terlalu banyak properti pada layar ponsel yang sempit, dan memerlukan overhead bandwidth yang sama ketika diperkecil agar muat pada layar yang lebih kecil.

Tujuan seni

Contoh tujuan seni

Pada saat lainnya, gambar mungkin harus diubah lebih drastis: dengan mengubah ukuran, memotong dan bahkan mengganti seluruh gambar. Dalam hal ini, mengubah gambar biasanya disebut sebagai tujuan seni. Lihat responsiveimages.org/demos/ untuk contoh selengkapnya.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Gambar di markup

Elemen img adalah kuat—itu mengunduh, mengonversi dan merender materi—dan browser modern mendukung berbagai format gambar. Memasukkan gambar yang bekerja di seluruh perangkat tidak berbeda pada desktop, dan hanya membutuhkan beberapa ubahan kecil untuk menciptakan pengalaman pengguna yang baik.

TL;DR

  • Gunakan ukuran relatif bagi gambar untuk mencegah mereka secara tanpa sengaja meluap dari kontainer.
  • Gunakan elemen picture ketika Anda ingin menetapkan gambar yang berbeda bergantung pada karakteristik perangkat (alias tujuan seni).
  • Gunakan srcset dan deskriptor x dalam elemen img untuk memberikan petunjuk ke browser tentang gambar terbaik yang digunakan saat memilih dari kepadatan yang berbeda.
  • Jika laman Anda hanya memiliki satu atau dua gambar dan itu tidak digunakan di tempat lain pada situs Anda, pertimbangkan menggunakan gambar inline untuk mengurangi permintaan file.

Gunakan ukuran relatif untuk gambar

Ingatlah untuk menggunakan unit relatif ketika menetapkan lebar gambar untuk mencegah gambar tanpa sengaja meluap dari tampilan yang terlihat. Misalnya, width: 50%; menyebabkan lebar gambar menjadi 50% dari elemen yang terkandung (bukan 50% dari tampilan yang terlihat atau 50% dari ukuran piksel yang sebenarnya).

Karena CSS memungkinkan materi meluap dari kontainernya, Anda mungkin perlu menggunakan max-width: 100% untuk mencegah gambar dan materi lainnya meluap. Misalnya :

img, embed, object, video {
  max-width: 100%;
}

Pastikan untuk memberikan keterangan penuh arti melalui atribut alt pada elemen img ; ini akan membantu membuat situs Anda lebih mudah diakses dengan memberikan konteks untuk pembaca layar dan teknologi pendukung lainnya.

Tingkatkan img dengan srcset untuk perangkat DPI tinggi

Atribut srcset meningkatkan perilaku elemen img, sehingga memudahkan saat memberikan beberapa file gambar untuk karakteristik perangkat yang berbeda. Serupa dengan image-set fungsi CSS bawaan dari CSS, srcset memungkinkan browser untuk memilih gambar terbaik bergantung pada karakteristik perangkat, misalnya menggunakan gambar 2x pada tampilan 2x, dan berpotensi di masa mendatang, gambar 1x pada perangkat 2x saat berada di jaringan bandwidth yang terbatas.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Pada browser yang tidak mendukung srcset, browser hanya menggunakan file gambar default yang ditentukan oleh atribut src. Inilah sebabnya mengapa penting untuk selalu menyertakan gambar 1x yang bisa ditampilkan pada perangkat apa pun, terlepas dari kemampuannya. Ketika srcset didukung, daftar yang dipisahkan koma dari gambar/kondisi di-parse sebelum membuat permintaan, dan hanya gambar paling sesuai yang diunduh dan ditampilkan.

Meskipun ketentuan bisa berisi segala sesuatu dari kepadatan piksel hingga lebar dan tinggi, hanya kepadatan piksel yang didukung dengan baik pada saat ini. Untuk menyeimbangkan perilaku saat ini dengan fitur masa mendatang, bertahanlah dengan hanya menyediakan gambar 2x di atribut.

Tujuan seni dalam gambar responsif dengan picture

Contoh tujuan seni

Untuk mengubah gambar berdasarkan karakteristik perangkat, juga dikenal sebagai tujuan seni, gunakan elemen picture. Elemen picture mendefinisikan solusi deklaratif untuk menyediakan beberapa versi dari sebuah gambar berdasarkan karakteristik yang berbeda, seperti ukuran perangkat, resolusi perangkat, orientasi, dan lainnya.

Gunakan elemen picture ketika sumber gambar terdapat di beberapa kepadatan, atau ketika desain responsif menentukan gambar yang agak berbeda pada beberapa jenis layar. Serupa dengan elemen video, beberapa elemen source bisa dimasukkan, sehingga memungkinkan untuk menentukan file gambar yang berbeda bergantung pada kueri media atau format gambar.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Cobalah

Pada contoh di atas, jika lebar browser setidaknya 800 px, maka salah satu dari head.jpg atau head-2x.jpg akan digunakan, bergantung pada resolusi perangkat. Jika lebar browser antara 450 px dan 800 px, maka head-small.jpg atau head-small-2x.jpg akan digunakan, bergantung pada resolusi perangkat. Untuk lebar layar kurang dari 450 px dan kompatibilitas mundur dengan elemen picture tidak didukung, browser merender elemen img sebagai gantinya, dan harus selalu disertakan.

Gambar ukuran relatif

Ketika ukuran akhir gambar tidak diketahui, bisa sulit untuk menentukan deskriptor kepadatan bagi sumber gambar. Hal ini terutama berlaku untuk gambar yang membentang seimbang dengan lebar browser dan bisa berubah-ubah, tergantung pada ukuran browser.

Alih-alih menyediakan ukuran gambar dan kepadatan tetap, Anda bisa menetapkan ukuran masing-masing gambar yang disediakan dengan menambahkan deskriptor lebar bersama dengan ukuran elemen gambar, yang memungkinkan browser untuk secara otomatis menghitung kepadatan piksel efektif dan memilih gambar terbaik untuk diunduh.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Cobalah

Contoh di atas merender sebuah gambar yang berukuran setengah lebar tampilan yang terlihat (sizes="50vw"), dan bergantung pada lebar browser dan rasio piksel perangkat, yang memungkinkan browser memilih gambar yang tepat terlepas dari seberapa besar jendela browsernya. Misalnya, tabel di bawah ini menunjukkan gambar mana yang akan dipilih browser:

Lebar browser Rasio piksel perangkat Gambar yang digunakan Resolusi efektif
400 px 1 200.png 1x
400 px 2 400.png 2x
320 px 2 400.png 2,5x
600 px 2 800.png 2,67x
640 px 3 1000.png 3,125x
1100 px 1 1400.png 1,27x

Memperhitungkan breakpoint dalam gambar responsif

Dalam banyak kasus, ukuran gambar bisa berubah bergantung pada breakpoint layout situs. Misalnya, pada layar kecil, Anda mungkin menginginkan agar gambar membentang penuh pada tampilan yang terlihat, sementara di layar yang lebih besar, itu hanya menggunakan sebagian kecilnya.

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Cobalah

Atribut sizes pada contoh di atas, menggunakan beberapa kueri media untuk menentukan ukuran gambar. Ketika lebar browser lebih besar dari 600 px, gambar berukuran 25% dari lebar tampilan yang terlihat, saat lebarnya antara 500 px dan 600 px, gambar berukuran 50% dari lebar tampilan yang terlihat, dan saat lebarnya di bawah 500 px, lebarnya maksimal.

Membuat gambar produk yang bisa diperbesar

Situs web J. Crews dengan gambar produk yang diperluas
Situs web J. Crews dengan gambar produk yang diperluas.

Konsumen ingin melihat apa yang mereka beli. Pada situs ritel, pengguna berharap untuk bisa melihat tampilan-dekat resolusi tinggi dari produk agar bisa melihatnya secara lebih detail, dan partisipan penelitian merasa frustrasi jika mereka tidak dapat melakukannya.

Sebuah contoh bagus dari gambar yang bisa diketuk dan diperbesar disediakan oleh situs J. Crew. Sebuah overlay yang menghilang menunjukkan bahwa gambar bisa diketuk, yang memunculkan gambar yang diperbesar dengan detail halus terlihat.

Teknik gambar lainnya

Gambar kompresif

Teknik gambar kompresif menyajikan gambar 2x kompresi sangat tinggi untuk semua perangkat, tidak peduli kemampuan sebenarnya dari perangkat tersebut. Tergantung pada tipe gambar dan tingkat kompresi, kualitas gambar mungkin tidak terlihat berubah, namun ukuran file turun secara signifikan.

Cobalah

Perhatian: Gunakan teknik kompresi dengan hati-hati karena peningkatan biaya decoding dan memori yang diperlukan. Mengubah ukuran gambar besar agar muat pada layar yang lebih kecil tidak mudah dilakukan dan bisa sangat merugikan pada perangkat low-end karena memori dan kemampuan prosesor terbatas.

Pengganti gambar JavaScript

Pengganti gambar JavaScript memeriksa kemampuan perangkat dan "melakukan hal yang benar." Anda bisa menentukan rasio piksel perangkat melalui window.devicePixelRatio, memperoleh lebar dan tinggi layar, dan bahkan berpotensi melakukan beberapa sniffing koneksi jaringan melalui navigator.connection atau mengeluarkan permintaan palsu. Bila telah mengumpulkan semua informasi ini, Anda bisa memutuskan gambar mana yang akan dimuat.

Salah satu kelemahan besar dalam pendekatan ini adalah bahwa menggunakan JavaScript berarti bahwa Anda akan menunda pemuatan gambar sampai setidaknya parser lihat-depan telah diselesaikan. Bahkan ini berarti bahwa gambar tidak akan mulai diunduh sampai kejadian pageload sudah diaktifkan. Selain itu, browser kemungkinan besar akan mengunduh gambar 1x dan 2x, yang mengakibatkan peningkatan ukuran laman.

Menyisipkan gambar: bitmap dan vektor

Ada dua cara yang berbeda secara mendasar untuk membuat dan menyimpan gambar—dan ini memengaruhi bagaimana Anda menerapkan gambar secara responsif.

Gambar bitmap—seperti foto dan gambar lainnya—direpresentasikan sebagai grid dari titik-titik individu warna. Gambar bitmap mungkin berasal dari kamera atau pemindai, atau dibuat dengan elemen kanvas HTML. Format seperti PNG, JPEG dan WebP digunakan untuk menyimpan gambar bitmap.

Gambar vektor— seperti logo dan seni garis—didefinisikan sebagai serangkaian rangkaian kurva, garis, bentuk, warna isian dan gradien. Gambar vektor bisa dibuat dengan program seperti Adobe Illustrator atau Inkscape, atau ditulis tangan dalam kode menggunakan format vektor seperti SVG.

SVG

SVG memungkinkan untuk memasukkan grafis vektor responsif dalam laman web. Keuntungan dari format file vektor dibandingkan format file bitmap adalah bahwa browser bisa merender gambar vektor dalam ukuran apa saja. Format vektor menggambarkan geometri gambar—bagaimana itu dibuat dari garis, kurva, warna dan sebagainya. Format bitmap, di sisi lain, hanya memiliki informasi tentang titik-titik individu warna, sehingga browser harus menebak cara mengisi kekosongan saat penskalaan.

Di bawah ini adalah dua versi dari gambar yang sama: gambar PNG di sebelah kiri dan SVG di sebelah kanan. SVG terlihat bagus pada berbagai ukuran, sedangkan PNG di sebelahnya mulai terlihat buram pada ukuran layar yang lebih besar.

Logo HTML5, format PNG Logo HTML5, format SVG

Jika Anda ingin mengurangi jumlah permintaan file yang dibuat laman, Anda bisa mengkodekan gambar menjadi inline menggunakan format Data URI atau SVG. Jika Anda melihat sumber dari laman ini, Anda akan melihat bahwa kedua logo berikut dideklarasikan inline: URI Data dan SVG.

SVG memiliki dukungan yang luar biasa pada seluler dan desktop, dan alat optimalisasi bisa secara signifikan mengurangi ukuran SVG. Dua logo SVG inline berikut terlihat sama, namun yang satu berukuran sekitar 3 KB dan lainnya hanya 2KB:

Data URI

Data URI menyediakan cara untuk menyertakan file, seperti gambar, inline dengan menetapkan src dari elemen img sebagai string mengenkode Base64 menggunakan format berikut:

<img src="data:image/svg+xml;base64,[data]">

Awal kode untuk logo HTML5 di atas terlihat seperti ini:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(Versi lengkap lebih dari 5000 karakter panjangnya!)

Alat (bantu) seret dan lepas seperti jpillora.com/base64-encoder tersedia untuk mengonversi file biner seperti gambar ke Data URI. Sama seperti SVG, Data URI didukung dengan baik pada browser seluler dan desktop.

Penyisipan di CSS

URI Data dan SVG juga bisa disisipkan dalam CSS—dan ini didukung pada perangkat seluler dan desktop. Berikut adalah dua gambar serupa yang diimplementasikan sebagai gambar latar di CSS; sebuah URI Data, sebuah SVG:

Menyisipkan kelebihan & kekurangan

Kode inline untuk gambar bisa bertele-tele—terutama URI Data—jadi mengapa Anda mau menggunakannya? Untuk mengurangi permintaan HTTP! SVG dan Data URI bisa mengaktifkan seluruh laman web, termasuk gambar, CSS dan JavaScript, yang dapat diambil dengan satu permintaan.

Sisi negatifnya:

  • Pada perangkat seluler, Data URI bisa secara signifikan lebih lambat untuk ditampilkan pada perangkat seluler daripada gambar dari src eksternal.
  • Data URI bisa cukup banyak meningkatkan ukuran permintaan HTML.
  • Mereka menambahkan kompleksitas pada markup dan alur kerja Anda.
  • Format Data URI jauh lebih besar dari biner (hingga 30%) dan oleh karena itu tidak mengurangi jumlah ukuran unduhan.
  • Data URI tidak bisa di-cache, sehingga harus diunduh untuk setiap laman yang menggunakannya.
  • Mereka tidak didukung dalam IE 6 dan 7, dukungan tidak lengkap dalam IE8.
  • Dengan HTTP/2, mengurangi jumlah permintaan aset akan menjadi berkurang prioritasnya.

Seperti pada segala sesuatu yang responsif, Anda harus menguji apa yang terbaik. Gunakan alat developer untuk mengukur ukuran file unduhan, jumlah permintaan, dan jumlah latensi. URI Data kadang-kadang bisa berguna untuk gambar bitmap—misalnya, pada beranda yang hanya memiliki satu atau dua foto yang tidak digunakan di tempat lain. Jika Anda membutuhkan gambar vektor inline, SVG adalah pilihan yang jauh lebih baik.

Gambar di CSS

Properti background CSS adalah alat (bantu) yang efektif untuk menambahkan gambar kompleks ke elemen, memudahkan ketika ingin menambahkan beberapa gambar, membuat pengulangan, dan banyak lagi. Ketika dikombinasikan dengan kueri media, properti latar belakang menjadi lebih efektif lagi, memungkinkan pemuatan gambar bersyarat berdasarkan resolusi layar, ukuran tampilan yang terlihat, dan lainnya.

TL;DR

  • Gunakan gambar terbaik untuk karakteristik tampilan, pertimbangkan ukuran layar, resolusi perangkat dan layout laman.
  • Ubah properti background-image dalam CSS untuk tampilan DPI tinggi menggunakan kueri media dengan min-resolution dan -webkit-min-device-pixel-ratio.
  • Gunakan srcset untuk memberikan gambar resolusi tinggi selain gambar 1x dalam markup.
  • Pertimbangkan biaya kinerja ketika menggunakan teknik pengganti gambar JavaScript atau ketika menyajikan gambar resolusi tinggi sangat terkompresi untuk perangkat resolusi rendah.

Gunakan kueri media untuk pemuatan gambar bersyarat atau tujuan seni

Kueri media tidak hanya memengaruhi layout laman; Anda juga bisa menggunakannya untuk memuat gambar secara bersyarat atau memberikan tujuan seni bergantung pada lebar tampilan yang terlihat.

Misalnya dalam contoh di bawah ini, pada layar yang lebih kecil, hanya small.png yang diunduh dan diaplikasikan ke materi div, sementara di layar yang lebih besar background-image: url(body.png) diaplikasikan ke tubuh dan background-image: url(large.png) is applied to the content div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Cobalah

Gunakan image-set untuk memberikan gambar resolusi tinggi

Fungsi image-set() dalam CSS meningkatkan perilaku properti background, sehingga memudahkan saat memberikan beberapa file gambar untuk karakteristik perangkat yang berbeda. Hal ini memungkinkan browser untuk memilih gambar terbaik tergantung pada karakteristik perangkat, misalnya menggunakan gambar 2x pada tampilan 2x, atau gambar 1x pada perangkat 2x ketika berada pada jaringan bandwidth terbatas.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

Selain memuat gambar yang benar, browser juga mengubah ukurannya secara sesuai. Dengan kata lain, browser berasumsi bahwa gambar 2x berukuran dua kali lebih besar dari gambar 1x, lalu menurunkan ukuran gambar 2x dengan faktor 2, sehingga gambar yang muncul mempunyai ukuran yang sama pada laman.

Dukungan untuk image-set() masih baru dan hanya didukung di Chrome dan Safari dengan awalan vendor -webkit. Berhati-hatilah saat menyertakan gambar fallback ketika image-set() tidak didukung; misalnya:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

Cobalah

Hal di atas memuat aset yang tepat di browser yang mendukung image-set; jika tidak akan kembali ke aset 1x. Kekurangan yang nyata adalah bahwa meskipun dukungan browser image-set() rendah, kebanyakan browser mendapatkan aset 1x.

Menggunakan kueri media untuk memberikan gambar resolusi tinggi atau tujuan seni

Kueri media bisa membuat aturan berdasarkan rasio piksel perangkat, sehingga bisa menentukan gambar yang berbeda untuk tampilan 2x versus 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Chrome, Firefox dan Opera semua mendukung (min-resolution: 2dppx) standar, sementara Safari dan browser Android keduanya membutuhkan sintaks berawalan vendor yang lebih lama tanpa unit dppx. Ingatlah, gaya ini hanya dimuat jika perangkat cocok dengan kueri media, dan Anda harus menetapkan gaya untuk kejadian dasar. Ini juga memberikan manfaat untuk memastikan sesuatu dirender jika browser tidak mendukung kueri media resolusi spesifik.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Cobalah

Anda juga bisa menggunakan sintaks min-width untuk menampilkan gambar alternatif tergantung pada ukuran tampilan yang terlihat. Teknik ini memiliki keuntungan bahwa gambar tidak diunduh jika kueri media tidak sesuai. Misalnya, bg.png hanya diunduh dan diaplikasikan ke body jika lebar browser 500px atau lebih besar:

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

Menggunakan SVG untuk ikon

Ketika menambahkan ikon ke laman Anda, gunakan ikon SVG jika memungkinkan atau dalam kasus tertentu, karakter unicode.

TL;DR

  • Menggunakan SVG atau unicode sebagai ikon bukannya gambar bitmap.

Ganti ikon sederhana dengan unicode

Banyak font mengikutsertakan dukungan untuk berbagai karakter unicode, yang bisa digunakan sebagai pengganti gambar. Tidak seperti gambar, font unicode akan diskalakan dengan baik dan terlihat baik tidak peduli seberapa kecil atau besar mereka ditampilkan di layar.

Selain himpunan karakter normal, unicode mungkin memasukkan simbol untuk panah (←), operator matematika (√), bentuk geometris (★), gambar kontrol (▶), notasi musik (♬), huruf Yunani (Ω), bahkan bidak catur (♞).

Memasukkan karakter unicode dilakukan secara sama dengan memberi nama entitas: &#XXXX, dengan XXXX merepresentasikan angka karakter unicode. Misalnya:

You're a super &#9733;

You're a super ★

Ganti ikon kompleks dengan SVG

Untuk persyaratan ikon kompleks lainnya, ikon SVG biasanya ringan, mudah digunakan, dan bisa diberi gaya dengan CSS. SVG memiliki sejumlah keunggulan dibandingkan gambar bitmap:

  • Mereka adalah grafis vektor yang bisa diskalakan secara tak terbatas.
  • Efek CSS seperti warna, bayangan, transparansi, dan animasi bisa dibuat dengan mudah.
  • Gambar SVG bisa disisipkan langsung dalam dokumen.
  • Mereka semantik.
  • Ikon SVG menyediakan aksesibilitas yang lebih baik dengan atribut yang sesuai.
With SVG icons, you can either add icons using inline SVG, like 
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Cobalah

Gunakan font ikon dengan hati-hati

Contoh laman yang menggunakan FontAwesome untuk ikon font.
Contoh laman yang menggunakan FontAwesome untuk ikon font.

Font ikon memang populer, dan mudah digunakan, namun memiliki beberapa kekurangan jika dibandingkan dengan ikon SVG:

  • Mereka grafis vektor yang bisa secara tak terbatas diskalakan, namun anti-alias mungkin menghasilkan ikon tidak setajam yang diharapkan.
  • Penataan gaya terbatas dengan CSS.
  • Pemosisian sempurna hingga tingkat piksel bisa sulit dilakukan, tergantung pada tinggi-baris, pengaturan jarak huruf, dll.
  • Font ikon bukan semantik, dan sulit digunakan dengan pembaca layar atau teknologi bantu lainnya.
  • Kecuali dengan benar tercakup, Font ikon bisa menghasilkan ukuran file yang besar hanya karena menggunakan subset kecil dari ikon yang tersedia.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Cobalah

Ada ratusan font ikon gratis dan berbayar yang tersedia termasuk Font Awesome, Pictos, dan Glyphicons.

Pastikan untuk menyeimbangkan bobot permintaan HTTP tambahan dan ukuran file dengan kebutuhan ikon. Misalnya, jika Anda hanya membutuhkan beberapa ikon, mungkin lebih baik untuk menggunakan gambar atau sprite gambar.

Mengoptimalkan gambar untuk kinerja

Gambar sering menjadi sumber besarnya byte yang diunduh dan juga sering kali menempati sejumlah besar ruang visual pada laman. Akibatnya, mengoptimalkan gambar bisa menghasilkan beberapa penghematan byte terbesar dan meningkatkan kinerja situs web Anda: semakin sedikit byte yang harus diunduh browser, semakin sedikit persaingan untuk mendapatkan bandwidth klien dan semakin cepat browser mengunduh dan menampilkan semua aset.

TL;DR

  • Jangan hanya secara acak memilih format gambar—pahami format berbeda yang tersedia dan gunakan format yang paling cocok.
  • Sertakan alat kompresi dan optimalisasi gambar ke dalam alur kerja Anda untuk mengurangi ukuran file.
  • Kurangi jumlah permintaan http dengan menempatkan gambar yang sering digunakan ke dalam image sprites.
  • Untuk mempercepat waktu muat laman awal dan mengurangi ukurannya, pertimbangkan memuat gambar hanya setelah mereka bergulir ke dalam tampilan.

Memilih format yang tepat

Ada dua tipe gambar yang bisa dipertimbangkan: gambar vektor dan gambar bitmap. Untuk gambar bitmap, Anda juga harus memilih format kompresi yang tepat, misalnya: GIF, PNG, JPG.

Gambar bitmap, seperti foto dan gambar lainnya, direpresentasikan sebagai sebuah grid dari titik atau piksel individual. Gambar bitmap biasanya diperoleh dari kamera atau pemindai, atau bisa dibuat di browser dengan elemen canvas. Saat ukuran gambar semakin besar, begitu juga ukuran filenya. Ketika diskalakan dengan ukuran lebih besar dari aslinya, gambar bitmap menjadi buram karena browser harus menebak cara mengisi piksel yang hilang.

Gambar vektor, seperti logo dan seni garis, didefinisikan oleh rangkaian kurva, garis, bentuk dan warna isi. Gambar vektor dibuat dengan program seperti Adobe Illustrator atau Inkscape dan disimpan ke format vektor seperti SVG. Karena gambar vektor dibangun di atas konsep primitif sederhana, gambar tersebut bisa diskalakan tanpa penurunan kualitas atau perubahan ukuran file.

Ketika memilih format yang tepat, kita harus mempertimbangkan asal gambar (bitmap atau vektor), dan materi (warna, animasi, teks, dll). Tidak ada satu format yang bisa cocok untuk semua jenis gambar, dan masing-masing memiliki kelebihan dan kekurangan tersendiri.

Mulailah dengan panduan ini ketika memilih format yang tepat:

  • Gunakan JPG untuk gambar fotografis.
  • Gunakan SVG untuk seni vektor dan grafis warna solid seperti logo dan seni garis. Jika seni vektor tidak tersedia, coba gunakan WebP atau PNG.
  • Gunakan PNG daripada GIF karena memberikan warna yang lebih banyak dan menawarkan rasio kompresi lebih baik.
  • Untuk animasi yang lebih panjang pertimbangkan untuk menggunakan <video>, yang memberikan kualitas gambar lebih baik dan memberikan pengguna kontrol saat pemutaran.

Mengurangi ukuran file

Anda bisa memperkecil ukuran file gambar secara signifikan dengan melakukan "pascapemrosesan" gambar setelah penyimpanan. Ada beberapa alat untuk kompresi gambar—lossy dan lossless, online, GUI, baris perintah. Jika memungkinkan, akan lebih baik mengotomatiskan optimalisasi gambar sehingga itu mendapat prioritas utama dalam alur kerja Anda.

Ada beberapa alat yang bisa melakukan kompresi lossless lebih baik pada file JPG dan PNG, tanpa memengaruhi kualitas gambar. Untuk JPG, cobalah jpegtran atau jpegoptim (hanya tersedia di Linux; jalankan dengan --menghilangkan-semua opsi). Untuk PNG, cobalah OptiPNG atau PNGOUT.

Gunakan image sprites

Sprite sheet gambar yang digunakan dalam contoh

CSS spriting adalah sebuah teknik dengan sejumlah gambar digabungkan dalam satu gambar "sprite sheet". Anda kemudian bisa menggunakan setiap gambar tersebut dengan menetapkan gambar latar untuk elemen (sprite sheet) ditambah offset untuk menampilkan bagian yang benar.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px; 
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Cobalah

Spriting memiliki keuntungan yaitu mengurangi jumlah unduhan yang diperlukan untuk mendapatkan beberapa gambar, sambil tetap mengaktifkan caching.

Pertimbangkan lazy loading

Lazy loading bisa secara signifikan mempercepat pemuatan pada laman panjang yang memasukkan banyak gambar di paro bawah dengan memuatnya saat diperlukan atau ketika materi utama selesai dimuat dan dirender. Selain peningkatan kinerja, menggunakan lazy loading bisa menciptakan pengalaman gulir tak terbatas.

Hati-hati saat membuat laman gulir tak terbatas—karena materi dimuat ketika terlihat, mesin telusur mungkin tidak akan pernah melihat materi tersebut. Selain itu, pengguna yang mencari informasi yang mereka harapkan bisa dilihat di footer, tidak akan pernah melihat footer karena materi baru selalu dimuat.

Jangan gunakan gambar sama sekali

Terkadang, gambar terbaik sama sekali bukanlah sebuah gambar. Bila memungkinkan, gunakan kemampuan bawaan browser untuk menyediakan fungsionalitas yang sama atau serupa. Browser menghasilkan visual gambar yang diperlukan sebelumnya. Ini berarti bahwa browser tidak perlu lagi mengunduh file gambar yang terpisah sehingga mencegah gambar diskalakan dengan canggung. Anda bisa menggunakan unicode atau font ikon khusus untuk merender ikon.

Tempatkan teks dalam markup bukannya disematkan pada gambar

Bila memungkinkan, teks harus berupa teks dan tidak disematkan ke dalam gambar. Misalnya, menggunakan gambar sebagai judul atau menempatkan informasi kontak—seperti nomor telepon atau alamat—secara langsung pada gambar untuk mencegah pengguna menyalin dan menempelkan informasi; hal ini membuat informasi tidak bisa diakses pembaca layar, dan tidak responsif. Sebagai gantinya, letakkan teks dalam markup Anda dan jika perlu gunakan webfonts untuk memperoleh gaya yang Anda butuhkan.

Gunakan CSS sebagai pengganti gambar

Browser modern bisa menggunakan fitur CSS untuk menciptakan gaya yang sebelumnya memerlukan gambar. Misalnya: gradien kompleks bisa dibuat dengan menggunakan properti background, bayangan dapat dibuat dengan menggunakan box-shadow, dan sudut membulat bisa ditambahkan dengan properti border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
  div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

Harap diingat bahwa menggunakan teknik ini tidak memerlukan siklus rendering, yang bisa cukup signifikan pada perangkat seluler. Jika digunakan berlebihan, Anda akan kehilangan manfaat yang mungkin telah didapatkan dan mungkin menghambat kinerja.