Média: képek és alt szöveg

Modul 4: Tartalom készítése · Olvasási idő: 9 perc

Tanulási cél: A lecke végére Ön megfelelően elő tudja készíteni, fel tudja tölteni és le tudja írni a képeket, hogy gyorsan betöltődjenek, élesek legyenek, és mindenki számára használhatók legyenek.

Kulcsfogalmak: Médiatár, képméretek, big image threshold (2560 pixel), JPEG, PNG, WebP, AVIF, tömörítés, srcset, lusta betöltés (lazy loading), alt szöveg, fájlnév, szerzői jog

Mi történik, amikor feltölt egy fotót

Tegyük fel, hogy feltölt egy fotót a telefonjáról: 4000 × 3000 pixel, 5 MB. A WordPress ilyenkor többet tesz, mint gondolná:

1. Ha a fotó szélesebb vagy magasabb 2560 pixelnél, a WordPress készít belőle egy kicsinyített változatot (a nevében -scaled szerepel), és ezt használja „eredetiként”. A valódi eredeti is megmarad. Ezt nevezik big image threshold-nek (nagy képek küszöbértéke), és a WordPress 5.3 óta létezik.
2. A WordPress emellett kisebb méretek sorozatát is elkészíti: Bélyegkép (alapértelmezés szerint 150 × 150 pixel, körülvágva), Közepes (300), Nagy (1024), valamint további 768, 1536 és 2048 pixel széles méreteket. A sablon és a bővítmények gyakran saját méreteket is hozzáadnak.
3. Minden változat a wp-content/uploads/2026/11/ mappába kerül (a feltöltés éve és hónapja szerint).

Így egyetlen fotóból könnyen nyolc vagy több fájl lesz. Ezért nő olyan gyorsan az uploads mappa (lecke 1.3), és ezért számít, hogy mit tölt fel.

Az oldalon a WordPress minden képhez egy srcset attribútumot ad: ez az összes elkészült méret listája. A böngésző maga választja ki a legkisebb méretet, amely még elég éles az adott képernyőhöz. Egy telefon így a 768 pixeles változatot tölti be, egy nagy képernyő az 1536 pixelest. Ez csak akkor működik jól, ha a méretek elkészültek, vagyis ha a képet a Médiatáron keresztül tölti fel, és nem FTP-vel.

Előzetes kicsinyítés és tömörítés

Az automatikus méretek ellenére is megéri a fotókat feltöltés előtt kicsinyíteni:

• Méret: ha egy fotó a weboldalon soha nem jelenik meg 1600 pixelnél szélesebben, nem kell 4000 pixel szélesnek lennie. Kicsinyítse előre nagyjából 2000 pixelre a hosszabbik oldalon. Ez tárhelyet, biztonsági mentési méretet és feltöltési időt takarít meg.
• Tömörítés: egy 75 és 85 közötti minőségű JPEG szemre szinte ugyanúgy néz ki, mint a 100-as minőségű, de gyakran feleakkora.
• Meta adat: a telefonnal készült fotók gyakran tartalmazzák a készítés helyének GPS-koordinátáit. Ha nem szeretné, hogy mindenki tudja, hol lakik, távolítsa el ezeket feltöltés előtt. A WordPress a kicsinyített méretekből sok meta adatot eltávolít, de az eredeti még tartalmazhatja őket.

Vannak bővítmények, amelyek feltöltéskor tömörítik a képeket, vagy modernebb formátumra alakítják őket. Ez kényelmes, de nézze meg, hogy ezt a saját szerverén végzik, vagy egy külső szolgáltatásnak küldik el a fotókat (lecke 9.3), és hogy valóban szüksége van-e bővítményre, ha ezt előre is elvégezheti.

Melyik formátum

Ha a szerver nem tud kezelni egy formátumot, a WordPress feltöltéskor hibát jelez, vagy nem készít kisebb méreteket. Az Eszközök > Webhely Egészség menüpontban, az Információ fülön, a Médiakezelés résznél láthatja, mely formátumokat támogatja a szerver.

Lusta betöltés (lazy loading)

A WordPress 5.5 óta a képek automatikusan megkapják a loading="lazy" attribútumot: a böngésző csak akkor tölt be egy képet, amikor a látogató odagörget. Ez a sok fotót tartalmazó, hosszú oldalakat jóval gyorsabbá teszi. Az oldal tetején lévő első nagy képet a WordPress szándékosan lusta betöltés nélkül hagyja, és gyakran elsőbbséget ad neki a fetchpriority="high" attribútummal, mert ennek a lehető leggyorsabban meg kell jelennie. Erre a 6.3-as leckében visszatérünk.

Mindig adjon meg szélességet és magasságot is a képeknek (a WordPress ezt a Médiatárból származó képeknél megteszi). Így a böngésző előre helyet tart fenn, és a szöveg nem ugrik el, amikor a fotó betöltődik.

