Back to Top

Honlapkészítés Hegyeshalomban

Category Archives: Honlap fotók

google-smiley

Milyen képformátumot használjak a honlapomon?

Egy korábbi bejegyzésben a weblap barát fotókról írtam, a fényképekről, mint webkellékekről. Néhány weboldal tulajdonos jelezte, hogy “nincs képben, nem tudja pontosan, hogy a JPG, meg PNG meg egyebek mire valók, mi a különbség köztük, melyiket részesítse előnyben”. Hiányolták, hogy nem írtam a különböző képformátumokról.  Köszönöm a jelzéseket, a kérésük teljesen jogos. Így azonnal át is térek a képformátumok rövid bemutatására.

A legelterjedtebb és az általános célokat szolgáló legfontosabb formátumok a JPG, GIF, PNG és TIF. Természetesen nem csak ezek a képformátumok léteznek, de az általános céloknak ezek tökéletesen megfelelnek.

Melyik formátumot válasszam? Erre egyszerű a válasz: amelyik a legjobban megfelel a célnak. A weblap tulajdonosának valószínű a honlapra kellenek jó fotók. Azért csak valószínű, mert lehet, hogy a szórólapokat, nyomtatott reklámanyagokat is saját maga készíti, amihez már inkább vektorgrafikus képformátum az ajánlott. Nos, nézzük akkor szép sorjában.

JPG képformátum

A JPG képformátum pixeles formátum, azaz minden egyes képpont tartalmát külön információként tárolja. Színgazdag fényképek formátuma. Ez a legmegfelelőbb formátum akkor, ha a képfájlnak kicsinek kell lennie. Például ha egy weboldalon, vagy egy emailben szeretne képet megjeleníteni, használjon JPG kiterjesztésű képformátumot. A legtöbb digitális fényképezőgép felajánlja ezt a formátumot. Nagyon kicsire össze lehet tömöríteni a képet, így gyorsan töltődik az oldal, gyorsan átmegy az email. Ráadásul a tárhelyünket is kiméli, több fájl fér el rajta.

Azonban ennek a fantasztikus tulajdonságnak magas ára van! Mégpedig a minőség, mert a JPG képformátum tömörítése csak veszteséggel történhet. Ugyanis a JPG tömörítése során a kép bizonyos részei veszítenek a színekből. Az így elvesztett színeket aztán nem lehet visszanyerni.

Tehát a kicsinyre tömörített JPG képeket ha megnagyítjuk a képernyőn, akkor homályosak lesznek. Ha egy tömörített JPG képet tovább tömörítünk, akkor az újabb minőség romláshoz vezet. Tehát soha ne az eredeti fotót tömörítse, hanem az eredetiről készítsen egy másolatot és azzal dolgozzon!

Ha a tömörített fotót még elfogadható minőségűnek látja, nyugodtan használja a weblapján, mert a honlap betöltődési sebessége manapság nagyon fontos. Végső soron az emberi szem nem érzékeli annyira a színek részleteit, mint a sötét és világos árnyalat közötti különbséget, ezért némi színveszteséget feláldozhatunk a honlapunk gyorsasága érdekében.

Persze kérdés, hogy a fotóval mit illusztrál. Ha festményeket árul a weboldalán, vagy utazási irodát működtet, akkor nem szerencsés megoldás!

GIF képformátum

A GIF képformátum is pixelekben őrzi az információt, de egyszerre legfeljebb 256 színt jelenít meg. Lehetővé teszi, hogy egy általunk választott színt átlátszóként használjunk.

Mire alkalmas? Leginkább kevés színből álló grafikus képekhez, rajzokhoz, ikonokhoz, logókhoz, animációkhoz használják. Jó választás a weboldalon megjelenő grafikákhoz.

Mivel egy GIF formátumú képen egyszerre maximum 256 szín jelenhet meg, ezért jó minőségű digitális fényképekhez ez nem alkalmas. Egy digitális képben akár százezer különböző színérték információ is lehet!

A GIF képformátumot veszteség nélkül lehet tömöríteni. Ez azt jelenti, hogy amikor megnézzük a képet, akkor a képben tárolt összes információt kicsomagoljuk. Minél kevesebb szín van a képen, annál kisebb a fájl mérete!

PNG képformátum

