Média: obrázky a alt text

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

Cíl lekce: Po této lekci dokážete obrázky správně připravit, nahrát a popsat tak, aby se rychle načítaly, vypadaly ostře a byly použitelné pro každého.

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

Co se stane, když nahrajete fotku

Nahrajete fotku z telefonu: 4 000 krát 3 000 pixelů, 5 MB. WordPress přitom udělá víc, než byste čekali:

1. Pokud je fotka š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 zůstává také zachovaný. Tomu se říká big image threshold a existuje od WordPressu 5.3.
2. WordPress navíc vytvoří řadu menších formátů: miniatura (standardně 150 x 150 pixelů, oříznutá), střední (300), velký (1024) a další formáty o šířce 768, 1536 a 2048 pixelů. Vaše šablona a pluginy k tomu často přidávají ještě vlastní formáty.
3. Všechny verze se uloží do wp-content/uploads/2026/11/ (rok a měsíc nahrání).

Z jedné fotky tak rychle 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 přidá k obrázku srcset: seznam všech těchto formátů. Prohlížeč si sám vybere nejmenší formát, který je pro dané zařízení dostatečně ostrý. Telefon tak načte formát 768 pixelů, velká obrazovka formát 1536. To funguje správně jen tehdy, pokud jsou tyto formáty vytvořeny, tedy pokud nahráváte přes knihovnu médií a ne přes FTP.

Zmenšení a komprese předem

I s těmito automatickými formáty se vyplatí fotky zmenšit ještě před nahráním:

• Rozměr: fotka, která se na Vašem webu nikdy nezobrazí šířeji než 1 600 pixelů, nemusí mít šířku 4 000 pixelů. Zmenšete ji předem na přibližně 2 000 pixelů na delší straně. Ušetříte tím místo na disku, velikost záloh i čas nahrávání.
• Komprese: JPEG s kvalitou 75 až 85 vypadá pro oko téměř stejně jako kvalita 100, ale je často poloviční velikosti.
• Strukturované informace: fotky z telefonu často obsahují GPS polohu, kde byly pořízeny. Pokud nechcete, aby všichni věděli, kde bydlíte, odstraňte ji ještě před nahráním. WordPress u zmenšených formátů odstraní mnoho těchto informací, ale originál je stále může 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 užitečné, ale ověřte si, zda to dělají na Vašem vlastním serveru, nebo zda fotky posílají do externí služby (lekce 9.3), a zda plugin opravdu potřebujete, když to lze udělat i předem.

Jaký formát

Pokud Váš server určitý formát neumí zpracovat, WordPress při nahrávání zobrazí chybu nebo nevytvoří menší formáty. V nabídce Nástroje > Stav webu (záložka 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 doscrollujete. Díky tomu je dlouhá stránka s mnoha fotkami mnohem rychlejší. WordPress záměrně nechává první velký obrázek nahoře na stránce bez lazy loading a často mu dává přednost pomocí fetchpriority="high", protože ten se má zobrazit co nejrychleji. K tomu se vrátíme v lekci 6.3.

Vždy také nastavte šířku a výšku obrázku (WordPress to u obrázků z knihovny médií dělá automaticky). Prohlížeč pak dopředu vyhradí místo a text se při načtení fotky neposune.

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

Alt text (alternativní text) popisuje, co je na obrázku zobrazeno. Čtečky obrazovky jej 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 jej používají k pochopení obsahu obrázku.

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

• Špatně: IMG_4032.jpg nebo foto.
• Špatně: obchod s koly 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ě.

Pokud je obrázek čistě dekorativní (čárka, vzor na pozadí), nechte alt text prázdný. Čtečka obrazovky jej pak přeskočí. Prázdný text je něco jiného než chybějící: obrázek bez atributu alt čtečka obrazovky často předčítá podle názvu souboru. Obrázek, který je zároveň odkazem (například logo vedoucí na domovskou stránku), popisuje, kam odkaz vede: Na domovskou stránku Fietsenwinkel De Spaak.

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

Názvy souborů a autorské právo

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

Úložiště a úklid

Knihovna médií se sama neuklízí. Obrázek, který odstraníte ze stránky, zůstává v knihovně i ve složce uploads, se všemi svými formáty. U webu s léty obsahu se to pak nahromadí. Čas od času si udělejte úklid, 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 souboru vytvoří více formátů a velké fotky zmenší na 2 560 pixelů; prohlížeč si pomocí srcset vybere vhodný formát.
• Fotky zmenšete a zkomprimujte předem a odstraňte z nich údaje o poloze.
• Pro fotky 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í posunu obsahu.
• Alt text popisuje, co obrázek v daném kontextu sděluje; čistě dekorativní obrázek dostane prázdný alt 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 zkontroluje prvních 20 obrázků: mají atribut alt (prázdný smí být, chybějící ne), mají šířku a výšku a jak velký je každý soubor (pomocí požadavku HEAD)? Obrázky nad 300 kB budou nahlášeny. Opravte, co je označeno červeně, ve své knihovně médií nebo na stránce, a zkontrolujte to znovu.

Doporučená literatura

Tyto články popisují jednotlivé kroky v panelech WebOké; v jiných panelech fungují obdobně.

• 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, Angličtina): https://wordpress.org/documentation/article/media-library-screen/
• Psaní alt textů (W3C, Angličtina): https://www.w3.org/WAI/tutorials/images/decision-tree/