Képek szerkesztése feltöltés előtt
1. Méretezés
Nagy méretű képek:
Fekvő formátum: ∼ 2400–2560 px szélesség, kiadódó magasság
Álló formátum: ∼ 1200–1800 px szélesség, kiadódó magasság
(feltöltés után az ’Image Beállítások’ alatt a ’Link to Large image?’ opció bekapcsolható)
Közepes méretű képek:
Fekvő formátum: ∼1100–2200 px szélesség, kiadódó magasság
Álló formátum: ∼ 1000–1600 px szélesség, kiadódó magasság
(a ’Link to Large image?’ opció ennél a méretnél már nem javasolt)
Kiemelt képek a bejegyzésekhez és programokhoz:
Fekvő formátum: minimális méret 1100×620–730 px, de a nagyobb felbontású monitorok miatt inkább 2000×1125–1330 px
Megjegyzés:
Előfordul, hogy megfelelő forrás hiányában a fenti adatoknál kisebb méretű képfájlt kell használni egy-egy tartalomhoz.
Az AI alapú képszerkesztő programokkal a kis méretű képek 80–90%-a felnagyítható a képminőség megőrzése (akár javítása) mellett.
Az asztali fizetős programok közül jó választás a https://www.topazlabs.com/topaz-photo-ai szoftvere. (Több éve használom, így tapasztalatból írom. EF)
Az online programok közül jól használható a https://bigjpg.com szolgáltatás. (az ingyenesen hozzáférés max. 4x-es nagyítást engedélyez)
Az oldalról letölthető az asztali alkalmazás is. A program ingyenes verziójával szintén max. 4x-es nagyítású kép generálható.
Illusztrációként feltöltöttem két képet a varmuzeum.hu oldalról.
Eredeti kép: 500×329 px
Feljavított kép: 2000×1274 px (bigjpg.com + Photoshop szerkesztés a képszéleknél)
2. Képfájlformátumok
JPEG (.jpg, .jpeg)
Használat: fényképek, részletgazdag képek
Jellemzői: tömörített (veszteséges, de a tömörítés mértéke a képszerkesztő programokban állítható), jó minőség–méret arány
Előnye: kis fájlméret nagy felbontás mellett
Hátrány: tömörítési hibák, nem támogatja az átlátszóságot
PNG (.png)
Használat: logók, ikonok, átlátszó hátteres képek, illusztrációk
Jellemzők: veszteségmentes tömörítés, támogatja az átlátszóságot
Előny: jó minőség, éles kontúrok
Hátrány: lényegesen nagyobb fájlméret a JPEG-hez képest
GIF (.gif)
Használat: animációk, egyszerű grafikák
Jellemzők: támogatja az animációt, maximum 256 színben
Előny: mozgókép létrehozása
Hátrány: korlátozott színtartomány, nem ideális fényképekhez
WebP (.webp)
Használat: modern alternatíva a JPEG/PNG helyett
Jellemzők: tömörített (veszteséges vagy veszteségmentes), kisebb fájlméret
Előny: gyorsabb betöltés, átlátszóság és animáció is támogatott
Hátrány: régi böngészőkben nem mindig támogatott
SVG (.svg)
Használat: ikonok, logók, illusztrációk
Jellemzők: vektorgrafika, szövegként is kezelhető, méretezhető minőségromlás nélkül
Előny: kis fájlméret, tökéletes élesség bármilyen méretben
Hátrány: komplexebb képekhez nem alkalmas
Megjegyzés:
A BTM oldalain a képes tartalmak ∼95%-a ’jpg’ formátumú képekkel lefedhető.
A háttér nélküli ’png’ képekre nagyon kevés tartalomnál van szükség.
Az ’svg’ formátumot az intézményi logóknál használják a BTM weboldalak. (külső intézmények logóihoz is ez a formátum a legjobb választás)
Indokolatlan nagy méretű png képfájlt feltölteni részletgazdag tónusos képeknél. (lassítják az oldal betöltését, fogyasztják a tárhelyet)
Illusztrációként feltöltöttem két képet a varmuzeum.hu médiatárából.
Eredeti kép: png fájl, 2 MB méret
Szerkesztett kép: 524 KB (Photoshop / File / Export / Save for Web / … mentés után)
3. Fájlnevek
Helyes fájlnév:
Szerepeljen a fájlnévben a tartalomra hivatkozó kulcsszó! Ha lehetséges, max. 5-8 szóból álljon.
A Google a fájlnevet is figyelembe veszi a kereséskor. Ha a fájlnév nem tartalmaz kulcsszót, alacsonyabb a kép SEO értéke. (Search Engine Optimization; keresőoptimalizálás. Növeli a weboldal forgalmát. Jobban eléri a célközönséget.)
A helyes fájlnév előnyt jelent a wordpress médiatárában történő kereséskor is, mivel a ’Médiafájlok keresése’ mezőben egyszerűbb a kulcsszavakat beírni, mint a felidézhetetlen ’krix-krax’ fájlneveket.
A fájlnév csak ékezet nélküli latin kisbetűket tartalmazzon!
A szavak elválasztásához kizárólag kötőjelet használj! Más karakterek használata a SEO és a keresőmotorok miatt hátrányos.
Pl. a Google a ’sárga-edeny.jpg’ fájlnevet ’sárga edény’-nek értelmezi, a ’sárga_edeny.jpg’ fájlnevet pedig ’sárga_edény’-nek.
A hibás fájlnév gyakran elkövetett hiba a BTM oldalain!
Ne nyugtasson meg, hogy más oldal is hibásan használja, vagy rossz fájlnévvel kaptad a képet a fotóstól, grafikustól! Légyszí írd át a hibás fájlneveket feltöltés előtt!
Ne hivatkozz pl. a Facebookról letöltött fájlnevekre, mert azok technikai célokat szolgáló gépileg generált azonosítók!
A képfájlokra vonatkozó helyes elnevezés érvényes a ’pdf’, ’docx’ és egyéb kiterjesztésű fájlokra is!
Pl.:
Letszam-es-szemelyi-juttatasok-2025.-I.-negyedev.pdf helyett letszam-es-szemelyi-juttatasok-2025-1-negyedev.pdf
8._sz._foigazgatoi_utasitas.pdf helyett 8-sz-foigazgatoi-utasitas.pdf
Budapest-Regisegei_honlapra-2025.-aug.docx helyett budapest-regisegei-2025-augusztus.docx
Adatvedelmi_es_adatbiztonsagi_szabalyzat_BTM_529_1_2025_compressed.pdf helyett adatvedelmi-es-adatbiztonsagi-szabalyzat-btm-529-1-2025.pdf
Felhasznaloi-szerzodes_2025.docx helyett felhasznaloi-szerzodes-2025.docx
Megjegyzés:
A képek feltöltése után a wordpress admin médiatár ’Csatolmány részletei’ mezők (Helyettesítő szöveg, Cím, Felirat, Leírás) helyes kitöltése nem korrigálják a hibás fájlneveket.
(Ezekről bővebben a következő segédletben. EF)
A helyes fájlnév az akadálymentesség miatt is nagyon fontos, mivel a ’Screen reader’ szoftverek (képernyőolvasók) az ’alt’ (helyettesítő szöveg) hiányában megpróbálják felolvasni a fájlnevet.
Az akadálymentes (hozzáférhető) web azt jelenti, hogy fogyatékossággal élő felhasználók is teljes értékűen használhatják az oldalt, például:
- vak vagy gyengénlátó felhasználók képernyőolvasóval
- motorikus nehézségekkel élők billentyűzettel navigálva
- színtévesztők vagy kognitív problémákkal élők
Illusztrációk korábban feltöltött képekből:
Kulcsszó nélküli, semmitmondó fájlnév: 500w_55805-092769.jpg
Kulcsszavas fájlnév: budapest-varosliget-milleniumi-emlek.jpg
Kulcsszó nélküli, értelmetlen, ronda fájlnév: 7744a4ee-0a4b-449d-8585-72e6970b5550-1.png
Kulcsszavas fájlnév: btm-ai-palyazat-gyarmati-laszlo-kepe.jpg
4. Képszerkesztő programok
Photoshop:
A legsokoldalúbb képszerkesztő program, amennyiben van hozzá elérésetek. (saját vagy intézményi előfizetéssel)
Sok PS lecke elérhető a YouTube-on, pl. a webes mentésről:
PhotoScape X:
Jól használható Photoshop alternatíva, az ingyenes verzió eszköztára is elegendő a webes képek előkészítéséhez.
Letölthető a http://x.photoscape.org oldalról.
PhotoScapeX lecke a YouTube-on:
További Photoshop alternatívák pl. itt:
https://zapier.com/blog/photoshop-alternatives-best-free-photo-editors/
5. Szöveges képek
Csak nagyon indokolt helyzetben használj szöveges információt képként vagy képen!
Hátrányai:
1.
Keresőoptimalizálás (SEO) szempontból hátrányos.
A keresőmotorok (pl. Google) nem tudják könnyen értelmezni a képen szereplő szöveget.
Ha a szöveg nem szerepel a HTML-kódban, nem jelenik meg a keresési találatok között.
Csökkenti az oldal organikus elérését.
2.
Akadálymentességi problémák (pl. vakok, gyengénlátók számára)
A képernyőolvasók nem tudják felolvasni a képen szereplő szöveget.
Ha nincs megfelelő alternatív szöveg (alt text, helyettesítő szöveg), akkor az információ elérhetetlenné válik.
3.
Reszponzivitás és mobilhasználat
A szöveg mérete nem alkalmazkodik a képernyőmérethez.
Mobilon gyakran túl kicsi a szöveg, így nehezen olvasható.
4.
Lassabb betöltés, nagyobb adatforgalom
A képek (főleg ha nincsenek optimalizálva) nagyobb méretűek lehetnek, mint egy sima szöveg.
Lassítják az oldal betöltését, rontják a felhasználói élményt.
5.
Nehezebb módosítani vagy frissíteni
Ha változik az információ (pl. dátum, cím), a képet újra kell szerkeszteni és feltölteni.
6.
Nehezebb gépi feldolgozás (pl. mesterséges intelligencia, fordítók)
Az automatikus fordítók, szövegfelolvasók, AI-asszisztensek nem tudják értelmezni a képre írt szöveget.
Nehezíti a későbbi adatkinyerést vagy újrafelhasználást.
Megjegyzés:
A budapestgaleria.hu oldalon 2020-tól az Eddig minden rendben című kiállítás óta szöveges grafikai nyitóképek kerülnek fel a kiállítások leírása fölé. Rossz megoldás, de ha ragaszkodnak hozzá a Budapest Galéria munkatársai, különösen fontos a helyes fájlnevek használata, majd feltöltés után a képre vonatkozó ’Csatolmány részletei’ mezők (Helyettesítő szöveg, Cím) kitöltése.
Illusztráció a budapestgaleria.hu oldalról:
Fájlnév: weboldal_cover_hun-1.jpg helyett 2025-kiallitasok-miutan-idegenek-lettunk.jpg
Helyettesítő szöveg: Miután idegenek lettünk – Válogatás az EKO 9 Triennále anyagából, 2025. április 30. – július 6., ANA ČAVIĆ, INES DOUJAK, MILA PANIĆ, ANA PEČAR, TRAPP DOMINIKA, ULBERT ÁDÁM
Cím: Miután idegenek lettünk – Válogatás az EKO 9 Triennále anyagából, 2025. április 30. – július 6.
Felirat is kitölthető (copy/paste): Miután idegenek lettünk – Válogatás az EKO 9 Triennále anyagából, 2025. április 30. – július 6., ANA ČAVIĆ, INES DOUJAK, MILA PANIĆ, ANA PEČAR, TRAPP DOMINIKA, ULBERT ÁDÁM
Leírás is kitölthető (copy/paste): Miután idegenek lettünk – Válogatás az EKO 9 Triennále anyagából, 2025. április 30. – július 6., ANA ČAVIĆ, INES DOUJAK, MILA PANIĆ, ANA PEČAR, TRAPP DOMINIKA, ULBERT ÁDÁM