Penggunaan ponsel untuk melakukan aktifitas browsing sudah umum dilakukan. Dengan device kecil, perlu dipertimbangkan penggunaan image yang tepat.
Pendekatan responsive image dapat dilakukan dengan menampilkan image resolusi kecil pada small device, atau mengganti image dengan versi crop dimana point of interest dari image tetap jelas terlihat.
Selain image, kita pun dapat menggunakan source lain seperti fonts dan glyph untuk mempercantik halaman website tanpa menghabiskan bandwidth.
Karena image yang terlalu besar dan jumlahnya banyak, akan menyebabkan latency. Bottleneck dimana server harus memberikan banyak response, karena request dari satu halaman webpage.
Berikut lesson untuk Course Responsive Image – Dasar
- Raster dan Vector
- Kompresi Image
- Web Fonts dan Glyphs
- Menggunakan Relative sizing
- Background Cover
- Conditional Background
- Menggunakan background-image: image-set
- Menggunakan image srcset
- Menggunakan sizes attribute
- Menggunakan Picture Element
- Menggunakan SVG
- Responsive Image – Kesimpulan
image courtesy of freepik.com