Gambar yang responsif

Sebuah gambar bernilai 1.000 kata, dan gambar adalah bagian integral dari setiap halaman. Namun mereka juga sering memperhitungkan sebagian besar byte yang didownload. Dengan desain web responsif, tidak hanya tata letak dapat berubah berdasarkan karakteristik perangkat, tetapi juga gambar.

Desain web responsif berarti bahwa tidak hanya tata letak dapat berubah berdasarkan karakteristik perangkat, tetapi konten juga dapat berubah. Misalnya, pada layar resolusi tinggi (2x), grafis resolusi tinggi memastikan ketajaman. Gambar dengan lebar 50% mungkin berfungsi dengan baik ketika browser memiliki lebar 800 piksel, tetapi menggunakan terlalu banyak ruang pada ponsel yang sempit, dan memerlukan overhead bandwidth yang sama saat diperkecil agar sesuai dengan layar yang lebih kecil.

Arah seni

Contoh arah seni

Pada saat lain, gambar mungkin perlu diubah secara lebih drastis: dengan mengubah proporsi, memangkas, dan bahkan mengganti seluruh gambar. Dalam hal ini, mengubah gambar biasanya disebut sebagai arah seni. Lihat responsiveimages.org/demos/ untuk contoh lainnya.

Gambar Responsif

Screenshot Kursus Konfirmasi

Tahukah Anda bahwa gambar menyumbang lebih dari 60% byte rata-rata yang diperlukan untuk memuat laman web?

Dalam kursus ini, Anda akan mempelajari cara menggunakan gambar di web modern, sehingga gambar Anda terlihat bagus dan dimuat dengan cepat di perangkat apa pun.

Selama prosesnya, Anda akan memperoleh berbagai keterampilan dan teknik untuk mengintegrasikan gambar responsif ke dalam alur kerja pengembangan dengan lancar. Pada akhir kursus ini, Anda akan mengembangkan gambar yang mampu beradaptasi dan merespons berbagai ukuran area pandang dan skenario penggunaan.

Ini adalah kursus gratis yang ditawarkan melalui Udacity

Ikuti Kursus

Gambar di markup

Elemen img sangat andal—elemen ini mendownload, mendekode, dan merender konten—dan browser modern mendukung berbagai format gambar. Memasukkan gambar yang berfungsi di seluruh perangkat tidak berbeda dengan desktop, dan hanya memerlukan beberapa penyesuaian kecil untuk menciptakan pengalaman yang baik.

Ringkasan

  • Gunakan ukuran relatif untuk gambar agar gambar tidak meluap secara tidak sengaja container.
  • Gunakan elemen picture ketika Anda ingin menentukan gambar yang berbeda, bergantung pada karakteristik perangkat (alias tujuan seni).
  • Gunakan deskripsi srcset dan x di elemen img untuk memberikan petunjuk ke browser tentang gambar terbaik yang akan digunakan saat memilih dari kepadatan yang berbeda.
  • Jika halaman Anda hanya memiliki satu atau dua gambar dan gambar tersebut tidak digunakan di tempat lain di situs Anda, pertimbangkan untuk menggunakan gambar inline untuk mengurangi permintaan file.

Menggunakan ukuran relatif untuk gambar

Ingatlah untuk menggunakan unit relatif saat menentukan lebar gambar untuk mencegah gambar melampaui area pandang secara tidak sengaja. Misalnya, width: 50%; menyebabkan lebar gambar menjadi 50% dari elemen yang dimuat (bukan 50% dari area tampilan atau 50% dari ukuran piksel yang sebenarnya).

Karena CSS memungkinkan konten melebihi penampungnya, Anda mungkin harus menggunakan max- width: 100% agar gambar dan konten lainnya tidak overflow. Contoh:

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

Pastikan untuk memberikan deskripsi yang bermakna melalui atribut alt di elemen img; deskripsi ini akan membantu membuat situs Anda lebih mudah diakses dengan memberikan konteks ke pembaca layar dan teknologi pendukung lainnya.

Meningkatkan kualitas img dengan srcset untuk perangkat DPI tinggi

