Skip to main content

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:

Play Video

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.

PhotoScape x 'save as'

PhotoScapeX lecke a YouTube-on:

Play Video
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