Alt szöveg: azoknak, akik nem látják a képet

Az alt szöveg (alternatív szöveg) leírja, mi látható a képen. A képernyőolvasók felolvassák a vak és gyengénlátó látogatóknak, és akkor is megjelenik, ha a kép nem töltődik be. A keresőmotorok is ennek alapján értelmezik a képet.

A jó alt szöveg azt írja le, amit a kép az adott környezetben közöl:

• Rossz: IMG_4032.jpg vagy foto (fotó).
• Rossz: fietsenwinkel fiets e-bike kopen goedkoop fiets (kerékpárbolt kerékpár e-bike vásárlás olcsó kerékpár; a kulcsszavak halmozása senkinek sem segít).
• Jó: Monteur stelt de remmen af van een blauwe e-bike in de werkplaats (magyarul például: „Szerelő beállítja egy kék e-bike fékjeit a műhelyben”).

Ha egy kép pusztán díszítés (egy vonal, egy háttérminta), hagyja az alt szöveget üresen. Ekkor a képernyőolvasó átugorja. Az üres alt szöveg nem ugyanaz, mint a hiányzó: ha egy képnek nincs alt attribútuma, a képernyőolvasó gyakran a fájlnevet olvassa fel. Ha egy kép hivatkozás (például a kezdőlapra mutató logó), az alt szöveg azt írja le, hová vezet a hivatkozás: Naar de homepage van Fietsenwinkel De Spaak (magyarul például: „Ugrás a Küllő Kerékpárbolt kezdőlapjára”).

Az alt szöveget a Médiatárban magánál a képnél, a blokkszerkesztőben pedig a Kép blokknál adhatja meg. Figyelem: a Médiatárban megadott alt szöveg nem változik meg automatikusan azoknál a képeknél, amelyek már szerepelnek oldalakon.

Fájlnevek és szerzői jog

• Fájlnév: az e-bike-remmen-afstellen.jpg (e-bike fékek beállítása) többet mond, mint az IMG_4032.jpg, és bekerül a kép címébe is. Használjon kisbetűket és kötőjeleket, szóközöket ne.
• Szerzői jog: a Google Képek találatai nem használhatók szabadon. A fotósok és képügynökségek rendszeresen küldenek számlát a licenc nélküli felhasználásért. Használjon saját fotókat, egyértelmű licenccel rendelkező fotókat vagy olyan képügynökséget, amelynek ismeri a feltételeit, és őrizze meg a licence igazolását.

Tárhely és rendrakás

A Médiatár nem tart rendet magától. Ha eltávolít egy képet egy oldalról, az összes méretével együtt a könyvtárban és az uploads mappában marad. Egy évek óta működő weboldalnál ez felhalmozódik. Időnként takarítson, de óvatosan: egy kép olyan helyen is használatban lehet, amelyet a Médiatár nem lát (egy sablonbeállításban, egy widgetben vagy egy e-mailben). Előtte készítsen biztonsági mentést.

Összefoglalás

• A WordPress minden feltöltésből több méretet készít, és a nagy fotókat 2560 pixelre kicsinyíti; a böngésző a srcset segítségével választja ki a megfelelő méretet.
• A fotókat előre kicsinyítse és tömörítse, és távolítsa el belőlük a helyadatokat.
• Fotókhoz JPEG-et vagy WebP-t, logókhoz és képernyőképekhez PNG-t használjon; SVG-t csak megtisztító bővítménnyel.
• A lusta betöltés automatikus, kivéve az első nagy képet; a szélesség és a magasság megakadályozza az elugrást.
• Az alt szöveg azt írja le, amit a kép az adott környezetben közöl; a pusztán díszítő képek üres alt szöveget kapnak.

Kvíz

Feladat

Feladat A4.4: Képek a kezdőlapon. Adja meg weboldala címét. A program beolvassa a kezdőlapot, és megvizsgálja az első 20 képet: van-e alt attribútumuk (üres lehet, hiányozni nem), van-e szélességük és magasságuk, és mekkora az egyes fájlok mérete (egy HEAD kéréssel)? A 300 kB-nál nagyobb képeket a program jelzi. Javítsa ki a pirossal jelölt hibákat a Médiatárban vagy az oldalon, majd ellenőrizze újra.

További olvasnivaló

Ezek a cikkek a WebOké paneljeiben követendő lépéseket írják le; más panelekben hasonlóan működnek.

• DirectAdmin útmutató 18.5: Feltöltés túl nagy (413 hiba) vagy időtúllépés
• A feltöltés nem sikerül: növelje az upload_max_filesize és a max_execution_time értékét
• Médiatár (wordpress.org, angol nyelven): https://wordpress.org/documentation/article/media-library-screen/
• Alt szövegek írása (W3C, angol nyelven): https://www.w3.org/WAI/tutorials/images/decision-tree/