A weboldalakon használt képek méretének optimalizálása elengedhetetlen a gyors és felhasználóbarát honlapok elkészítéséhez és működtetéséhez. Bár csábító lehet kerülni a képek használatát, a tartalom sokkal áttekinthetőbb, érdekesebb és érthetőbbé válik általuk. A képfájlok méretének csökkentésére kell elsősorban figyelnünk, mivel a tárhely mérete, a felhasználók ideje és sok esetben a rendelkezésre álló mobilinternet mennyisége véges.
A kép méretét több szempontból is vizsgálhatjuk: a felbontás (dpi), a pixel méret (fizikai méret) és magának a képfájlnak a mérete (kilobyte, megabyte). A weboldalunkon elsősorban a fájlméret csökkentésére kell összpontosítanunk.
Képek felbontása és pixelmérete
A képek felbontását általában dpi-ben (dot per inch) vagy ppi-ben (pixel per inch) határozzák meg. Ez a képpontok mennyiségét jelenti hüvelykenként (2,54 cm). Minél nagyobb a szám, annál nagyobb felbontásról beszélünk. A nyomdai használat során a 300 dpi a jellemző, de internetes felületeken erre nincs szükség. Online felületeken legalább 72 ppi felbontású fotókat kell elhelyeznünk, és a képernyők többségére elegendőek a maximum 120 ppi felbontású fotók. Sok programban és helyen dpi-ben adják meg a felbontást, ami pont per hüvelyk-et jelent.
A pixelméret szorosan kapcsolódik a dpi/ppi egységhez, mivel itt a képpontok mennyiségét adjuk meg az egyes képeknek, és ehhez méretezzük kép méretét cm-ben. A monitorok nagy többsége kevesebb felbontással dolgozik, az átlag még mindig 80-115 dpi között mozog. A digitális plakátok esetében általában 72 PPI felbontást használnak.
A weboldalakon meghatározott méretű helyekre kerülhetnek a fotók, ezért nagyon fontos, hogy ennek a területnek megfelelő szélességű és magasságú, illetve arányú képeket illesszünk be, ellenkező esetben a fotók torzulhatnak. Néhány platform saját maga csökkenti/növeli a feltöltött fotók méretét, de célszerű nekünk már eleve az ajánlott méretben feltölteni a fotókat.
Képfájlok mérete és optimalizálása
A képfájlok méretét Kbyte-ban vagy Mbyte-ban látjuk. Egy kis elmélet: 1KB = 1024 Byte, 1 MB = 1024 KB. Egy 4 MB-os kép 4096 KB. Ha a célunk, hogy a képek mérete 100 KB körüli legyen, akkor egy 4 MB-os kép 34-szer nagyobb lesz, ha nem optimalizáljuk. Ez azt jelenti, hogy lényegesen nagyobb adatot kell betölteni az oldalra a látogatónak, és lényegesen több időt kell várnia, főleg ha gyengébb internet sebességgel böngészi oldalunkat. A mi szempontunkból pedig a tárhelyünk véges kapacitású, és hamar megtelik ekkora méretű képek feltöltésekor.
A képek méretét két időpontban tudjuk módosítani: a weboldalra való feltöltés előtt és után. Mindenképpen javasolt a feltöltés előtt csökkentenünk a képfájl méretét, mivel a feltöltött képeket nem tudjuk olyan hatékonysággal tömöríteni, mint ha előtte tennénk meg.
JPG és PNG formátumok
A képeknél általában két fájltípust használunk: a JPG és a PNG formátumot. A JPG (vagy JPEG) a legnépszerűbb, könnyen méretezhető, sok színárnyalatot és kiváló minőséget ad vissza. A képfájlunkat webre optimalizált formában is elmenthetjük a Fájl - „Mentés webre”/„Save For Web & Devices” opcióra kattintva. Itt mi magunk állíthatjuk be, hogy gyenge, közepes vagy maximális minőségű legyen a fotó, csúszka mozgatásával finomhangolhatjuk is a minőségét, majd megtekinthetjük a különböző változatokat.
A PNG a másik legelterjedtebb képfájl. Az előnye, hogy jobban tömöríthető minőségvesztés nélkül, és átlátszó hátterű képekhez ideális. Két fajta formátuma van: PNG-8 (csak 256 színnel dolgozik, kisebb kép méret) és PNG-24 (jobb minőség, de nagyobb fájlméret). A JPG-hez képest azonban általában sokkal nagyobbak a PNG kép méretek, ezért nem érdemes használni, ha nem szükséges az átlátszóság.
Képek méretezése és optimalizálása Photoshopban
A Photoshopban a kép méretének beállítására az Image Size (Képméret) funkció szolgál. Itt módosíthatjuk a képpontok szélességét és magasságát, valamint a felbontást. Fontos az "Oldalarány megtartása" (Constrain Proportions) opció használata, hogy arányosan tudjuk átméretezni a képeket, így arányszámítással sem kell bajlódnunk.
A nyomtatási méretezésnél a Photoshop Image/Image Size parancsával kell megismerkednünk. A méretezés előtt, ha digitális laborba szánjuk képünket, látogassunk el a labor weboldalára, vagy érdeklődjünk a laborostól a kívánt nagyításnak megfelelő optimális felbontásról. A Resolution mezőben a kimeneti felbontás adható meg, célszerű a 300 pixel/inch beállítása.
Például, ha 10x15 cm-es papírképet szeretnénk nyomtatni, és a képünk felbontása nem 300 pixel/inch, írjuk át erre. A megváltoztatott felbontás hatására a Pixel Dimensions szélesség és magasság értékei is megváltoznak. Ha növeljük a felbontást, ezek is nőnek. Először a hosszabb értéket írjuk be (példánkban a magasság, 15 cm). A Pixel Dimensions értékek is újra változnak majd. Ha nem pontosan a kívánt méretet kapjuk, a Resolution értékének kissé nagyobb értékre állításával érhetjük el a célméretet pixelben.
A teljes képméretet a fotó tényleges mérete (pl. kilobyte) és felbontása (pl. 600×800 pixel) határozza meg. A vágással amellett, hogy kicsinyíthetünk a képek méretén, koordinálhatjuk is a fotó fókuszpontját. Arra viszont ügyeljünk, hogy a fotó lényegi része lehetőleg valamelyik aranymetszeti pontba essen.
Kötegelt képátméretezés
Ha temérdek képünk van, amelyeket azonos méretűre szeretnénk átméretezni, a kötegelt szerkesztés a legcélszerűbb megoldás. Az IrfanView program segítségével több képet is átméretezhetünk egyszerre. Itt kiválaszthatjuk az átméretezni kívánt képeket, bepipálhatjuk a "Use advanced options" pontot, és beállíthatjuk a kívánt méretet (pl. 1200 pixel szélesség fekvő, vagy 1000-1200 pixel magasság álló képek esetén). Fontos, hogy a konvertálás előtt mindig legyen biztonsági mentésünk a képeinkről.
Számos képszerkesztő és tömörítő program áll rendelkezésünkre, mind online és offline, amelyek segítségével hatékonyan optimalizálhatjuk a képeink méretét minőségromlás nélkül. Ilyen offline programok például a Photoshop, Affinity Photo, Gimp (ingyenes), Irfanview (ingyenes), PhotoScape (ingyenes).
How to import video into Photoshop
A képfájlokat mindig nevezzük el releváns kulcsszavak, rövid, néhány szavas leírások segítségével. Ez segíti a keresőoptimalizálást is.
Összefoglalva, a képek optimalizálása ma már elengedhetetlen, egy gyors és felhasználóbarát honlap elkészítéséhez. A megfelelő méret, felbontás és fájlformátum kiválasztásával jelentősen javíthatjuk weboldalunk teljesítményét és felhasználói élményét.