Atribut srcset meningkatkan perilaku elemen img, sehingga memudahkan penyediaan beberapa file gambar untuk karakteristik perangkat yang berbeda. Serupa dengan image-set fungsi CSS yang native dengan CSS, srcset memungkinkan browser memilih gambar terbaik berdasarkan karakteristik perangkat, misalnya menggunakan gambar 2x pada layar 2x, dan berpotensi di masa mendatang, gambar 1x pada perangkat 2x saat berada di jaringan bandwidth 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. Itulah sebabnya penting untuk selalu menyertakan gambar 1x yang dapat ditampilkan di perangkat apa pun, terlepas dari kemampuannya. Jika srcset didukung, daftar gambar/kondisi yang dipisahkan koma akan diuraikan sebelum membuat permintaan apa pun, dan hanya gambar paling sesuai yang didownload dan ditampilkan.

Meskipun kondisi dapat mencakup segala sesuatu, dari kepadatan piksel hingga lebar dan tinggi, hanya kepadatan piksel yang didukung dengan baik saat ini. Untuk menyeimbangkan perilaku saat ini dengan fitur mendatang, tetaplah cukup dengan memberikan gambar 2x di atribut.

Arah seni dalam gambar responsif dengan picture

Contoh arah seni

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

Gunakan elemen picture saat sumber gambar ada dalam beberapa kepadatan, atau ketika desain responsif menentukan gambar yang agak berbeda pada beberapa jenis layar. Serupa dengan elemen video, beberapa elemen source dapat disertakan 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 piksel, head.jpg atau head-2x.jpg akan digunakan, bergantung pada resolusi perangkat. Jika browser memiliki resolusi antara 450 piksel dan 800 piksel, head-small.jpg atau head-small- 2x.jpg akan digunakan, sekali lagi, bergantung pada resolusi perangkat. Untuk lebar layar kurang dari 450 piksel dan kompatibilitas mundur yang tidak mendukung elemen picture, browser akan merender elemen img, dan harus selalu disertakan.

Gambar ukuran relatif

Jika ukuran akhir gambar tidak diketahui, mungkin akan sulit untuk menentukan deskripsi kepadatan sumber gambar. Hal ini terutama berlaku untuk gambar dengan lebar browser yang proporsional dan dapat disesuaikan, bergantung pada ukuran browser.

Daripada menyediakan ukuran dan kepadatan gambar yang tetap, Anda dapat menentukan ukuran setiap gambar yang diberikan dengan menambahkan deskriptor lebar beserta ukuran elemen gambar, yang memungkinkan browser secara otomatis menghitung kepadatan piksel efektif dan memilih gambar terbaik untuk didownload.

<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 gambar yang berukuran setengah dari lebar area pandang (sizes="50vw"), dan bergantung pada lebar browser dan rasio piksel perangkatnya, memungkinkan browser memilih gambar yang tepat terlepas dari seberapa besar jendela browser tersebut. Misalnya, tabel di bawah menunjukkan gambar yang akan dipilih browser:

Lebar browser Rasio piksel perangkat Gambar digunakan Penyelesaian efektif
400px 1 200.jpg 1x
400px 2 400.jpg 2x
320px 2 400.jpg 2,5x
600px 2 800.jpg 2,67x
640px 3 1000.jpg 3,125x
1100px 1 800.png 1,45x

Memperhitungkan titik henti sementara dalam gambar responsif

Dalam banyak kasus, ukuran gambar dapat berubah bergantung pada titik henti sementara tata letak situs. Misalnya, pada layar kecil, Anda mungkin ingin agar gambar membentang penuh pada area pandang, sedangkan pada layar yang lebih besar, ukuran gambar tidak terlalu besar.

<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. Jika lebar browser lebih besar dari 600 piksel, gambar berukuran 25% dari lebar area tampilan; saat lebarnya antara 500 piksel dan 600 piksel, gambar berukuran 50% dari lebar area tampilan; dan di bawah 500 piksel, lebarnya penuh.

Membuat gambar produk yang dapat diluaskan

J. Situs kru dengan gambar produk yang dapat diperluas
J. Situs Crew dengan gambar produk yang dapat diperluas.

Pelanggan ingin melihat apa yang mereka beli. Di situs retail, pengguna berharap dapat melihat tampilan close-up produk beresolusi tinggi untuk lebih memahami detailnya, dan peserta studi merasa frustrasi jika mereka tidak dapat melakukannya.

