SEOMAX – A SEO szakértő

Képek optimalizálása – átméretezés

Képek optimalizálása - képek méretének csökkentése

Képek optimalizálása ma már elengedhetetlen, egy gyors és felhasználóbarát honlap elkészítéséhez, működtetéséhez. Választhatnánk azt, hogy nem használunk annyi képet honlapunkon, de ez semmiképp nem szerencsés, mivel a cikkek, a tartalom sokkal áttekinthetőbb, érdekesebb és érthetőbbé válik a képek által. És akkor még nem is beszéltünk a webshopokról, ahol a képek elengedhetetlenek, ahhoz, hogy a termékeket értékesíteni tudjuk.

Ebben a cikkben megmutatom, hogy hogyan tudod a képeid méretét optimalizálni a honlapodon, megmutatom, hogy keresőoptimalizálás szempontjából, milyen lépésekkel optimalizáld képeid és mutatok pár programot, bővítményt amivel ezeket az optimalizálásokat el tudod végezni.

Képek optimalizálásnál fontos mutatók

A képek méreténél több dologról beszélhetünk. Van a képnek mérete a felbontás szerint, a pixel mérete szerint (fizikai mérete) és magának kép fájl-nak a mérete szerint . A weboldalunkon elsődlegesen a fájl méretérnek csökkentésére kell figyelnünk, mivel a tárhelyünk mérete, a felhasználók ideje és sok esetben a rendelkezésre álló mobilnet mennyisége véges.

A képek optimalizálásához, nem árt tisztában lennünk néhány tulajdonsággal, amivel rendelkezik és amik tudatában sikeresen optimalizálhatjuk a képek méretét minőségromlás nélkül.

Képek felbontása:

A képek felbontását dpi-ben szokták meghatározni. Ez a dot per inch mértékegység a képpontontok mennyiségét jelenti hüvelykenként (2,54 cm-enként). Tehát minél nagyobb a szám, annál nagyobb felbontásról beszélünk. 

A képeink nemegyszer 300dpi felbontásúak, mely teljesen felesleges az interneten. Ez a méret a nyomdai használat során érdekes. Nekünk teljesen elég a 72 dpi a képernyőn való nézegetéshez.

A képszerkesztő programokban találkozhatunk ppi mértékegységgel, ez ugyanaz. Jelentése: pixel per inch.

Képek pixel mérete:

A pixel szorosan kapcsolódik a dpi mértékegységhez, mivel itt a pixel (képpont) mennyiségét adjuk meg az egyes képeknek és ehhez méretezzük kép méretét cm-ben.

Tehát, ha a monitorom 15,4 hüvelyk és  1920 x 1080 pixel méretű felbontáson használom akkor az azt jelenti, hogy 135 dpi.

Hogy jött ez ki?

A monitorom mérete 36 x 20,7 cm.

1920 pixel számot elosztottam a képernyő méretével vagyis 36 cm-el. Ez 53,3 képpontot ad ki centiméterenként és ezt beszorzom 2,54-el, hogy megkapjam hüvelyenként a pontok számát. A végeredmény 135,5 dpi felbontás.

A monitorok nagy többsége ennél kevesebb felbontással dolgozik. Az átlag még mindig 80-115. közötti.

Ma már nagyon sokféle monitor méretet találunk a piacon. Magyarországon a 3 legtöbbet használt monitor felbontás (mobil, tablet kivételével): 1366×768, 1024×768, 1920×1080. (világviszonylatban az 1024×768 már nem számottevő, az 1440×900 áll a harmadik helyen).

Egy weboldalam böngészéséhez leggyakrabban használt képernyő felbontások (Analytics alapján).
Képernyő felbontások szerint dpi értékek - képek optimalizálása
Képernyő felbontások szerint dpi értékek

Most kérdezhetnéd, hogy miért érdekes ez. Ez azért érdekes a képek optimalizálásánál, mert mint látjuk bőven elég kisebb felbontással és dpi értékkel dolgoznunk, mivel a monitorok többsége kiváló képminőséget fog visszaadni. Mivel ha a képünk mérete 800 x 600 px, akkor az minden monitoron ugyanakkora pixel marad. A cm mérete csak a felbontás miatt változhat. Ez weben nem számít igazán csak a nyomtatásban.

Lássunk két összehasonlítást:

Az elsőn 72 dpi(ppi) felbontású a kép, itt 28,2×21,2 cm, a másikon 105 dpi(ppi), aminél 19,4×14,5 cm a kép amit látunk a monitoron.

