Multimédiá: obrázky a alternatívny text

Modul 4: Tvorba obsahu · Čas čítania: 9 minút

Cieľ lekcie: Po tejto lekcii budete vedieť obrázky správne pripraviť, nahrať a opísať tak, aby sa rýchlo načítali, vyzerali ostro a boli použiteľné pre všetkých.

Kľúčové pojmy: Knižnica multimédií, veľkosti obrázkov, big image threshold (2560 pixelov), JPEG, PNG, WebP, AVIF, kompresia, srcset, lazy loading, alternatívny text (alt), názov súboru, autorské právo

Čo sa stane, keď nahráte fotografiu

Nahráte fotografiu z telefónu: 4.000 x 3.000 pixelov, 5 MB. WordPress vtedy urobí viac, než by ste čakali:

1. Ak je fotografia širšia alebo vyššia ako 2.560 pixelov, WordPress vytvorí zmenšenú verziu (s -scaled v názve) a použije ju ako "originál". Skutočný originál sa tiež uchová. Tento mechanizmus sa nazýva big image threshold a existuje od WordPress 5.3.
2. WordPress okrem toho vytvorí sériu menších veľkostí: náhľad (štandardne 150 x 150 pixelov, orezaný), strednú (300), veľkú (1024) a ďalšie veľkosti so šírkou 768, 1536 a 2048 pixelov. Vaša téma a pluginy k nim často pridávajú vlastné veľkosti.
3. Všetky verzie sa uložia do wp-content/uploads/2026/11/ (rok a mesiac nahratia).

Z jednej fotografie tak ľahko vznikne osem aj viac súborov. Preto priečinok uploads tak rýchlo rastie (lekcia 1.3) a preto záleží na tom, čo nahrávate.

Na stránke WordPress k obrázku pridá srcset: zoznam všetkých týchto veľkostí. Prehliadač si sám vyberie najmenšiu veľkosť, ktorá je pre danú obrazovku dostatočne ostrá. Telefón tak načíta veľkosť 768 pixelov, veľká obrazovka veľkosť 1536. Funguje to správne len vtedy, ak tieto veľkosti existujú, teda ak nahrávate cez Knižnicu multimédií, a nie cez FTP.

Zmenšenie a kompresia vopred

Aj s týmito automatickými veľkosťami sa oplatí fotografie vopred zmenšiť:

• Rozmer: fotografia, ktorá sa na vašej webovej stránke nikdy nezobrazí širšia ako 1.600 pixelov, nemusí mať šírku 4.000 pixelov. Zmenšite ju vopred približne na 2.000 pixelov na dlhšej strane. Ušetríte tým úložisko, veľkosť záloh aj čas nahrávania.
• Kompresia: JPEG s kvalitou 75 až 85 vyzerá pre oko takmer rovnako ako s kvalitou 100, no často je o polovicu menší.
• Metadáta: fotografie z telefónu často obsahujú GPS polohu, kde boli nasnímané. Ak nechcete, aby každý vedel, kde bývate, odstráňte ju pred nahratím. WordPress zo zmenšených veľkostí veľa metadát odstráni, no originál ich môže stále obsahovať.

Existujú pluginy, ktoré obrázky pri nahrávaní komprimujú alebo prevedú do modernejšieho formátu. Je to praktické, ale overte si, či to robia na vašom vlastnom serveri, alebo fotografie posielajú externej službe (lekcia 9.3), a či plugin naozaj potrebujete, keď to môžete urobiť aj vopred.

Aký formát

Ak váš server niektorý formát nevie spracovať, WordPress pri nahrávaní zobrazí chybu alebo nevytvorí menšie veľkosti. V Nástroje > Zdravie webovej stránky uvidíte na karte Informácie, v časti Spracovanie médií, ktoré formáty váš server podporuje.

Lazy loading

Od WordPress 5.5 dostávajú obrázky automaticky loading="lazy": prehliadač načíta obrázok až vtedy, keď k nemu posuniete stránku. Dlhá stránka s množstvom fotografií je tak oveľa rýchlejšia. Prvý veľký obrázok v hornej časti stránky WordPress zámerne necháva bez lazy loadingu a často mu dáva prednosť pomocou fetchpriority="high", pretože musí byť viditeľný čo najskôr. K tomu sa vrátime v lekcii 6.3.

Obrázku vždy nastavte aj šírku a výšku (WordPress to robí pri obrázkoch z Knižnice multimédií). Prehliadač si tak vopred vyhradí miesto a text neposkočí, keď sa fotografia načíta.

Alternatívny text: pre tých, ktorí obrázok nevidia

