A képek átmérezetése, a képek méretének csökkentése döntő a honlapunk felhasználhatósága, sebessége és keresőben elért teljesítménye szempontjából. Ebben az írásban bemutatom a képek használatának legfontosabb szempontjait és a legjobb ingyenes átméretező eszközöket.
Először vegyük sorra a képek használatának és méretezésének legfontosabb szempontjait. Ha kihagynád a bevezetőt, ugorj az eszközökhöz, amelyekkel kicsinyítheted, szerkesztheted a képeket.
A fényképek használatának aranyszabályai
- Érzelmi, személyes hatás. A fényképek nagyon fontos érzelmi, személyes benyomást adnak az olvasónak. A fényképek alapján döntenek az olvasók, hogy vásárolnak tőled vagy nem. Ezért nagyon nem mindegy, hogyan és milyen képeket teszel közzé. De a legfontosabb, hogy legyenek fent képek. A legjobb a magad által készített fotó vagy rajz, még akkor is, ha nem profi fotós készítette. A legkevésbé jó az ingyenesen letöltött stock fotó. Ezek ugyanis kicsit műanyag benyomást kelthetnek.
- Sebesség. A fényképek döntően befolyásolják azt, hogy a honlapod milyen gyorsan töltődik be. Egy átlagos weboldal címlapja max 2 MB lehet annak érdekében, hogy gyorsan betöltődjön. Ha felteszel a címlapra egy 3-4 MB-os fényképet, az olyan, mintha elefántot tennél a vitorlázó repülőd pilótafülkéjébe.
- Google helyezés. A képek mérete meghatározza az oldalad betöltési sebességét. A betöltési sebesség meghatározza, hogy az olvasóid milyen gyorsan hagyják el az oldaladat. Ezért a képek leméretezésének elhagyagolása önmagában odaver a Google helyezésednek. Ezen kívül persze a képek keresőoptimalizálása is nagyon fontos, ezt is le fogom írni ebben a cikkben.
- Tárhely és pénz. Egy átlagos honlapon a fényképek foglalják a legtöbb helyet. És minél több fényképed van, annál többet számít minden egyes fényképnek a mérete. 1000 fényképnél a rendesen leméretezett fényképek és a hanyagul felpakolt képek évente több 10 ezer forintos tárhelybérleti árkülönbséget okozhatnak.
Személyesség, egyediség
Először is: használj képeket. A legrosszabb kép is jobb, mint a semmi.
A legjobb az, ha magad készítette képeket használsz. A mobiltelefonod tökéletesen megfelel a célnak. A képnek nem kell profinak lennie, nem kell tűélesnek lennie, a cél az, hogy személyes legyen, és érthető legyen, mit mutatsz a képen. A képek szerkesztéséhez rengeteg online képszerkesztő áll rendelkezésre.
A kiemelkedő kép nem tökéletes, nem profi, nem szép, nem tűéles. Hanem: személyes.
Ezért fontos, hogy ha szolgáltatást nyújtasz, legyen fénykép rólad és a munkaátrsaidról a honlapodon, és ezzel is lehetőséget adj az olvasódnak, hogy személyes tapasztalatot szerezzen rólad.
Miért fontos a képek mérete?
Ha nagy képek vannak az oldaladon, brutálisan lassíthatják a betöltés sebességét.
És az egészben a legrosszabb, hogy ezt nem fogod észrevenni. Ennek az az oka, hogy a böngésződ elmenti a honlapod képeit, szerkezetét. Amikor felmész az oldalra, nem az internetről tölti be, hanem a gépedről. Ezért neked gyorsan fog bejönni. De az olvasódnak, aki először megy fel rá, lassan fog bejönni.
Ha tudni akarod, milyen gyors az oldalad, menj a Google Sebességmérő Eszközére, és teszteld le a honlapod. Az eszköz ki fogja írni, hogy mekkorák a képeid. Ha ezek meghaladják a szükséges mértéket, akkor lassítják a honlapodat. Ebben az esetben az alábbi eszközök egyikével le kell kicsinyíteni a képeket.
Az ideális méret és eszközök képek átméretezéséhez
Az ideális képméret 150 KB alatt van. Ha le kell méretezned a képet, ezekkel az eszközökkel tudsz dolgozni.
Mac / Apple számítógépekhez:
- ImageOptim brutálisan jól működik, csak ezt használom. Egyszerre több képet is le tudsz méretezni anélkül, hogy meg kellene nyitnod őket.
Windos operációs rendszerhez:
Online programok:
Ha nem akarod telepíteni a programot a gépedre, akkor online használhatod a JPEG MINI-t a PunyPNG-t vagy a Kraken-t.
Az elkészült képet ingyenesen szerkesztéséhez javasolom a Canva képszerkesztő használatát, ami egyszerű és gyors. Ráadásul vannak benne filterek, amik lehetővé teszik, hogy a stock fotókat is személyessé varázsold egy kicsit.
Spórolj a tárhelyeddel
Egy honlapon a legtöbb helyet a fényképek foglalják el. Ezek mind tárhelykapacitást vesznek igénybe, amely önmagában is lessíthatja a honlapodat. Ráadásul egyre több helyet foglalnak, és ezért bizony fizetned kell a tárhelyszolgáltatónak – feleslegesen.
A honlapodon két helyen gyűlhetnek fel felesleges, nem használt fényképek.
- A médiatárban. Érdemes ezeket fél évente egyszer végignézni, és törölni a felesleget. Törlés után távolítsd el őket a lomtárból is.
- Kapcsolati formák bejegyzései. Ha használsz kapcsolati formát, amelyhez az olvasóid mellékelhetnek fényképet, figyelj rá, hogy nem halmozódnak-e fel ennek a tárhelyében a fényképek. Ha igen, töröld őket rendszeresen.
Ha még nem tetted, olvasd el a tárhely kiválasztásáról szóló írásomat. Sok hasznos információt találsz benne, nem csak a képek használatával kapcsolatban.
A fényképek keresőoptimalizálása
A fényképek mérete önmagában fontos keresőoptimalizációs tényező. A nagy képek rontják az oldalad besorolását, a jó képek meg javítják. Ezen kívül még az alábbi dolgokra figyelj oda.
Szöveges leírások megadása a képekhez
A képekhez minél több szöveges leírást adj meg. A Google olyan mint egy vak: nem látja a képeket, ezért rá kell írni, hogy mi van a képeken. Ehhez használj minél több funkciót:
- A képekhez adj helyettesítő szöveget (angol kezelőfeületen ezt alt text-nek nevezik).
- Töltsd ki a leírásokat. Ezzel részletes leírást tudsz adni a képnek, ami nem jelenik meg a képernyőn, hanem a Google és a látássérültek olvassák.
- Készíts feliratot a képhez. Ezt a látók is olvassák, és ezzel magyarázatot, kiegészítő megjegyzést tudsz adni a fényképhez.
- A fénykép file neve is leírás, és információt hordoz. Ahelyett, hogy DSC8374.JPG nevet adnál, legyen a képnek értelmes neve, például bicikliszerziz.jpg. Használj kis betűket, ékezetek nélkül. Ha két szóból áll a file neve, akkor rövid kötöjellel válaszd el a szavakat: Budapesti_kilátók.jpg helyett budapesti-kilatok.jpg a helyes elnevezés.
A képek elhelyezése a cikkben
A fényképeket ne találomra helyezd el a cikkedben. Annak a szövegrésznek a közelébe illeszd, ahol értelme van, ahol kapcsolódik a tartalomhoz.
A fényképet ne told balra, nem told jobbra, és ne kerülgesse az írás a szöveget. Ezzel ugyanis megtöröd az írás lendületét, és zavarossá teszed az összképet. Még rosszabb, hogy mobil nézetben kiszámíthatatlan katyvaszt tud okozni a dolog.
Fényképekes oldaltérképek használata
Segítesz a Google-nak a honlapod megismerésében, ha olyan oldaltérképet használsz, amely a fényképekre vontakozó információkat is tartalmazza. Ha a YOAST SEO bővítményt használod, akkor a képekre vontakozó információk automatikusan bekerülnek az oldaltérképedbe. Nézd meg például az általam használt olaltérképet, és látni fogod, hogy ez tartalmazza a képekre vonatkozó információkat is.
A kép megjelenése a közösségi oldalakon
Ha kiposzolod a cikkedet a Facebookon, sokszor gyatra megjelenést érsz el. A Facebook lehetővé teszik, hogy pontosan meghatározd, hogyan jelenjen meg a képed.
Ha a YOAST SEO bővítményt használod, egyszerűen elérheted, hogy a képek tökéletesen jelenjen meg a képed. Sőt, a cikkednek egyedi Facebook-os megjelenést adhatsz. A WordPress honlapok keresőoptimalizálásáról szóló útmutatóm más képpel jelenik meg a honlapomon és más képpel a Facebook folyamban. Az egyedi posztok SEO-beállításaiban tudod elvégezni ezeket a beállításokat.
Ezt a cikket folyamatosan fejlesztem majd, most a legfontosabb dolgokat foglaltam benne össze. Ha bármi hiányzik belőle vagy kérdésed van, jelezd kérlek egy hozzászólásban.
Kössz, szuper tippek!
A Google Sebességmérő szuper, a képméretező tippek nagyon jók!
Kösznönöm, sok sikert a méretezéshez!
Néhány napja találtam rá a honlapra. Kezdőként máris rengeteg hasznos információhoz jutottam, köszönöm. Amit „merek” 🙂 azt majd kipróbálom folyamatosan. A honlap mentés kapcsán találtam ide, de máris elidőztem a képszerkesztőknél. Nagy segítség nekem a lap.
Ha van biztonsági mentés, akkor bármit ki lehet próbálni 🙂 Sok sikert és örömteli kísérletezést kívánok!
Szia ezen leiràsodban nagyon hasznos dolgokat talàltam ws köszönöm hogy le irtad ,ès vagy egy butànak tünő kèrdèsem .A kèp mèretèt a szinek mennyire hatàrozàk meg ? Indokolom a kèrdèsemet : jelentkeztem volna egy festèszeti kiàllitàsra sajàt festmèny vàszon kèp igen èlenk színekkel szemnek vonzó egyedi kèp de a honlap azt a bizonyos 2 mb kèri àm az èn kèpem 5.5 igy online nem tudok feltölteni kèpet ,segitsèg?
Nem tudom a pontos választ. De azt észleltem sokszor, hogy a színekben szegény képek kisebbek és jobban méretezhetők minőségromlás nélkül.
https://anima-labor.hu/elerheto-weboldal-kepek-keresooptimalizalasa-2021-05-25/
https://anima-labor.hu/igy-meretezd-at-a-kepeidet-hogy-gyors-legyen-a-weboldalad-2021-04-20/
A cikk rendkívül precíz és érdekes, köszönjük, hogy használhattuk.