A web története ugyan a hipertexttel kezdődött, de alapvetően ez egy grafikus médium, és a legfontosabb eleme a tartalomnak mindig a fotó vagy grafika (úgy is mondhatnánk, a webdesign folyamat nagy része annak eldöntése, hogyan helyezzük el a képeket az oldalon). Egy nemrég végzett felmérés szerint a webes adatforgalom 21%-a grafika, de ha figyelembe vesszük, hogy emellett 60% videó, ami egy kicsit más világ, akkor azt láthatjuk, hogy lényegében a teljes az adatforgalom több, mint felét a képek teszik ki.

A képeinknek nem csak csinosnak kell lenni és persze illeszkedni a design általános vizualitásába, szellemiségébe, de az is fontos, hogy milyen méretben jelenítjük meg őket. A méret egyfelől persze azt jelenti, az oldal megjelenítésekor hányszor hány pixel lesz a kép mérete – ez manapság már nincsen fix számokban lekódolva, a reszponzív webdesign korában a kép méretezése a designban azt jelenti, a weboldalt megjelenítő ablakban milyen szélességben jelenik meg ugyanaz a grafika. A fő kérdés az, hogy a lassan mozivászon-méretű monitorok és 4K-s felbontású mobilok korában milyen méretben érdemes feltölteni a képeinket, hogy megjelenítésben is jól nézzenek ki – de a szervert és a sávszélességet se terheljük túl.

Bár talán már evidensnek számít, nem lehet elégszer elismételni, hogy a képek fájlmérete kritikus része lehet az oldalad teljesítményének, és abszolút megéri beletenni azt a kis erőfeszítést, hogy feltöltés előtt optimalizáld a képeket, bármilyen csábító, hogy a Pixabayról lekapott 4928×3264 méretű képet egyszerűen feltöltsd minden extra macera nélkül. 

Itt két fő dologról beszélünk. Az első a megfelelő képméret kiválasztása, azaz mi az a maximum pixelméret, aminél nagyobbat nem érdemes feltölteni. A második a méretre igazítás után a képek fájlméretének optimalizásása. Ha megoldottad, hogy az oldalad a modern képformátumokat is használni tudja, ezekbe érdemes átkonvertálnod a képeidet, de mivel ezek a megoldások máig elég nehézkesek, valószínűbb, hogy inkább egy klasszikus képkicsinyítő-szolgáltatást kell igénybe venned, mint pl. a TinyPNG-t. 

Ha WordPresst használsz, természetesen megint csak érdemes megfontolni, ne telepíts-e egy újabb plugint erre a feladatra, bőségesen lehet találni egyszerűbb és komplexebb képoptimalizációs bővítményeket.

Az ideális méretekre természetesen nincsenek fix, központ számok, egy néhány évvel ezelőtti lista ma már lehet, hogy szűkmarkúnak hat – a technika folyamatosan fejlődik és a töltési sebességek is (remélhetőleg) lassanként gyorsulnak az egész világon. Ezek a számok inkább javaslat-jellegűek, de nagyságrendileg segíthetnek eligazodni a pillanatnyi helyzetben.

Teljes képernyő

A teljes képernyő szélességű grafikákhoz a legtöbben a 2400-2500 körüli szélességet javasolják (a széles körben elterjedt monitorfelbontás 2560 képpont). Ezt tekinthetjük az abszolút maximumnak, ennél nagyobb méretben semmiképp nem érdemes feltölteni a képeidet. Ha teljes képernyős képet (Hero Image vagy hasonló nyitókép) tervezel, 1400-1600 pixel körüli magassággal számolj.

A kisebb méreteket ennek alapján már könnyen ki lehet számolni, a kép szélességét felezve – harmadolva – negyedelve megkapod a beillesztendő képek méreteit: 

• Fél: 1250
• Harmad: 825
• Kétharmad: 1650
• Negyed: 625

Valódi oldalszélesség

A tartalmi terület szélessége általában nem szalad ki a képernyő széléig, a teljes content area kitöltéséhez általában az 1650 képpont körüli szélesség javasolt, ennek szintén könnyen kimatekozhatjuk a kisebb egységeit:

• Fél: 825
• Harmad: 550
• Kétharmad: 1100
• Negyed: 412

A galériákban megjelenő képek esetében is érdemes magunknál maradni, hiába ugrik fel a kép overlayben vagy külön ablakban, ha nem muszáj, ne terheljük a sávszélességet 5000 pixeles fotókkal (persze, ha kifejezetten a nagyfelbontású képek letöltése a cél, ne rontsd le a felhasználók örömét, de az ilyesmit érdemes inkább külön letöltőgomb alá tenni). Ehhez a gyakorlottabbak az 1500 pixeles szélességet javasolják. 

Végezetül még gyakori fejfájást okoznak a közösségi médiába feltöltendő képek méretei, pontosabban képarányai. Ezek ugyan szinte napi szinten képesek változni, de a Mainstreethost írt egy remek összefoglalót, amiben az összes fontos képtípus jelenlegi állapotát megtalálhatod.