Contoh bagus dari gambar yang dapat diketuk dan diperluas disediakan oleh J. Situs kru. Overlay yang menghilang menunjukkan bahwa gambar dapat diketuk, sehingga menampilkan gambar yang diperbesar dengan detail halus yang terlihat.

Teknik gambar lainnya

Gambar kompresif

Teknik gambar kompresi menyajikan gambar 2x terkompresi dengan sangat baik ke semua perangkat, terlepas dari kemampuan perangkat yang sebenarnya. Bergantung pada jenis gambar dan tingkat kompresi, kualitas gambar mungkin tidak akan berubah, tetapi ukuran filenya menurun secara signifikan.

Cobalah

Penggantian gambar JavaScript

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

Satu kelemahan besar dari pendekatan ini adalah bahwa menggunakan JavaScript berarti Anda akan menunda pemuatan gambar hingga setidaknya parser lihat ke depan selesai. Artinya, gambar bahkan tidak akan mulai didownload hingga peristiwa pageload diaktifkan. Selain itu, browser kemungkinan besar akan mendownload gambar berukuran 1x dan 2x, sehingga mengakibatkan peningkatan ukuran halaman.

Menyejajarkan gambar: raster dan vektor

Ada dua cara yang pada dasarnya berbeda untuk membuat dan menyimpan gambar, dan ini memengaruhi cara Anda men-deploy gambar secara responsif.

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

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

SVG

SVG memungkinkan untuk menyertakan grafik vektor responsif dalam laman web. Keuntungan format file vektor dibandingkan format file raster adalah browser dapat merender gambar vektor dalam ukuran apa pun. Format vektor menggambarkan geometri gambar—bagaimana gambar itu dibuat dari garis, kurva, warna, dan sebagainya. Di sisi lain, format raster hanya memiliki informasi tentang setiap titik warna, sehingga browser harus menebak cara mengisi bagian yang kosong saat melakukan penskalaan.

Berikut 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 ingin mengurangi jumlah permintaan file yang dibuat halaman, Anda dapat membuat kode gambar secara inline menggunakan format SVG atau URI Data. Jika Anda melihat sumber halaman ini, Anda akan melihat bahwa kedua logo di bawah ini dideklarasikan secara inline: URI Data dan SVG.

SVG memiliki dukungan yang sangat baik di perangkat seluler dan desktop, dan alat pengoptimalan dapat mengurangi ukuran SVG secara signifikan. Dua logo SVG inline berikut terlihat identik, namun yang satu berukuran sekitar 3 KB dan yang lainnya hanya 2 KB:

URI Data

URI Data menyediakan cara untuk menyertakan file, seperti gambar, secara inline dengan menetapkan src dari elemen img sebagai string berenkode 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 panjangnya lebih dari 5000 karakter!)

Alat tarik 'n' lepas seperti jpillora.com/base64-encoder tersedia untuk mengonversi file biner seperti gambar menjadi URI Data. Sama seperti SVG, URI Data didukung dengan baik di browser seluler dan desktop.

{i>Inline<i} di CSS

URI Data dan SVG juga dapat disisipkan dalam CSS—dan ini didukung di perangkat seluler dan desktop. Berikut adalah dua gambar yang tampak identik yang diimplementasikan sebagai gambar latar di CSS; satu URI Data, satu SVG:

Menyisipkan kelebihan & kekurangan

Kode inline untuk gambar bisa jadi panjang—terutama URI Data—jadi mengapa Anda ingin menggunakannya? Untuk mengurangi permintaan HTTP. SVG dan URI Data dapat mengaktifkan seluruh halaman web, termasuk gambar, CSS, dan JavaScript, untuk diambil dengan satu permintaan.

Kelemahannya:

  • Di perangkat seluler, URI Data bisa jauh lebih lambat untuk ditampilkan di perangkat seluler daripada gambar dari src eksternal.
  • URI Data bisa cukup meningkatkan ukuran permintaan HTML.
  • Mereka menambah kerumitan pada markup dan alur kerja Anda.
  • Format URI Data jauh lebih besar daripada biner (hingga 30%) dan oleh karena itu tidak mengurangi total ukuran download.
  • URI Data tidak bisa di-cache, sehingga harus diunduh untuk setiap halaman yang menggunakannya.
  • Mereka tidak didukung di IE 6 dan 7, dukungan tidak lengkap di IE8.
  • Dengan HTTP/2, mengurangi jumlah permintaan aset akan menjadi kurang menjadi prioritas.