A PNG formátum lassan kezdi átvenni az előző bekezdésben említett GIF formátum szerepét. Veszteségmentesen tömöríthető, támogatja az átlátszóságot, de nem támogatja az animációt. Egy PNG fájl akár 10-30 %-al is tömörebb lehet, mint egy GIF formátumú fájl.
A PNG formátummal nem csak egy színt tehetünk átlátszóvá, hanem szabályozhatjuk a teljes kép átlátszóságát. Ez a gyakorlatban azt jelenti, hogy bármilyen színű háttérre rátehetjük a PNG képet, jól fogjuk látni az eredeti képet.

A PNG formátum kiválóan alkalmas komplex képek megjelenítésére, feltéve ha a fájl mérete nem számít.

TIF  képformátum

Ezt a képformátumot hagytam utoljára, mert főleg a nyomtatott anyagokhoz használják. Veszteség nélkül tömöríthető, támogatja az átlátszóságot is.

Ha egy képet meg akarok őrizni az eredetihez leginkább hasonlító módon, akkor ezt tömörített TIF formátumban teszem. Ugyanis az ilyen képet később nyugodtan szerkeszthetem anélkül, hogy minden mentésnél romlana a minősége.

A weboldalán azonban ne használja! Bár a TIF fájl nagyon jó minőségű kép, a nagy fájl mérete miatt a honlap betöltődése örökké tart. Mint tudjuk, az idő pénz!

mini-couper-remek-webfoto

A fotó, mint webkellék

Az előző részben arról írtam, hogy milyen tényezőket érdemes figyelembe venni ha jó webszöveget szeretne írni. Bizonyára nem árulok el titkot azzal, hogy egy weboldal népszerűsége nem csak azon múlik, hogy milyen szöveges tartalommal bír. Természetesen az érdekes, informatív, egyedi szöveg alapvető kelléke egy jó weboldalnak, de az összképhez más elemek is hozzátartoznak. Ezek egyike a fotó. A jó fénykép rengeteg információt nyújt másodpercek alatt, és nem lassítja a weboldal betöltődését. Gondoljunk itt a webáruházakra, vagy utazási irodák, képző- és iparművészeti oldalakra. Természetesen nem a profi fotósoknak ajánlom figyelmébe ezt a leírást, hanem a fotóikat maguk szerkesztő kisebb webáruházak, weblapok tulajdonosainak.

Mitől lesz weblap barát egy fotó?

Sok weboldalon az első fotó amivel találkozunk, a fejlécben látható nagy méretű kép. Ezt valószínű a weboldal tervezője megfelelően készítette el, és ha önnek nincs jogosultsága a weblapjának kinézetét megváltoztatni, akkor a fejléc fotójával nem is kell foglalkoznia. Ha megfelelő anyagi forrásokkal rendelkezik, akkor megbízhat egy profi fotóst, aki megszerkeszti a weblapon látható képeket. Azonban több száz vagy esetleg ezer terméket tartalmazó webshop esetén ez nagyon drága lenne. Ilyenkor a weboldal tulajdonosa inkább megbízza egy munkatársát, hogy töltse fel a szöveges tartalmat, fényképeket, videókat, térképet, stb. Honnan származnak a képek? Kaphatjuk készen, vagy fotózhatunk magunk is. Mitől lesz weblap barát? Sok tényezőtől, de ezek közül igen fontos a kép felbontása, a fájl mérete és neve.

Mire figyeljek egy készen kapott kép szerkesztésekor?

A fénykép méretét és minőségét több tényező befolyásolja. Egyik dolog a kép fizikai mérete, azaz mekkora területet foglal el a képernyőn. A másik pedig a fájl mérete, azaz mekkora memóriát foglal el a számítógépen, és milyen gyorsan töltődik be egy weboldalra. E két tényezőt alapvetően befolyásolja, hogy milyen felbontású a fotó. A felbontás azt jelenti, hogy hány pixelből áll egy kép. A nagy felbontású képek élesek, minden apró részlet jól látható rajtuk. Azonban a kép fájl mérete óriási, akár 2-10 megabájt (MB) is lehet! Egy jó képszerkesztő programmal ezen könnyen lehet segíteni.

