Prihodnost slik odzivnih na uporabnikovo napravo bo kmalu postala svetlejša. Različni brskalniki so se po treh letih končno poenotili v podpori »picture« elementa. Tako lahko pričakujemo podporo »picture« elementu v nekaterih brskalnikih že v letošnjem letu.
Glavne sestavine odzivnega spletnega oblikovanja (Responsive Web Design – RWD) so fleksibilna mreža, medijske poizvedbe in fleksibilni medijski elementi, kot so slike in video. Ena glavnih slabosti trenutnih odzivnih mest pa je počasno nalaganje spletnih strani. Glavni krivec v večini primerov pa so slike, ki so velike in posledično povzročajo daljše nalaganje. Medtem, ko že imamo dobre rešitve za fleksibilne mreže in medijske poizvedbe so slike še vedno problem. Tako v večini primerov uporabljamo eno sliko za vse naprave, se pravi bodo slike primerne za največje zaslone ali celo retina zaslone, ki jih nato manjšamo za manjše naprave oz. zaslone.
Takšna rešitev sicer ni najboljša za uporabnika, ki trpijo počasno nalaganje in večjo porabo prenosa podatkov, vendar je trenutno najlažja rešitev s strani administracije vsebine. Optimalna rešitev, je tudi predlagana rešitev z uporabo »picture« elementa, ki nam omogoča, da dodeljujemo napravam oz. ekranom primerno sliko. S strani administracije to pomeni tri ali več slik, ki se vklapljajo glede na uporabnikovo napravo. Tu moramo dodati še moment koreografije slik, saj pomanjševanje velike slike v manjšo ni prava pot, ampak je potrebno slike vsebinsko prirediti manjšemu formatu, tako da so informacije, ki jih sporoča slika jasne.
Preden bo ta rešitev z »picture« elementom široko sprejeta med brskalniki pa že lahko uporabljate nadomestne rešitve, ki simulirajo delovanje »picture« elementa, kot je npr. Picturefill Javasript polyfillom, ki omogoča uporabo »picture« elementa že danes.
Primer kode »picture« elementa
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Več informacij o »picture« elementu: http://picture.responsiveimages.org/
