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

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

Tanulási cél: E lecke után képes lesz megfelelően előkészíteni, feltölteni és leírni a képeket, hogy gyorsan töltődjenek, élesen jelenjenek meg, és mindenki számára használhatók legyenek.

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

Mi történik, amikor fényképet tölt fel

Feltölt egy fényképet a telefonjáról: 4000 x 3000 pixel, 5 MB. A WordPress ennél jóval többet csinál:

1. Ha a fénykép szélesebb vagy magasabb, mint 2560 pixel, a WordPress készít egy kicsinyített verziót (a nevében -scaled szerepel), és azt használja „eredetiként”. A valódi eredeti is megmarad. Ezt nevezik big image thresholdnak, és a WordPress 5.3 óta létezik.
2. A WordPress emellett készít egy sor kisebb méretet: bélyegkép (alapértelmezetten 150 x 150 pixel, körbevágva), közepes (300), nagy (1024), valamint további méretek 768, 1536 és 2048 pixel szélességben. Az Ön sablonja és bővítményei gyakran saját méreteket is hozzáadnak ehhez.
3. Minden verzió a wp-content/uploads/2026/11/ mappába kerül (a feltöltés éve és hónapja szerint).

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

Az oldalon a WordPress minden képhez hozzáad egy srcset-et: a fenti méretek listáját. A böngésző maga választja ki a legkisebb méretet, amely elég éles az adott képernyőhöz. Egy telefon így a 768 pixeles méretet tölti be, egy nagy képernyő pedig az 1536 pixeleset. Ez csak akkor működik jól, ha a méretek léteznek, vagyis ha a médiatáron keresztül tölt fel, nem FTP-vel.

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

Még az automatikus méretek mellett is érdemes a fényképeket előre kicsinyíteni:

• Méret: egy olyan fénykép, amely a weboldalán sosem jelenik meg 1600 pixelnél szélesebben, nem kell, hogy 4000 pixel széles legyen. Kicsinyítse előre körülbelül 2000 pixelre a hosszabb oldalon. Ez csökkenti a tárhelyhasználatot, a biztonsági mentés méretét és a feltöltési időt.
• Tömörítés: egy 75 és 85 közötti minőségű JPEG szabad szemmel szinte ugyanúgy néz ki, mint a 100-as minőségű, de gyakran a fele akkora.
• Metaadat: a telefonnal készített fényképek gyakran tartalmazzák azt a GPS-helyadatot, ahol készültek. Ha nem szeretné, hogy mindenki tudja, hol lakik, távolítsa el ezt feltöltés előtt. A WordPress a kicsinyített méreteknél sok metaadatot eltávolít, de az eredeti még tartalmazhatja.

Léteznek bővítmények, amelyek feltöltéskor tömörítik a képeket, vagy modernebb formátumra alakítják át őket. Hasznos, de érdemes megnézni, hogy a saját szerverén végzik-e ezt, vagy a fényképeket egy külső szolgáltatásnak küldik (9.3. lecke), és hogy valóban szükség van-e bővítményre, ha ezt előre is elvégezheti.

Melyik formátumot válassza

Ha a szervere nem tud feldolgozni egy formátumot, a WordPress hibát jelez feltöltéskor, vagy nem készít kisebb méreteket. Az Eszközök > Sitediagnose (Info fül, Media-afhandeling rész alatt) megmutatja, mely formátumokat támogatja a szervere.

Lusta betöltés

A WordPress 5.5 óta a képek automatikusan megkapják a loading="lazy" jelölést: a böngésző csak akkor tölti be a képet, amikor Ön odagörget. Ez sokkal gyorsabbá teszi a sok fényképet tartalmazó, hosszú oldalakat. A WordPress az oldal tetején lévő első nagy képet tudatosan kihagyja a lusta betöltésből, és gyakran elsőbbséget ad neki a fetchpriority="high" jelöléssel, mivel annak a lehető leggyorsabban láthatóvá kell válnia. Erre a 6.3. leckében visszatérünk.