Ha van lehetősége a Photoshop-ot használni, akkor a kép mentésekor válassza a “Mentés webre” opciót, majd válassza a “JPEG” fomátumot, és végül jelölje be a kis négyzetet a “Progresszív” felirat mellett. A Microsoft Office képszerkesztőjével is csökkenthető a kép mérete. Válassza a “Kép” menüben az “Átméretezés” vagy a “Képek tömörítése” alpontot és kövesse az ott megadott utasításokat.

A nagy és nagyon jó minőségű képek méretét célszerű 60-100 kilobájt (kB) között tartani. Ha az oldalán egy nagy fotót akar bemutatni, akkor az is maximum 80-100 kB között legyen. Ha kisebb képeket használ a weboldalán, elég a 20-30 kB-os méret. Célszerű ugyanabból a képből többféle méretet is készíteni, mert a weboldalán szüksége lehet rá. Szabadszemmel szinte észre sem vesszük a különbséget egy 50 kB és egy 250 kB méretű kép között. Ezért ha egy fotót háttérképként szeretne használni, nem szükséges a nagy felbontás.

Mire figyeljek a fotózáskor?

Ha saját maga készíti a fotóit a weblapjára, már a fotózás során célszerű bizonyos szempontokra odafigyelni. Mielőtt kattan a fényképezőgét, alaposan nézze meg a fő témát és a környezetet. A háttérben ne legyen semmilyen zavaró, oda nem illő tárgy, szemetes vödör, rendetlenséget sugalló összevisszaság. Egyszerűen fogalmazva, ne legyen semmi, ami elvonná a figyelmet a fő témáról. Ügyeljen arra is, hogy ne legyen tükör a közelben, hacsak nem magát a tükröt fotózza.

Fókuszáljon a kép fő alakjára. Ha a kép fő témája embert ábrázol, a szemeket ne hagyja homályban. Ha termék fotókat készít a webáruházába, ügyeljen arra, hogy a fókusz az adott tárgyon legyen és ne a környezetén. Használjon erős megvilágítást, és készítsen a termékről több képet, különböző oldalról. Lehetőleg fehér hátteret használjon, mert az jól kiemeli a tárgyat és az árnyékokat is. Persze egy képszerkesztővel később is lehet árnyékot varázsolni a képre, de nem biztos, hogy az természetes hatású lesz. Ha ragaszkodik a színes háttérhez, akkor válasszon a termék színétől jelentősen különböző, egyszínű, de a fő téma színével harmonizáló színt. A cél, hogy a fő téma legyen szembeöltő.

Mire figyeljek a képek feltöltésekor?

Készek a fotók, várják, hogy felkerüljenek a weboldalra. Még mielőtt elkezdené a feltöltést, vessen egy pillantást a képfájlok nevére. Utalnak a kép tartalmára azok a fájl nevek, vagy csak kép1, kép2, stb. tudható róluk? Mivel az internetes böngészők a képfájlok nevét is olvassák, célszerű valamilyen rövid, de érthető nevet adni a fájlnak, például piroslabda.jpg, vagy rozsaszal.jpg. Ha weboldalának admin felülete lehetőséget ad arra, hogy a képek címét, leírását és a kép alternatív feliratát is megadja, semmiképpen ne hagyja üresen azokat a rovatokat. Ezek az információk mind segítik a keresőmotorokat, a weblapja szélesebb körben lesz ismert.

Tegyük fel, hogy ugyanarra az oldalra több termék képét is feltölti. Nagyon fontos, hogy a képek azonos méretűek és azonos orientációjúak legyenek. Az esztétikai élmény kedvéért legyenek azonos a keretben, vagy egyáltalán ne legyen keretük.

Mi a lényeg?

Ha az előző bekezdéseket mind elolvasta, talán sikerült egy nagyon általános képet alkotnia arról, hogy milyen legyen a webre optimalizált fotó. Nyilván egy csomó minden kimaradt. A három legfontosabb szempont azonban a képfelbontás, képfájl mérete, képfájl neve. Kitaláltam egy könnyen megjegyezhető mozaikszót: FELMÉRNE (a kép FELbontása, MÉRete, NEve)

A múltkor nagyjából körvonalaztam a jó webszöveget, most a jó webfotókról szóltam. Legközelebb visszatérek megint a szövegekhez, hogy néhány fontos szempontot részletesebben is kifejtsek.