Seperti halnya semua hal yang responsif, Anda perlu menguji apa yang paling baik. Gunakan alat developer untuk mengukur ukuran file download, jumlah permintaan, dan latensi total. URI Data terkadang berguna untuk gambar raster—misalnya, di halaman beranda yang hanya memiliki satu atau dua foto yang tidak digunakan di tempat lain. Jika Anda perlu menyisipkan gambar vektor inline, SVG adalah pilihan yang jauh lebih baik.

Gambar di CSS

Properti background CSS adalah alat yang canggih untuk menambahkan gambar yang kompleks ke elemen, memudahkan saat menambahkan beberapa gambar, membuat gambar berulang, dan banyak lagi. Ketika digabungkan dengan kueri media, properti latar belakang akan menjadi lebih efektif, memungkinkan pemuatan gambar bersyarat berdasarkan resolusi layar, ukuran area pandang, dan lainnya.

Ringkasan

  • Gunakan gambar terbaik untuk karakteristik tampilan, pertimbangkan ukuran layar, resolusi perangkat, dan tata letak halaman.
  • 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 beresolusi tinggi selain gambar 1x pada markup.
  • Pertimbangkan biaya performa saat menggunakan teknik penggantian gambar JavaScript atau saat menayangkan gambar beresolusi tinggi yang dikompresi sangat tinggi ke perangkat beresolusi lebih rendah.

Menggunakan kueri media untuk pemuatan gambar bersyarat atau tujuan gambar

Kueri media tidak hanya memengaruhi tata letak halaman; Anda juga dapat menggunakannya untuk memuat gambar secara bersyarat atau memberikan arah gambar berdasarkan lebar area pandang.

Misalnya, dalam contoh di bawah ini, pada layar yang lebih kecil hanya small.png yang didownload dan diterapkan ke div konten, sedangkan pada layar yang lebih besar background-image: url(body.png) diterapkan ke isi dan background-image: url(large.png) diterapkan ke div konten.

.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

Menggunakan image-set untuk memberikan gambar resolusi tinggi

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

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

Selain memuat gambar yang benar, browser juga menskalakannya sebagaimana mestinya. Dengan kata lain, browser mengasumsikan bahwa gambar 2x berukuran dua kali lebih besar dari gambar 1x, sehingga menurunkan skala gambar 2x dengan faktor 2, sehingga gambar yang muncul memiliki ukuran yang sama di halaman.

Dukungan untuk image-set() masih baru dan hanya didukung di Chrome dan Safari dengan awalan vendor -webkit. Pastikan untuk menyertakan gambar penggantian saat 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 akan memuat aset yang sesuai di browser yang mendukung kumpulan gambar; jika tidak, aset tersebut akan kembali ke aset 1x. Masalah yang jelas adalah bahwa meskipun dukungan browser image-set() rendah, sebagian besar browser mendapatkan aset 1x.

Menggunakan kueri media untuk memberikan gambar resolusi tinggi atau tujuan seni

Kueri media dapat membuat aturan berdasarkan rasio piksel perangkat, sehingga memungkinkan untuk 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 semuanya mendukung (min-resolution: 2dppx) standar, sedangkan browser Safari dan Android memerlukan sintaksis berawalan vendor yang lebih lama tanpa unit dppx. Ingat, gaya ini hanya dimuat jika perangkat cocok dengan kueri media, dan Anda harus menentukan gaya untuk kasus dasar. Hal ini juga memberikan manfaat untuk memastikan sesuatu dirender jika browser tidak mendukung kueri media khusus resolusi.

.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 dapat menggunakan sintaksis lebar minimum untuk menampilkan gambar alternatif, bergantung pada ukuran area pandang. Teknik ini memiliki keuntungan bahwa gambar tidak akan didownload jika kueri media tidak cocok. Misalnya, bg.png hanya didownload dan diterapkan ke body jika lebar browser 500 piksel atau lebih:

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

Menggunakan SVG untuk ikon

Saat menambahkan ikon ke halaman, gunakan ikon SVG jika memungkinkan atau dalam kasus tertentu, karakter unicode.

