
Olen jo aiemmin käsittellyt responsiivisen designin perusperiaatteet, navigaation ja taulukot. Tällä kertaa vuorossa ovat responsiiviset kuvat. Responsiivisen designin perusperiaatteisiin kuuluu <img>-elementille määritettävä max-width: 100% arvo. Tämän ansiosta kuva skaalautuu mukavasti eri kokoisille näytöille. Ratkaisuna tämä toimii oivasti, mutta ei kuitenkaan ole optimaalinen.




Verkkosivuilla on tavallisesti useita kymmeniä kuvia ja ikoneita. Kuvien avulla verkkosivun sisällöstä saadaan houkuttelevampaa ja mukavamman näköistä. Kuvat vievät kuitenkin monesti myös aimo osan sivuston aiheuttamasta verkkoliikenteestä. Liikenteen kasvaessa verkkosivujen optimointi tulee ajankohtaiseksi. Tällä erää keskitymme siihen, miten kuvia voidaan optimoida. Tarkastelun kohteena ovat CSS-sprite ja Data URI -tekniikat.



