Narobe svet – zanimiva tehnika priprave slik za odziven spletni design

Narobe-svet-zanimiva-tehnika-priprave-slik-za-odziven-spletni-design

Slike in odziven spletni design se ne razumeta dobro že od samega začetka. Glaven problem tiči v tem, da se odziven design prilagaja uporabnikovi napravi, preko katere dostopa do  podatkov, stari IMG element za vstavljanje slik pa ni pripravljen za optimalno vstavljanje slik v različnih dimenzijah.

Same slike lahko v odzivnem spletnem designu relativno enostavno naredimo odzivne oz. jih prilagajamo želeni širini. Vendar v praksi to pomeni, da enako sliko dobimo na računalniku, tablici in mobilnem telefonu. Vse lepo in prav, vendar to ni prava pot, saj vsi uporabniki prenesejo enako količino podatkov in tako uporabnike, ki so na mobilnih napravah, ki so običajno na 3G ali celo EDGE omrežju nepotrebno kaznujemo. Na eni strani z dolgim časom nalaganja strani in na drugi strani z veliko porabo prenosa in posledično višjim računom.

Na voljo imamo že kar nekaj rešitev, ki ta problem odpravljajo. Prav tako je bila pred kratkim sprejeta nova CSS/HTML metoda, ki bo rešila ta problem v novejših brskalnikih. V vmesnem času pa večina strani uporablja zgoraj omenjeno tehniko uporabe ene slike za vse naprave. Kljub temu pa lahko to metodo z enostavnim trikom še izboljšamo in pohitrimo sam proces priprave slik. Vse kar moramo narediti je sprememba načina priprave in shranjevanja fotografij.

Za razliko od trenutnih načinov priprave slik za odziven spletni design vzamemo slike, ki so namenjene za tisk in so večjih dimenzij. Do sedaj je vedno veljalo, da so slike prevelike in pretežke, vendar lahko v tem primeru velikost izkoristimo v svoj prid. Sliko v večjih dimenzijah enostavno shranimo za splet, vendar pred shranjevanjem določimo kvaliteto enako 0. Slika je tako v osnovi precej slabe kvalitete, vendar zaradi svoje velike velikosti (npr. 3000px) in njenemu kasnejšemu zmanjšanju s pomočjo preračunavanja brskalnika na spletni strani dosežemo kvaliteten prikaz slike. Takšen način priprave slik nam lahko velikost slike zmanjša tudi do 4x. Takšno občutno zmanjšanje pri velikostih fotografij pa se že pošteno pozna pri  nalaganju samih strani in porabi mobilnega prenosa.

Testna tabela

Dimenzije Velikost Tip shranjevanja
Slika A 4557 x 4809 283 KB JPG, quality: 0
2500 x 2638 112 KB JPG, quality: 0
800 x 844 173 KB JPG, quality: 85
Slika B 1936 x 1296 159 KB JPG, quality: 0
1000 x 669 56 KB JPG, quality: 0
600 x 401 187 KB JPG, quality: 85

Postopek priprave slik za odziven spletni design

  1. Odpremo Photoshop.
  2. Vzamemo sliko, ki je namenjena za tisk (dimenzije cca. 3000px).
    Sliko za razliko od do sedaj znanih metod obdržimo v tej velikosti.
  3. Sliko shranimo, kot »Save for Web« in preset JPG. Tu pa zberemo Quality 0.
    Lahko se igramo še z ostalimi nastavitvami po potrebi.
  4. Sliko shranimo.

Ideja ni zrasla na mojem zelniku, ampak sem prvič zanjo slišal v predavanju »Adaptive Images for Responsive Web Design«, ki ga je imel Christopher Schmitt. Po testiranjih omenjene metode pa sem bil pozitivno presenečen nad rezultati. Čeprav se lahko zgodi, da v nekaterih primerih fotografij ne dosežemo optimalnega učinka je metoda vredna naše pozornosti. Za nove projekte pa vsekakor uporabljajte nove značke; srcset, sizes, picture, …

Komentiraj


*