Ringkasan

  • Gunakan SVG atau unicode untuk ikon sebagai ganti gambar raster.

Ganti ikon sederhana dengan unicode

Banyak font menyertakan dukungan untuk berbagai glyph unicode, yang dapat digunakan sebagai pengganti gambar. Tidak seperti gambar, font unicode akan diskalakan dengan baik dan terlihat baik, tidak peduli seberapa kecil atau besar font tersebut ditampilkan di layar.

Selain himpunan karakter normal, unicode dapat mencakup simbol untuk panah (←), operator matematika (✓), bentuk geometris (★), gambar kontrol (▶), notasi musik (♬), huruf Yunani (beta), bahkan bidak catur (♞).

Penyertaan karakter unicode dilakukan dengan cara yang sama seperti entity bernama: &#XXXX, dengan XXXX mewakili angka karakter unicode. Contoh:

You're a super &#9733;

Kamu super ★

Mengganti ikon kompleks dengan SVG

Untuk persyaratan ikon yang lebih kompleks, ikon SVG umumnya ringan, mudah digunakan, dan dapat ditata dengan CSS. SVG memiliki sejumlah keunggulan dibandingkan gambar raster:

  • Mereka adalah grafik vektor yang dapat diskalakan tanpa batas.
  • Efek CSS seperti warna, bayangan, transparansi, dan animasi mudah.
  • Gambar SVG dapat disisipkan langsung dalam dokumen.
  • Mereka semantik.
  • Mereka 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 halaman yang menggunakan FontAwesome untuk ikon font.
Contoh halaman yang menggunakan FontAwesome untuk ikon fontnya.

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

  • Itu adalah grafik vektor yang dapat diskalakan tanpa batas, tetapi mungkin anti-alias menghasilkan ikon yang tidak setajam yang diharapkan.
  • Penataan gaya terbatas dengan CSS.
  • Pemosisian sempurna piksel mungkin sulit, bergantung pada tinggi baris, jarak huruf, dll.
  • Fungsi ini bukanlah semantik, dan mungkin sulit digunakan dengan pembaca layar atau teknologi pendukung lainnya.
  • Kecuali jika dicakup dengan benar, ikon dapat menghasilkan ukuran file yang besar hanya karena menggunakan sebagian kecil 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 memerlukan beberapa ikon, sebaiknya gunakan gambar atau sprite gambar.

Optimalkan gambar untuk performa

Gambar sering kali menempati sebagian besar byte yang didownload dan juga sering kali menempati sejumlah besar ruang visual pada halaman. Akibatnya, mengoptimalkan gambar sering kali dapat menghasilkan beberapa penghematan byte terbesar dan meningkatkan performa untuk situs Anda: semakin sedikit byte yang harus didownload browser, semakin sedikit persaingan untuk bandwidth klien, dan semakin cepat browser dapat mendownload dan menampilkan semua aset.

Ringkasan

  • Jangan hanya memilih format gambar secara acak—pahami berbagai format yang tersedia dan gunakan format yang paling sesuai.
  • Sertakan alat kompresi dan pengoptimalan gambar ke dalam alur kerja Anda untuk mengurangi ukuran file.
  • Kurangi jumlah permintaan http dengan menempatkan gambar yang sering digunakan ke dalam image sprite.
  • Untuk mempercepat waktu muat halaman awal dan mengurangi berat halaman awal, sebaiknya muat gambar hanya setelah di-scroll ke tampilan.

Pilih format yang tepat

Ada dua jenis gambar untuk dipertimbangkan: gambar vektor dan gambar raster. Untuk gambar raster, Anda juga harus memilih format kompresi yang tepat, misalnya: GIF, PNG, JPG.

Gambar raster, seperti foto dan gambar lainnya, direpresentasikan sebagai petak dari masing-masing titik atau piksel. Gambar raster biasanya berasal dari kamera atau pemindai, atau dapat dibuat di browser dengan elemen canvas. Saat ukuran gambar semakin besar, begitu juga ukuran filenya. Jika diskalakan dengan ukuran lebih besar dari ukuran aslinya, gambar raster akan menjadi buram karena browser harus menebak cara mengisi piksel yang hilang.