Az kalkulációkat te is kipróbálhatod ezen az oldalon: https://www.pixelcalculator.com/

72 dpi felbontású kép mérete
72 dpi felbontás - 800x600px kép
105 dpi felbontású kép mérete
105 dpi felbontás - 800x600px kép

Kép fájlok mérete:

A kép fájlok méretét Kbyte-ban Mbyte-ban látjuk a legtöbbször.

Egy kis elmélet:

  • 1KB = 1024 Byte
  • 1 MB = 1024 KB
  • 1 MB = 1024 x 1024 Byte = 1 048 576 Byte
  • 1 GB = 1024 MB = 1 048 576 KByte

Szóval, ha képünk mondjuk 4 MB-t. Akkor az azt jelenti, hogy 4096 KB-t.

1 GB tárhely esetén:

  • 4 MB-os képből 256 db fér el.
  • 120 KB-os képből 8738 db fér el.

Azért van különbség! 

Azt mondjuk, hogy a 100 Kb környéki képek az optimálisak egy oldalon, akkor ha a 4 Mb-os képünket nem kb. 120 KB-os tömörített képként rakjuk fel az oldalunkra, akkor annak 34 x akkora lesz a mérete. Ami azt jelenti, hogy lényegesen nagyobb adatot kell betölteni az oldalra látogatónak és lényegesen több időt is kell várnia, főleg ha gyengébb internet sebességgel böngészi oldalunkat. Ez a felhasználó oldala. A miénk emellett még, hogy a tárhelyünk véges kapacitású és pikk-pakk betelik ekkora méretű képek feltöltésekor. Plusz nem igazán fog tetszeni a Google algoritmusainak, ha nagy méretű képekkel szórjuk tele az oldalainkat, csökkentheti a helyezéseink, így nem utolsó szempont a keresőoptimalizálás is.

Alkalmazzuk az itt található  lehetőségeket a képek optimalizálásához weboldalunkon.

Képek optimalizálása - miért csökkentsük a kép méretét

  • A túl nagy méretű képek leterhelik a weboldalunk.
  • A nagy képek lelassítják a honlapunk, így az emberek nem várják meg, míg betöltődik, nagyobb arányban hagyják el.
  • A Google hátrébb sorolhat, mert előnyben részesíti a gyorsabb oldalakat.

Képek optimalizálása - Mikor optimalizáljuk képeink méretét

A képek mértét két időpontban tudjuk módosítani:

  1. A weboldalra való feltöltés előtt.
  2. A weboldalra feltölté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. Emellett a feltöltés is sokkal több időt vesz igénybe egy nagyobb fájl esetén.

Képek optimalizálása - hogyan csökkentsük a méretét

A képeknél általában két fájltípus használunk, melyek a jpg és a png. A képek optimalizálása során érdemes ezeket a formátumokat használnunk az adott célunkhoz mérten. 

Lássuk, is melyiket miért:

A JPG vagy JPEG a legnépszerűbb, ez a fájltípus könnyen méretezhető, sok színárnyalatot és kiváló minőséget ad vissza nekünk. A képméretező programokban könnyen menthetjük akár alacsonyabb minőségben is a minőségromlás nélkül.

A PNG a másik legelterjedtebb képfájl. Az előnye, hogy jobban tömöríthető minőség vesztés nélkül. Két fajta formátuma van. A PNG-8, ami csak 256 színnel dolgozik és a PNG-24, ami több millió színnel, de ez által nagyobb fájlmérettel. A PNG-t leginkább az átlátszó hátterű képekhez és a kevés színt igénylő (pl. csak feliratot) használó képekhez használjuk a leggyakrabban, mivel sok színnél már nagyobb fájlméretet ad, mint a JPG.

 

Képek optimalizálása - feltöltés előtt

A képeink tömörítése, méretének optimalizálása a leghatékonyabb, ha még a weboldalunk tárhelyére történő feltöltés előtt végezzük el.

Ezekre az optimalizálásokra számos  képszerkesztő és tömörítő program áll rendelkezésünkre, mind online és offline program.

