Responsive Image

Hindari Image Abuse Hindari penggunaan image yang berlebihan, jika dapat menggunakan glyph atau css trick, selalu gunakan opsi tersebut. Karena glyph berasal dari font, dimana ukuran file kecil dan secara resolusi juga responsive, dapat diperbesar dan diperkecil tanpa merusak. Lihat lesson Web fonts dan glyphs Jika memungkinkan, gunakan format SVG, karena selain kecil ukurannya, scalable … Read more

Kepanjangan SVG adalah Scalable Vector Graphic, merupakan image vector yang disupport oleh browser. SVG didefinisikan dalam bentuk XML. Keuntungan SVG SVG dapat dibuat dan diedit menggunakan text editor, walaupun tentu lebih nyaman menggunakan image editor seperti Inkscape. Karena formatnya XML, dapat di-search, di-index, di-scripted dan di-compressed. Tentunya scalable, dapat dibesarkan dan dikecilkan tanpa merusak kualitas. … Read more

Element <picture> dapat memiliki nol atau lebih <source> elements dan satu <img> element untuk menyediakan versi images untuk display atau skenario yang berbeda. Browser akan mempertimbangkan setiap <source> element dan memilih yang terbaik; Jika tidak ada, maka image yang digunakan adalah dari <img> element. Image akan ditampilkan didalam area <img> element. Jadi <img> element adalah … Read more

srcset mengasumsikan image akan ditampilkan pada full viewport width. Bila ingin menampilkan pada ukuran tertentu, gunakan attribute sizes. NOTE attribute sizes tidak akan mengubah ukuran display, tetap memerlukan css untuk mengubah ukuran display. Berikut syntax penggunaan sizes, perhatian, angkat 320w dan lainnya, serta isi attribute sizes adalah contoh, bukan angka fixed. Attribute sizes memiliki syntax … Read more