Média: obrázky a alternativní text

Modul 4: Tvorba obsahu · Doba čtení: 9 minut

Cíl lekce: Po této lekci budete umět obrázky správně připravit, nahrát a popsat, aby se rychle načítaly, vypadaly ostře a byly použitelné pro všechny.

Klíčové pojmy: knihovna médií, velikosti obrázků, big image threshold (2 560 pixelů), JPEG, PNG, WebP, AVIF, komprese, srcset, lazy loading, alternativní text, název souboru, autorské právo

Co se stane, když nahrajete fotografii

Nahrajete fotografii z telefonu: 4 000 × 3 000 pixelů, 5 MB. WordPress pak udělá víc, než byste čekali:

1. Je-li fotografie širší nebo vyšší než 2 560 pixelů, WordPress vytvoří zmenšenou verzi (s -scaled v názvu) a použije ji jako „originál“. Skutečný originál se také uchová. Tomu se říká big image threshold a existuje od WordPressu 5.3.
2. WordPress navíc vytvoří řadu menších velikostí: miniaturu (standardně 150 × 150 pixelů, oříznutou), střední (300), velkou (1024) a další velikosti o šířce 768, 1536 a 2048 pixelů. Vaše šablona a pluginy často přidávají ještě vlastní velikosti.
3. Všechny verze se uloží do wp-content/uploads/2026/11/ (rok a měsíc nahrání).

Z jedné fotografie tak snadno vznikne osm a více souborů. Proto složka uploads tak rychle roste (lekce 1.3) a proto záleží na tom, co nahráváte.

Na stránce WordPress k obrázku přidá srcset: seznam všech těchto velikostí. Prohlížeč si sám vybere nejmenší velikost, která je pro daný displej dostatečně ostrá. Telefon pak načte velikost 768 pixelů, velká obrazovka velikost 1536. Funguje to ale jen tehdy, když velikosti existují, tedy když nahráváte přes knihovnu médií, a ne přes FTP.

Předem zmenšit a zkomprimovat

I s těmito automatickými velikostmi se vyplatí fotografie předem zmenšit:

• Rozměry: fotografie, která se na Vašem webu nikdy nezobrazí širší než 1 600 pixelů, nemusí mít šířku 4 000 pixelů. Zmenšete ji předem zhruba na 2 000 pixelů po delší straně. Ušetříte tím úložiště, velikost záloh i čas nahrávání.
• Komprese: JPEG v kvalitě 75 až 85 vypadá pro oko téměř stejně jako v kvalitě 100, ale bývá často o polovinu menší.
• Metadata: fotografie z telefonu často obsahují GPS polohu místa, kde byly pořízeny. Pokud nechcete, aby všichni věděli, kde bydlíte, odstraňte ji před nahráním. WordPress u zmenšených velikostí většinu metadat odstraní, ale originál je může stále obsahovat.

Existují pluginy, které obrázky při nahrávání komprimují nebo převádějí do modernějšího formátu. Je to praktické, ale zjistěte, zda to dělají na Vašem vlastním serveru, nebo fotografie posílají externí službě (lekce 9.3), a zda plugin opravdu potřebujete, když to můžete udělat i předem.

Jaký formát

Pokud Váš server nějaký formát neumí zpracovat, WordPress při nahrávání ohlásí chybu nebo nevytvoří menší velikosti. V Nástroje > Stav webu na kartě Informace v části Zpracování médií uvidíte, které formáty Váš server podporuje.

Lazy loading

Od WordPressu 5.5 dostávají obrázky automaticky loading="lazy": prohlížeč obrázek načte až ve chvíli, kdy k němu posunete stránku. Dlouhá stránka s mnoha fotografiemi je tak mnohem rychlejší. První velký obrázek v horní části stránky nechává WordPress záměrně bez lazy loadingu a často mu dává přednost pomocí fetchpriority="high", protože má být vidět co nejdříve. K tomu se vrátíme v lekci 6.3.

U obrázku také vždy uvádějte šířku a výšku (WordPress to u obrázků z knihovny médií dělá sám). Prohlížeč si pak předem vyhradí místo a text neposkočí, když se fotografie načte.