Gambar vektor, seperti logo dan seni garis, ditentukan oleh kumpulan kurva, garis, bentuk, dan warna isian. Gambar vektor dibuat dengan program seperti Adobe Illustrator atau Inkscape, dan disimpan ke format vektor seperti SVG. Karena gambar vektor dibuat di atas konsep sederhana, gambar tersebut dapat diskalakan tanpa penurunan kualitas atau perubahan ukuran file.

Saat memilih format yang sesuai, penting untuk mempertimbangkan asal gambar (raster atau vektor) dan konten (warna, animasi, teks, dll.). Tidak ada satu format yang cocok untuk semua jenis gambar, dan masing-masing memiliki kekuatan dan kelemahannya sendiri.

Mulailah dengan panduan ini saat memilih format yang sesuai:

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

Mengurangi ukuran file

Anda dapat mengurangi ukuran file gambar secara signifikan dengan melakukan "pascapemrosesan" gambar setelah disimpan. Ada sejumlah alat untuk kompresi gambar, yaitu lossy dan lossless, online, GUI, command line. Jika memungkinkan, sebaiknya coba otomatiskan pengoptimalan gambar agar menjadi bawaan dalam alur kerja Anda.

Tersedia beberapa alat yang dapat melakukan kompresi lossless lebih baik pada file JPG dan PNG tanpa memengaruhi kualitas gambar. Untuk JPG, coba jpegtran atau jpegoptim (hanya tersedia di Linux; jalankan dengan opsi --strip-all). Untuk PNG, coba OptiPNG atau PNGOUT.

Gunakan sprite gambar

Sprite sheet gambar yang digunakan dalam contoh

CSS spriting adalah teknik di mana sejumlah gambar digabungkan menjadi satu gambar "sprite sheet". Anda kemudian dapat menggunakan masing-masing gambar dengan menentukan gambar latar untuk elemen (sprite sheet) dan 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 dalam mengurangi jumlah download yang diperlukan untuk mendapatkan beberapa gambar, sambil tetap mengaktifkan penyimpanan dalam cache.

Pertimbangkan pemuatan lambat

Pemuatan lambat dapat mempercepat pemuatan secara signifikan pada halaman panjang yang menyertakan banyak gambar di paruh bawah dengan memuatnya sesuai kebutuhan atau saat konten utama selesai dimuat dan dirender. Selain peningkatan performa, penggunaan pemuatan lambat dapat menciptakan pengalaman scroll tanpa batas.

Berhati-hatilah saat membuat halaman scrolling tanpa batas—karena konten dimuat saat terlihat, mesin telusur mungkin tidak pernah melihat konten tersebut. Selain itu, pengguna yang mencari informasi yang mereka harapkan akan dilihat di footer, tidak akan pernah melihat footer karena konten baru selalu dimuat.

Hindari gambar sepenuhnya

Terkadang gambar terbaik sebenarnya bukanlah gambar sama sekali. Jika memungkinkan, gunakan kemampuan native browser untuk menyediakan fungsi yang sama atau mirip. Browser menghasilkan visual yang sebelumnya memerlukan gambar. Artinya, browser tidak perlu lagi mendownload file gambar terpisah sehingga mencegah gambar diskalakan dengan tidak benar. Anda dapat menggunakan unicode atau {i>font<i} ikon khusus untuk merender ikon.

Tempatkan teks dalam markup, bukan tersemat pada gambar

Sedapat mungkin, teks harus berupa teks dan tidak disematkan ke dalam gambar. Misalnya, menggunakan gambar untuk judul atau menempatkan informasi kontak—seperti nomor telepon atau alamat—langsung ke gambar akan mencegah pengguna menyalin dan menempelkan informasi; hal ini membuat informasi tidak dapat diakses oleh pembaca layar, dan tidak responsif. Sebagai gantinya, tempatkan teks di markup dan jika perlu, gunakan font web untuk mendapatkan gaya yang Anda butuhkan.

Menggunakan CSS untuk mengganti gambar

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. {i>Nullam placerat egestas <i} 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>

Perlu diingat bahwa penggunaan teknik ini memerlukan siklus rendering, yang bisa cukup signifikan di perangkat seluler. Jika digunakan secara berlebihan, Anda akan kehilangan manfaat yang mungkin telah diperoleh dan mungkin menghambat performa.