Alternatívny text (alt) opisuje, čo je na obrázku. Čítačky obrazovky ho predčítajú nevidiacim a slabozrakým návštevníkom a zobrazí sa aj vtedy, keď sa obrázok nenačíta. Vyhľadávače ho používajú, aby obrázku porozumeli.

Dobrý alternatívny text opisuje, čo obrázok hovorí v tomto kontexte:

• Zle: IMG_4032.jpg alebo foto.
• Zle: fietsenwinkel fiets e-bike kopen goedkoop fiets (hromadenie kľúčových slov, napríklad „predajňa bicyklov bicykel e-bike kúpiť lacno bicykel“, nikomu nepomôže).
• Dobre: Monteur stelt de remmen af van een blauwe e-bike in de werkplaats (po slovensky napríklad „Mechanik nastavuje brzdy modrého elektrobicykla v dielni“).

Ak je obrázok čisto dekoratívny (čiara, vzor na pozadí), nechajte alternatívny text prázdny. Čítačka obrazovky ho potom preskočí. Prázdny text nie je to isté ako chýbajúci: pri obrázku bez alt čítačka obrazovky často predčíta názov súboru. Obrázok, ktorý je odkazom (napríklad logo vedúce na domovskú stránku), opisuje, kam odkaz vedie: Naar de homepage van Fietsenwinkel De Spaak (po slovensky napríklad „Na domovskú stránku predajne bicyklov De Spaak“).

V Knižnici multimédií zadáte alternatívny text priamo pri obrázku, v blokovom editore pri bloku obrázka. Upozornenie: alternatívny text, ktorý vyplníte v Knižnici multimédií, sa automaticky nezmení pri obrázkoch, ktoré už sú vložené na stránkach.

Názvy súborov a autorské právo

• Názov súboru: e-bike-remmen-afstellen.jpg povie viac ako IMG_4032.jpg a objaví sa v adrese obrázka. Malé písmená, pomlčky, žiadne medzery.
• Autorské právo: obrázok z Google Obrázkov nie je voľne použiteľný. Fotografi a fotobanky pravidelne posielajú faktúry za použitie bez licencie. Používajte vlastné fotografie, fotografie s jasnou licenciou alebo fotobanku, ktorej podmienky poznáte, a uschovajte si doklad o licencii.

Úložisko a upratovanie

Knižnica multimédií sa sama neupratuje. Obrázok, ktorý odstránite zo stránky, zostane v knižnici aj v priečinku uploads, so všetkými svojimi veľkosťami. Pri webovej stránke s obsahom za niekoľko rokov sa to nazbiera. Občas upracte, ale opatrne: obrázok môže byť použitý na mieste, ktoré knižnica nevidí (v nastavení témy, vo widgete alebo v e-maile). Najskôr si urobte zálohu.

Zhrnutie

• WordPress z každého nahratého obrázka vytvorí viacero veľkostí a veľké fotografie zmenší na 2.560 pixelov; prehliadač cez srcset vyberie vhodnú veľkosť.
• Fotografie vopred zmenšite a skomprimujte a odstráňte z nich údaje o polohe.
• Na fotografie používajte JPEG alebo WebP, na logá a snímky obrazovky PNG; SVG len s pluginom, ktorý súbor vyčistí.
• Lazy loading funguje automaticky, okrem prvého veľkého obrázka; šírka a výška zabránia poskakovaniu obsahu.
• Alternatívny text opisuje, čo obrázok hovorí v danom kontexte; čisto dekoratívny obrázok dostane prázdny alternatívny text.

Kvíz

Úloha

Úloha A4.4: Obrázky na vašej domovskej stránke. Zadajte adresu svojej webovej stránky. Program načíta domovskú stránku a skontroluje prvých 20 obrázkov: majú atribút alt (prázdny môže byť, chýbať nie), majú šírku a výšku a aký veľký je každý súbor (cez požiadavku HEAD)? Obrázky nad 300 kB budú nahlásené. Opravte, čo je označené červenou, v Knižnici multimédií alebo na stránke a skontrolujte znova.

Ďalšie čítanie

Tieto články opisujú kroky v paneloch WebOké; v iných paneloch to funguje podobne.

• Návod na DirectAdmin 18.5: Príliš veľký súbor pri nahrávaní (chyba 413) alebo vypršanie časového limitu
• Nahrávanie sa nedarí: zvýšte hodnoty upload_max_filesize a max_execution_time
• Knižnica multimédií (wordpress.org, angličtina): https://wordpress.org/documentation/article/media-library-screen/
• Písanie alternatívnych textov (W3C, angličtina): https://www.w3.org/WAI/tutorials/images/decision-tree/