Mindig állítsa be a kép szélességét és magasságát is (a médiatárból származó képeknél ezt a WordPress megteszi). Így a böngésző előre fenntartja a helyet, és a szöveg nem ugrik el, amikor a kép 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 vak és gyengénlátó látogatóknak, és akkor jelenik meg, ha a kép nem töltődik be. A keresőmotorok ezt használják a kép megértéséhez.

A jó alt szöveg azt írja le, mit mond a kép ebben a kontextusban:

• Rossz: IMG_4032.jpg vagy foto.
• Rossz: fietsenwinkel fiets e-bike kopen goedkoop fiets (a kulcsszavak halmozása senkinek sem segít).
• Jó: Szerelő állítja be egy kék elektromos kerékpár 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. Így a képernyőolvasó átugorja. Az üres más, mint a hiányzó: egy alt nélküli kép esetén a képernyőolvasó gyakran a fájlnevet olvassa fel. Az olyan kép, amely egyben link (például egy logó, amely a kezdőlapra mutat), azt írja le, hova vezet a link: A Fietsenwinkel De Spaak kezdőlapjára.

A médiatárban magánál a képnél adja meg az alt szöveget, a blokkszerkesztőben pedig a képblokknál. Figyelem: egy, a médiatárban megadott alt szöveg nem változik meg automatikusan azoknál a képeknél, amelyek már oldalakon szerepelnek.

Fájlnevek és szerzői jog

• Fájlnév: az e-bike-remmen-afstellen.jpg többet mond, mint az IMG_4032.jpg, és megjelenik a kép címében. Kisbetűk, kötőjelek, nincsenek szóközök.
• Szerzői jog: egy Google Képek találatként szerzett kép nem használható szabadon. A fotósok és a képügynökségek rendszeresen küldenek számlát licenc nélküli felhasználásért. Használjon saját fényképeket, egyértelmű licenccel rendelkező fényképeket, vagy olyan képügynökséget, amelynek feltételeit ismeri, és őrizze meg a licenc igazolását.

Tárhely és rendrakás

A médiatár nem rendezi magát automatikusan. Egy kép, amelyet eltávolít egy oldalról, továbbra is megmarad a médiatárban és az uploads mappában, az összes méretével együtt. Egy évek óta tartalommal rendelkező weboldalnál ez összeadódik. Időnként rakjon rendet, de óvatosan: előfordulhat, hogy egy kép olyan helyen van használatban, amelyet a médiatár nem lát (egy sablonbeállításban, egy widgetben vagy egy e-mailben). Először mindig 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 fényképeket 2560 pixelre kicsinyíti; a böngésző a srcset segítségével választja ki a megfelelő méretet.
• Kicsinyítse és tömörítse a fényképeket előre, és távolítsa el a helyadatokat.
• Fényképekhez használjon JPEG-et vagy WebP-t, logókhoz és képernyőképekhez PNG-t; SVG-t csak olyan bővítménnyel, amely megtisztítja azt.
• A lusta betöltés automatikusan működik, kivéve az első nagy képnél; a szélesség és a magasság megakadályozza az elugrást.
• Az alt szöveg azt írja le, mit mond a kép a kontextusban; a pusztán díszítő képek üres alt szöveget kapnak.

Kvíz

Feladat

A4.4 feladat: 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: rendelkeznek-e alt attribútummal (üres lehet, de hiányozni nem szabad), van-e szélességük és magasságuk, és mekkora az egyes fájlok mérete (HEAD kérés alapján)? A 300 kB feletti képeket a rendszer jelzi. Javítsa a pirossal jelölt elemeket a médiatárában vagy az oldalon, majd ellenőrizze újra.

További olvasnivaló

Ezek a cikkek a WebOké panelekben szereplő lépéseket írják le; más panelekben a működés hasonló.

• 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/