Képek optimalizálása – lépések:

  1. Határozzuk el mekkora pixel méretű képet szeretnénk. Általában felesleges a 4-5000 px széles kép, mert ahogy max. látjuk, bőven elég az 1000 pixel körüli-alatti, mivel úgy sem tud megjelenni a képernyőn nagyobb. (én leggyakrabban 800×600 px egységes méretet használok)
  2. Állítsuk be a felbontást (dpi) értéket. Ezzel sok byte-ot megspórolhatunk magunknak, mivel a képernyőn való nézéshez nem kell több százas dpi, csak a nyomtatáshoz. Leggyakrabban a 72 dpi-t használjuk, mert az megfelelő képminőséget ad vissza nekünk.
  3. Minőség beállítása. Itt szintén nyerhetünk pár Kbyte-ot. Tapasztalatok szerint kb. 80%-os képminőségig még nem látható minőségromlás. (de ez képenként változhat)
  4. Mentés jpg vagy png formátumba. Nevezzük el rendesen a képünk, hogy ezzel is segítsük a keresőoptimalizálásunk. (erről bővebben a Képek keresőoptimalizálása a gyakorlatban című cikkemben olvashatsz)
  5. Tömörítő program használata, ha szükséges még a képeink méretének csökkentése.
  6. Optimalizált képek feltöltés a webhelyünkre.

Offline programok – képek optimalizálásához:

Bőven találunk ingyenes és fizetős programokat

Az offline programokban könnyedén tudjuk állítani a képek méretét, felbontását, minőségét. Minden ilyen képszerkesztő programban találunk olyan menüpontot ahol kifejezetten a webre tudunk menteni. (Ezek általában: Mentés webre, Save for Web, Exportálás stb.)

TIPP: Arra azért mindenképp figyeljünk, hogy ha szerkeszteni akarunk egy képet, akkor azt még a tömörítés előtt tegyük meg, mivel utána már nem biztos, hogy azt az eredményt érjük el a szerkesztésnél, amit szeretnénk.

A teljesség igénye nélkül két ingyenesen letölthető program, amivel könnyedén optimalizálhatjuk a képeinket a weboldalra való feltöltés előtt:

Képek optimalizálása Irfanview programmal

Eredeti kép

Az eredeti képünk 4,2 MB, 7027 x 4701 px méretű.

Képek optimalizálása 1. Irfanview
Save for Web menüpont

Save for Web menüponttal tudjuk a képeinket optimalizálni, ha, ha már minden szerkesztéssel megvagyunk.

Ha netán nem működne, akkor az Irfanview honlapjáról le kell tölteni plugint, vagy a teljes plugin gyűjteményt az Irfanview programhoz. 

Képek optimalizálása 2. Irfanview
Pixel méret beállítás

Kiválaszthatjuk, hogy a képunk mekkora méretű legyen pixelben és százalékban az eredetihez képest.

Képek optimalizálása 3. Irfanview
Kiterjesztés és minőség kiválasztása

Itt már látható, hogy mekkora méretű lesz a fájlunk. Itt állíthatjuk be, hogy milyen kiterjesztéssel (JPEG, GIF, PNG) és milyen minőségben mentsük le.

Képek optimalizálása 4. Irfanview
PNG fájl mérete

Jól látható, hogy a PNG fájl mérete mennyivel nagyobb. Jelen esetben kb. hétszerese, ami miatt nem érdemes használni. Abban az esetben ajánlott, ha pl.: átlátszó hátteret szeretnénk.

Optimalizált kép Irfanview programmal
Optimalizált kép

A kép optimalizálása az alábbi beállításokkal: 800 x 535 px, 90 % minőség, jpeg kiterjesztés.

A végeredmény minősége teljesen megfelelő ezeknél a beállításoknál. A kép mérete csak 79 KB lett, szemben a 4,2 MB-al.

Képek optimalizálása PhotoScape programmal

Képek optimalizálása 1. PhotoScape
Méretezés gomb

A képen látható, hogy az eredeti képünk, szintén 7027 x 4701 px és 4,1 MB méretű.

A kép alatt található méretezés gombbal tudjuk beállítani a kép pixel méretét

Képek optimalizálása 2. PhotoScape
Pixel méret beállítás egyénileg

Beállíthatjuk a kép méretét tetszőlegesen egyénileg is ha a méretezés gombra kattintunk.

Képek optimalizálása 3. PhotoScape, pixel méret állítás fix beállításokkal.
Fix méretek használata

Vagy beállíthatjuk előre kialakított méretekre, ha a Gomb melletti lefelé mutató nyílra kattintunk. Ebben az esetben én a hosszabbik oldalt 800 pixel méretűre állítottam és arányosan hozzáállítódott a rövidebb oldal is.

Képek optimalizálása 4. PhotoScape. programmal. Dpi és minőség beállítás.
Dpi, minőség és célkönyvtár beállítása.