Alternativní text: pro ty, kdo obrázek nevidí

Alternativní text (alt text) popisuje, co je na obrázku. Čtečky obrazovky ho předčítají nevidomým a slabozrakým návštěvníkům a zobrazí se také tehdy, když se obrázek nenačte. Vyhledávače ho používají k pochopení obrázku.

Dobrý alternativní text popisuje, co obrázek sděluje v tomto kontextu:

• Špatně: IMG_4032.jpg nebo fotka.
• Špatně: cykloprodejna kolo elektrokolo koupit levně kolo (hromadění klíčových slov nikomu nepomůže).
• Dobře: Mechanik seřizuje brzdy modrého elektrokola v dílně.

Je-li obrázek čistě dekorativní (linka, vzor na pozadí), nechte alternativní text prázdný. Čtečka obrazovky ho pak přeskočí. Prázdný text není totéž co chybějící: u obrázku bez alt čtečka obrazovky často přečte název souboru. Obrázek, který je odkazem (například logo vedoucí na domovskou stránku), popisuje, kam odkaz vede: Na domovskou stránku cykloprodejny Paprsek.

V knihovně médií vyplníte alternativní text přímo u obrázku, v blokovém editoru u bloku obrázku. Upozornění: alternativní text, který vyplníte v knihovně médií, se automaticky nezmění u obrázků, které už na stránkách jsou.

Názvy souborů a autorské právo

• Název souboru: e-bike-remmen-afstellen.jpg řekne víc než IMG_4032.jpg a objeví se v adrese obrázku. Malá písmena, pomlčky, žádné mezery.
• Autorské právo: obrázek z Google Obrázků nelze volně použít. Fotografové a fotobanky pravidelně posílají faktury za použití bez licence. Používejte vlastní fotografie, fotografie s jasnou licencí nebo fotobanku, jejíž podmínky znáte, a uschovejte si doklad o licenci.

Úložiště a úklid

Knihovna médií se sama neuklízí. Obrázek, který ze stránky odstraníte, zůstane v knihovně i ve složce uploads, se všemi svými velikostmi. U webu s obsahem z mnoha let se to nasčítá. Občas proto ukliďte, ale opatrně: obrázek může být použit na místě, které knihovna nevidí (v nastavení šablony, ve widgetu nebo v e-mailu). Nejprve si vytvořte zálohu.

Shrnutí

• WordPress z každého nahraného obrázku vytvoří více velikostí a velké fotografie zmenší na 2 560 pixelů; prohlížeč pomocí srcset vybere vhodnou velikost.
• Fotografie předem zmenšete a zkomprimujte a odstraňte z nich údaje o poloze.
• Pro fotografie používejte JPEG nebo WebP, pro loga a snímky obrazovky PNG; SVG jen s pluginem, který soubor vyčistí.
• Lazy loading funguje automaticky, kromě prvního velkého obrázku; šířka a výška zabrání poskakování obsahu.
• Alternativní text popisuje, co obrázek sděluje v daném kontextu; čistě dekorativní obrázek dostane prázdný alternativní text.

Kvíz

Úkol

Úkol A4.4: Obrázky na Vaší domovské stránce. Zadejte adresu svého webu. Program načte domovskou stránku a prohlédne prvních 20 obrázků: mají atribut alt (prázdný smí být, chybět ne), mají šířku a výšku a jak velký je každý soubor (pomocí požadavku HEAD)? Obrázky větší než 300 kB budou nahlášeny. Opravte, co je červeně, v knihovně médií nebo na stránce, a nechte web zkontrolovat znovu.

Další čtení

Tyto články popisují kroky v panelech WebOké; v jiných panelech to funguje podobně.

• Příručka k DirectAdmin 18.5: Nahrávání příliš velké (chyba 413) nebo časový limit vypršel
• Nahrávání se nedaří: zvyšte hodnoty upload_max_filesize a max_execution_time
• Knihovna médií (wordpress.org, anglicky): https://wordpress.org/documentation/article/media-library-screen/
• Psaní alternativních textů (W3C, anglicky): https://www.w3.org/WAI/tutorials/images/decision-tree/