Optimális háttérkép felbontás webáruházaknak

Optimális háttérkép felbontás webáruházaknak

A héten egy nagyforgalmú webáruház fejlesztésekor kerültünk szembe a következő problémával: olyan háttérképet akartunk feltölteni, ami egy adott terméket hirdet, tehát volt rajta termékkép, felirat, ár, gomb, stb.

(Fontos, hogy ez a bejegyzés kizárólag desktop böngészőkről szól, mobilon nincs is értelme háttérképet készíteni.)

Maga a weboldal középre zárt, 1000px széles dobozban van. Egy hagyományos, 1920px széles monitoron tehát 25-25%-nyi üres hely van a két szélén, amit ki lehet használni marketing-célokra.

A grafikus el is készítette az ütős háttérképet (két oldalt a reklám, középen semmi) 1920*1080px méretben, azonban feltöltve már nem volt tökéletes, lelógott az alja.

Háttérkép méretezésénél az "alap" beállítás, hogy a képet saját méretében jelenítjük meg. Ugyan ez néha hasznos lehet, itt kifejezetten nem ajánlott: ha nem pont akkora a monitor mint a kép, nagyon ki fog csúszni lefelé-jobbra.

Ennél egy fokkal kezelhetőbb megoldás, ha beállítjuk, hogy a kép szélessége a monitor 100%-a legyen, a magassága pedig automatikusan skálázódjon. Így mindig ki fog férni széltében, és nem is lesz torz. Hátránya, hogy alul ismeretlen mértékben el fog térni a böngésző szélétől.

• Ha negatív az eltérés (pl 1920:1080-nál keskenyebb képarány esetén, pl 2:1), ekkor a háttérkép előbb be fog fejeződni, és az alja ki fog lógni. Hagyományos, textúrás képek esetén nem gond, be lehet állítani, hogy ismétlődjön a háttérkép - de feliratos képnél ez hülyén tud kinézni. Ennek elkerülésére célszerű egy olyan háttérszínt is megadni, aminél nem szembetűnő, ha elfogy a tapéta, illetve a kép alján nem félbevágni az elemeket.
• Ha pedig pozitív az eltérés, ki fog lógni. Ezt egyszerűbb kezelni: nem szabad a kép aljától 30-60px-re semmilyen elemet tenni, így nem gond, ha azt levágja a böngésző.

De mi legyen az a méret, amire a képeket optimalizálni kell? 1920*1080 esetében ugyanis már elég szembetűnő eltérés tapasztalható - mégpedig maga a böngésző miatt.

Az képernyők nagy részében van ugyanis egy scrollbar az oldal szélén, ami elfoglal 17 pixelt, alul egy tálca (windows alatt, ubuntunál pl a szélén), felül egy címsor, tabok (régebbi firefix esetén menüsor) - ezek mind a weboldal számára hasznos terület elől veszik el a helyet.

Ha windowsos chrome megmérjük ezt a területet, 1903*968 pixelt kapunk. Ekkora lenne a háttérkép, ha az alját és a tetejét is 100%-ra húznánk. Lehet ezt ideális képaránynak (NEM KÉPMÉRETNEK!) beállítani, az esetek többségében, ha figyelembe vesszük a fenti két pontot nem fogunk nagyon mellélőni.

Természetesen élesítés után minél több rendszeren ellenőrizni kell, hogy megfelelően jelenik-e meg.