AG media - Web dizajn studio

Blog

Responzivne slike: novi <picture> i stari <img> element

Responzivne slike: novi <picture> i stari <img> element

Oni koji rade responzivne web stranice dobro znaju (barem bi to trebali znati), da samo ubaciti sliku i očekivati čuda kad je u pitanju pravovaljano prikazivanje i brzo učitavanje za veliki broj uređaja, nije u biti najbolje riješenje. Kako bi zaobišli, ondnosno sami sebe zavaravali da slon nije u sobi, najviše se fokusiramo na optimiziranje java skripti, CSS-a, i odrađujemo mnoge druge tehnikalije, koje su vrlo bitne, da bi se web stranica brzo, bolje i pravilno učitala te prikazala u mnogim internet preglednicima. Još kad pridodamo, sve veće rezolucije, na mobitelima i tabletima, koje praktički imaju bolju rezoluciju od nekih monitora, krajnje je vrijeme, da shvatimo kako je slon zaista u sobi. To je prvi korak. Drugi korak je ulazak u svijet, za sada, relativno novog HTML5 elementa <picture> i njegovih atributa srcset i sizes. Stari <img> element također podržava korištenje već rečenih atributa.

To je ono šta ovaj kratki članak i nudi. Par linkova, i videa, koji će vam pomoći shvatiti zašto i kako koristiti nove elemente za slike, kako bi bili sigurni da zaista radite responzivne web stranice.

Prvo pogledajte video, kao uvod u materiju

Onda ovim redoslijedom pročitaje slijedeće članke

Neke stvari se ponavljaju kroz sva tri članka, ali ponavljanje je majka znanja „Repetitio mater studiorum est“.

U međuvremenu, možete dok čitate, testirati kako zaista to sve funkcionira u praksi: http://codepen.io/martinwolf/pen/hFxyj/

Kako bi se <picture> element i njegovi atributi pravilno izvodili na svim važnim internet preglednicima, potrebno je implementirati slijedeći polyfill imenom Picturefill. Kako to i sami autori članaka kažu, to će biti potrebno, samo toliko dugo, dok svi preglednici ne ugrade sposobnost pravilnog prepoznavanja i izvođenja <picture> elementa. Pošto se HTML5 sve više koristi, čak (napokon) i W3C preporučuje upotrebu, ne bi trebali čekati dugo, da zanemarimo spomenuti polyfill.

I zadnji link je za one koje vole automatizirati procese, Grunt Responsive Images .

To je vjerojatno samo jedan od načina. Mi npr. koristimo dodatak (plugin) za Modx po imenu phpThumbsUp. Grunt koji je glavna tema gornjeg linka je također implementiran u Modx (u najnovijoj verziji).

Ako već niste spremni, početi koristiti nove tehnologije, barem ćete biti upoznati sa njima. A to je već nešto.


O Modx-u možete pročitati na linkovima ispod, iako se spominje Revolution verzija:

I naravno na našem blogu MODX.

Comments

comments powered by Disqus