Médiá: obrázky a alt text

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

Cieľ lekcie: Po tejto lekcii budete vedieť správne pripraviť, nahrať a popísať obrázky, aby sa rýchlo načítavali, vyzerali ostro a boli použiteľné pre každého.

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

Čo sa stane, keď nahráte fotku

Nahráte fotku z telefónu: 4 000 x 3 000 pixelov, 5 MB. WordPress pritom urobí viac, než si myslíte:

1. Ak je fotka širšia alebo vyššia ako 2 560 pixelov, WordPress vytvorí zmenšenú verziu (s príponou -scaled v názve) a použije ju ako „originál“. Skutočný originál sa tiež zachová. Volá sa to big image threshold a existuje od WordPressu 5.3.
2. WordPress popri tom vytvorí aj rad menších formátov: miniatúra (predvolene 150 x 150 pixelov, orezaná), stredná (300), veľká (1024) a ďalšie formáty so šírkou 768, 1536 a 2048 pixelov. Vaša téma a pluginy k tomu často pridajú vlastné formáty.
3. Všetky verzie sa uložia do wp-content/uploads/2026/11/ (rok a mesiac nahratia).

Z jednej fotky tak rýchlo vznikne osem alebo 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 pridá k obrázku srcset: zoznam všetkých týchto formátov. Prehliadač si sám vyberie najmenší formát, ktorý je dostatočne ostrý pre daný displej. Telefón tak načíta formát so šírkou 768 pixelov, veľký displej ten so šírkou 1536. Funguje to správne len vtedy, ak tieto formáty 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 formátmi sa oplatí fotky vopred zmenšiť:

• Rozmer: fotka, ktorá sa na vašej stránke nikdy nezobrazí širšia ako 1 600 pixelov, nemusí mať šírku 4 000 pixelov. Zmenšite ju vopred na približne 2 000 pixelov na dlhšej strane. Ušetríte tým úložný priestor, veľkosť zálohy aj čas nahrávania.
• Kompresia: JPEG s kvalitou 75 až 85 vyzerá pre oko takmer rovnako ako kvalita 100, no je často o polovicu menší.
• Metadáta: fotky z telefónu často obsahujú GPS súradnice miesta, kde boli vyhotovené. Ak nechcete, aby všetci vedeli, kde bývate, odstráňte ich pred nahratím. WordPress pri zmenšených formátoch odstráni veľa metadát, no originál ich môže stále obsahovať.

Existujú pluginy, ktoré obrázky pri nahrávaní komprimujú alebo prevedú na modernejší formát. Je to užitočné, ale skontrolujte, či to robia na vašom vlastnom serveri, alebo posielajú fotky do externej služby (lekcia 9.3), a či naozaj potrebujete plugin, keď to môžete urobiť aj vopred.

Aký formát

Ak váš server formát nevie spracovať, WordPress pri nahrávaní zobrazí chybu alebo nevytvorí menšie formáty. V časti Nástroje > Zdravie webovej stránky (karta Info, pod Spracovanie médií) uvidíte, ktoré formáty váš server podporuje.

Lazy loading

Od WordPressu 5.5 obrázky automaticky dostávajú loading="lazy": prehliadač načíta obrázok až keď k nemu prescrollujete. Vďaka tomu je dlhá stránka s množstvom fotiek oveľa rýchlejšia. WordPress zámerne necháva prvý veľký obrázok na vrchu stránky bez lazy loadingu a často mu dáva prednosť pomocou fetchpriority="high", pretože ten sa má zobraziť čo najskôr. K tomu sa vrátime v lekcii 6.3.

Vždy tiež nastavte šírku a výšku obrázka (WordPress to robí automaticky pri obrázkoch z knižnice multimédií). Prehliadač potom vopred vyhradí priestor a text sa pri načítaní fotky neposúva.

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

Alt text (alternatívny text) popisuje, čo je na obrázku. Čítačky obrazovky ho prečí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ú na pochopenie obsahu obrázka.

Dobrý alt text popisuje, čo obrázok vyjadruje v danom kontexte:

• Zlé: IMG_4032.jpg alebo foto.
• Zlé: obchod s bicyklami bicykel e-bike kúpiť lacný bicykel (hromadenie kľúčových slov nikomu nepomôže).
• Dobré: Mechanik nastavuje brzdy na modrom e-biku v dielni.

Ak je obrázok čisto dekoratívny (čiarka, vzor na pozadí), nechajte alt text prázdny. Čítačka obrazovky ho potom preskočí. Prázdny je niečo iné ako chýbajúci: pri obrázku bez atribútu alt čítačka obrazovky často prečíta názov súboru. Obrázok, ktorý je odkazom (napríklad logo vedúce na domovskú stránku), popisuje, kam odkaz vedie: Na domovskú stránku Fietsenwinkel De Spaak.

V knižnici multimédií nastavíte alt text priamo pri obrázku, v blokovom editore pri bloku obrázka. Pozor: alt text, ktorý vyplníte v knižnici multimédií, sa automaticky nezmení pri obrázkoch, ktoré sú už na stránkach.

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

• Názov súboru: e-bike-remmen-afstellen.jpg vypovedá 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 vyhľadávania obrázkov nie je voľne použiteľný. Fotografi a fotobanky pravidelne posielajú faktúry za používanie bez licencie. Používajte vlastné fotky, fotky s jasnou licenciou alebo fotobanku, ktorej podmienky poznáte, a uchovávajte doklad o licencii.

Úložisko a upratovanie

Knižnica multimédií sa sama neupratuje. Obrázok, ktorý odstránite zo stránky, zostáva v knižnici aj v priečinku uploads, so všetkými svojimi formátmi. Pri stránke s obsahom nahromadeným počas rokov sa toho nazbiera veľa. Občas poupratujte, 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). Najprv si urobte zálohu.

Zhrnutie

• WordPress vytvorí z každého nahratého súboru viacero formátov a veľké fotky zmenší na 2 560 pixelov; prehliadač si cez srcset vyberie vhodný formát.
• Fotky vopred zmenšite a skomprimujte a odstráňte z nich údaje o polohe.
• Pre fotky používajte JPEG alebo WebP, pre logá a snímky obrazovky PNG; SVG len s pluginom, ktorý ho vyčistí.
• Lazy loading funguje automaticky, okrem prvého veľkého obrázka; šírka a výška zabraňujú posúvaniu obsahu.
• Alt text popisuje, čo obrázok v danom kontexte vyjadruje; čisto dekoratívny obrázok dostane prázdny alt text.

Kvíz

Úloha

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

Čítajte ďalej

Tieto články popisujú postup 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, anglicky): https://wordpress.org/documentation/article/media-library-screen/
• Písanie alt textov (W3C, anglicky): https://www.w3.org/WAI/tutorials/images/decision-tree/