Mentés gomb után beállíthatjuk, hogy milyen minőségben és mekkora dpi felbontással  és természetesen, hogy hova szeretnénk elmenteni a tömörített képünket.

Képek optimalizálása 5. PhotoScape programmal. Optimalizált kép.
Optimalizált kép

A kép optimalizálása az alábbi beállításokkal: 800 x 535 px, 90 % minőség, 72 dpi, jpeg kiterjesztés.

A végeredmény minősége teljesen megfelelő ezeknél a beállításoknál is. A kép mérete csak 85 KB lett, szemben a 4,1 MB-al.

Kötegelt szerkesztővel több képet tudunk egyszerre optimalizálni. A Kötegelt szerkesztőt vagy a programba való bejelentkezésnél vagy a felső menüből választhatjuk ki. 

Méretezés hasonló az előzőhöz, egyéni vagy fix méretekkel történik. Az összes konvertálása gomb után még beállíthatjuk a dpi, a minőség, a fájlnév és célmappát is.

Online programok – képek optimalizálásához:

Ezekkel az online tömörítő programokkal még tudjuk tovább kicsinyíteni a képeink méretét. Ezeket lehet együttesen is használni, a képszerkesztőkkel, vagy akár külön külön is. Jópár programmal egyszerre több képünket is optimalizálhatjuk, tömöríthetjük, de azt vegyük figyelembe, hogy a túl nagy (több MB) méretű képekből sosem lesz 100 KB körüli képméretünk.

stb.

Lássunk egy példát az előbbi képpel, aminek az eredeti és a már optimalizált változatait töltöttem, be, hogy lássuk, mennyire lehet őket még optimalizálni. A program az online tinypng.com.

Képek optimalizálása tinypng programmal. Eredmények.
Képek optimalizálása a tinypng.com online programmal.

A képen jól látható, hogy az eredeti méretű képből nem lehet nagyon kicsi, webre elfogadható optimalizált képet kapni. Viszont a már tömörített képeket még így is lehetett kisebb méretűre optimalizálni.

Itt láthatod az online programmal még tovább optimalizált képeket:

Képek optimalizálása - Feltöltés után

Feltöltés után képeinket optimalizálhatjuk direkt erre készült pluginokkal, melyek vagy a feltöltés pillanatában, vagy általunk meghatározott időpontban.

Ilyen WordPress bővítmények:

  • WP Smush bővítmény: ingyenesen letölthető, mely a feltöltött képeinket tudja tömöríteni. (ingyenesen verzióban egyszerre 50 db) Egyszerre több, de akár egyesével is tömöríthetünk. Nagyon jó eredményeket ad.
  • Compress JPEG & PNG images az onlie tinypng.com beépülő bővítménye. Havonta 100 tömörített képig ingyenes.
  • Imsanity: Automatikus képtömörítést ad. Beállíthatjuk, hogy mekkora méretű és minőségű képeink legyenek.
  • Imagify Image Optimizer: ingyenes tömörítést ad 25 MB-ig havonta.
  • stb

Ezek mellett, ha az oldalunkon használunk valamilyen cache programot akkor azzal is gyorsíthatjuk weboldalunk, mert ezek a programok szintén tömörítik képeinket.

Képek optimalizálása - mit ne tegyünk

  • Ne töltsük fel a képünket az eredeti méretében, ahogy elkészítettük fényképezőgépünkkel vagy telefonunkkal. Ezek a képek már 3 – 6 Mbit méretűek. Ez az ideális 100-200 kbit méretnek a több, mint harmincszorosa!
  • Ne a honlapon akarjuk lecsökkenteni a több megabájtos képünket. Ott már csak az alapból tömörített képet optimalizáljuk még.
  • Ha nincs szükségünk nagy méretű (pixel) képekre akkor bőven elég a kisebb 1024 x 768 vagy akár kisebb 800 x 600 méret is.

Kép: pexels.com

HOGYAN KEZDJ NEKI A SEO-NAK
INGYENES e-book

11 lépés, ami több látogatót hoz neked a keresőből!Konkrét, azonnal használható lépések!

Kérd most az INGYENES E-BOOK-ot az első SEO lépésekkel!

HOGYAN KEZDJ NEKI A SEO-NAK
INGYENES e-book

11 lépés, ami több látogatót hoz neked a keresőből!Konkrét, azonnal használható lépések!

Kérd most az INGYENES E-BOOK-ot az első SEO lépésekkel!