Co je komponenta Obrázek
Komponenta Obrázek umožňuje vložit samostatný obrázek do obsahu stránky s popiskem a různými možnostmi zobrazení.
Kdy použít
- Pro ilustrační fotografie v textu
- Pro diagramy a schémata
- Pro mapy a plány
- Kdykoliv potřebujete zobrazit obrázek s popiskem
Jak přidat Obrázek
- V záložce Obsah klikněte na "Přidat komponentu"
- Vyberte "Obrázek"
- Vyplňte následující pole
Dostupná pole
Obrázek (povinné)
Vyberte obrázek z knihovny nebo nahrajte nový:
- Klikněte na "Přidat médium"
- Vyberte existující obrázek nebo nahrajte nový
- Potvrďte výběr
Technické požadavky:
- Formát: JPG, PNG, WebP
- Velikost: Optimálně do 500 KB (max 2 MB)
- Rozměry: Minimálně 800 px na šířku pro kvalitní zobrazení
- Kvalita: Ostrý, dobře osvětlený obrázek
Pojmenování souborů
Důležité: Pojmenujte soubory srozumitelně ještě před nahráním do systému.
Proč je to důležité:
- SEO: Vyhledávače používají název souboru k pochopení obsahu obrázku
- Přehlednost: V knihovně médií najdete obrázek snáze
- Přístupnost: Název se používá jako záložní text, pokud není vyplněn ALT text
Jak správně pojmenovat obrázek:
- Popisně: "radnice-prikladov.jpg" místo "IMG_1234.jpg"
- Malými písmeny: "nova-skola.jpg" místo "Nova_Skola.JPG"
- Pomlčky místo mezer: "detske-hriste.jpg" místo "detske hriste.jpg"
- Bez diakritiky: Systém automaticky transliteruje česká písmena (ř→r, š→s, č→c atd.)
- Klíčová slova: Použijte slova, která by lidé hledali
Příklady dobrých názvů:
- "mestsky-urad-hlavni-budova.jpg"
- "slavnostni-otevreni-knihovny-2024.jpg"
- "mapa-parkoviste-centrum.jpg"
- "starosta-jan-novak-portret.jpg"
Příklady špatných názvů:
- ❌ "DSC_0234.jpg" (generovaný fotoaparátem)
- ❌ "image (1).jpg" (generovaný při stažení)
- ❌ "foto.jpg" (nepopisný)
- ❌ "Nová budova!!!.JPG" (zvláštní znaky, velká písmena)
Popisek obrázku
Text zobrazený pod obrázkem. Slouží pro:
- Popis toho, co je na obrázku
- Přístupnost (čtečky obrazovky pro nevidomé)
- SEO (vyhledávače)
- Copyright nebo zdroj fotografie
Příklad: "Nová autobusová zastávka u nemocnice. Foto: archiv města"
ALT text (alternativní text)
Co je ALT text?
ALT text je textový popis obrázku, který se zobrazí pokud se obrázek nenačte, nebo který čtou čtečky obrazovky pro nevidomé uživatele. Je klíčový pro přístupnost webu a také pomáhá SEO.
Kde ho vyplnit:
Po nahrání obrázku najdete pole "Alternativní text" v detailu média. Vždy jej vyplňte!
Jak psát dobrý ALT text:
- Popište co je na obrázku: "Starosta města před novou školou" místo jen "Starosta"
- Stručně: Maximálně 1-2 věty (125 znaků)
- Bez slov "obrázek" nebo "fotka": Čtečky to samy oznámí
- Kontext: Popište důležité detaily relevantní k okolnímu textu
- Text v obrázku: Pokud obrázek obsahuje text, zahrňte jej do ALT textu
Příklady dobrého ALT textu:
- "Slavnostní otevření dětského hřiště s klouzačkou a houpačkami"
- "Graf znázorňující nárůst návštěvnosti knihovny o 30% v roce 2024"
- "Mapa parkování v centru města s vyznačenými parkovacími zónami"
- "Portrét starosty Jana Nováka"
Příklady špatného ALT textu:
- ❌ "Obrázek" (nic neříká)
- ❌ "IMG_1234" (technický název)
- ❌ "Klikněte zde" (není to odkaz)
- ❌ Příliš dlouhý popis celé události místo popisu samotného obrázku
Dekorativní obrázky
Některé obrázky jsou čistě dekorativní - nepřinášejí žádnou informaci, pouze zkrášlují stránku (např. dekorativní oddělovače, grafické prvky, ilustrace).
Pro dekorativní obrázky:
- Zaškrtněte možnost "Označit jako dekorativní"
- ALT text se nastaví na prázdný (což je správné - čtečky obrázek přeskočí)
- Použijte pouze tehdy, když obrázek opravdu žádnou informaci neobsahuje
Kdy označit jako dekorativní:
- ✅ Grafické oddělovače sekcí
- ✅ Abstraktní pozadí či vzory
- ✅ Ikony, které jsou duplikátní k textu hned vedle
Kdy NEOZNAČOVAT jako dekorativní:
- ❌ Fotografie lidí, míst, událostí
- ❌ Grafy, mapy, diagramy
- ❌ Screenshoty nebo návody
- ❌ Loga organizací
- ❌ Cokoliv co přináší informaci
Režim zobrazení
Jak bude obrázek zobrazen:
- Nativní: Původní rozměry obrázku (doporučeno pro screenshoty, diagramy)
- Na šířku: Obrázek se přizpůsobí šířce kontejneru
- 16:9: Obrázek se ořízne na formát 16:9 (doporučeno pro fotografie)
- 4:3: Klasický formát fotografií
- 1:1: Čtvercový formát
Celá šířka
Zaškrtnutím se obrázek roztáhne přes celou šířku stránky (vč. okrajů).
Kdy použít: Pro panoramatické fotografie nebo důležité vizuály, které chcete zdůraznit.
Dobré praktiky
- Optimalizujte obrázky: Velké soubory zpomalují načítání stránky
- Relevantní obsah: Obrázek by měl souviset s okolním textem
- Kvalita: Raději žádný obrázek než rozmazaný nebo špatně osvětlený
- Popisek vždy: Každý obrázek by měl mít popisek
- ALT text vždy: Vyplňte ALT text u všech informačních obrázků
- Pojmenujte před nahráním: Přejmenujte soubor než ho nahrajete
- Správný formát: Fotografie → JPG, grafika s průhledností → PNG
Časté chyby
- ❌ Příliš velké soubory (nad 1 MB)
- ❌ Rozmazané nebo tmavé fotografie
- ❌ Chybějící popisek
- ❌ Chybějící ALT text
- ❌ Špatné názvy souborů (IMG_1234.jpg)
- ❌ Označení důležitého obrázku jako dekorativní
- ❌ Nesprávný poměr stran (natažený nebo stlačený obrázek)