Obrázky jsou nedílnou součástí většiny webů, proto byste jim měli věnovat zvýšenou pozornost a vyvarovat se základních chyb, které mohou váš WordPress web pohřbít. Je vhodné vybírat takové obrázky, které odpovídají obsahu, do kterého mají být umístěny a začínat vždy tou nejzajímavější fotografií. Fotografie by měly být v ideálním případě originální a unikátní. Kromě těchto základů existuje celá řada dalších doporučení, které si rozebereme v jednotlivých bodech níže.
V článku najdete:
- Jak nahrát obrázky do knihovny
- Jak si upravit nahrané obrázky
- Tvorba fotogalerie
- Návod na zmenšení rozměrů a datové velikosti obrázků
- Správu obrázků a mediálních souborů
- Jak zvýšit návštěvnost webu díky obrázkům
1. Nahrávání obrázků
Nahrávání obrázků do knihovny médií je jednoduché a intuitivní. Pro větší přehlednost je lepší nahrávat nové obrázky přes záložky Média -> Knihovna médií a poté zvolit tlačítko Nahrát soubor. Soubory pak můžete nahrávat přetažením nebo pomocí vyskakovacího okna.
Velikost nahrávaných souborů má nejčastěji limit 256 MB. Z podporovaných formátu lze nahrát tyto:
- Obrázky: .jpg, .png, .gif, .jpeg, ico, webp
- Dokumenty: .pdf, .doc, .ppt, .odt, .xls, .psd
- Audio: .mp3, .m4a, .ogg, .wav
- Video: .mp4, .mov, .avi, .mpg, .ogv,. .3gp, .3g2
Ostatní formáty nejsou povoleny kvůli bezpečnosti, pokud je přesto potřebujete na web dostat, stačí využít plugin File Upload Types by WPForms.
V jakém formátu obrázky nahrávat
Doporučuji nahrávat obrázky ve formátu WebP. WordPress ho začal konečně podporovat od své verze 5.8. Největší výhodou tohoto formátu je komprese obrázku za zachování jeho kvality. Rozdíly v datové velikosti jsou opravdu značné i ve srovnání s obrázky, které jste si ručně zoptimalizovali.
Nový formát s sebou nese některá omezení, pro které budete potřebovat plugin, aby je za vás vyřešil. Některé starší verze prohlížečů tento formát nepodporují a obrázky se tak nezobrazí. Dalším problémem mohou být srovnávače zboží, některé z nich s tímto formátem zatím nepracují. Plugin Short Pixel umí klasické formáty obrázků (jpg, jpeg, png) převést na tento nový formát a zároveň zachová jejich kopie v klasickém formátu.
2. Úpravy obrázků
Změnit rozměr, ořezat nebo otočit obrázek lze přímo v knihovně médií. Stačí vybrat obrázek a kliknout na tlačítko upravit.
V záložce Nastavení -> Média si můžete určit maximální rozměry pro tři základní velikosti obrázků (náhledy, střední velikost, velký obrázek).
3. Tvorba galerie
WordPress má tuto funkci v základu a stačí přidat nový blok s názvem Galerie a vložit vybrané obrázky z knihovny médií nebo vašeho PC. Po přidání obrázků do galerie zvolíte v pravém panelu počet sloupců 1–8 a případné oříznutí obrázku.
Takto vytvořená galerie má své mouchy. Největší z nich je ta, že se fotografie nedají zvětšit při kliknutí a nezobrazí se v tzv. lightboxu. Většina kvalitních šablon tuto funkci lightboxu obsahuje. Jestli vaše šablona tuto funkci obsahuje zjistíte, když v nastavení galerie v pravém sloupci Blok nastavíte odkaz na mediální soubor. V opačném případě si můžete nainstalovat jednoduchý plugin zdarma Lightbox for Gallery & Image Block. Dále existuje velká řada pluginů pro tvorbu galerií např. NextGEN a v neposlední řadě page buildery jako jsou WP Bakery, Divi, Elementor nabízí rovněž kvalitní nástroje pro tvorbu fotogalerií.
4. Komprese obrázků
Jedna z nejčastějších chyb, které se uživatelé WordPressu dopouštějí je nahrávání obrázků na web v plné velikosti. Bez předchozí úpravy může i několik obrázků udělat z vašeho webu pořádného lenocha co se týče rychlosti načítání stránek. Pokud na webu nemáte kvalitní plugin na kompresi obrázků, tak byste se před každým nahráním obrázku na web měli podívat na jeho datovou velikost a držet ji co nejmenší. Komprese je nejdůležitější u náhledových fotek u článků a produktů v e-shopu. Ideální datová velikost obrázků se pohybuje od desítek po maximálně nižší stovky kB.
Jak na kompresi obrázků
Pro kompresi obrázků můžete využít placený plugin např. Short Pixel (v základní verzi nabízí optimalizaci 100 obrázků měsíčně zdarma), umí také převod obrázků na WebP formát, o kterém jsem se zmínil v sekci Nahrávání obrázků. Pluginy zdarma ve většině případů neumí dostatečnou kompresi. Další o trochu pracnější ale plně ve vaši režii je pak optimalizace obrázků pomocí Photoshopu nebo programů, které se na to specializují. Velmi jednoduchým nástrojem zdarma pro optimalizaci obrázků je RIOT.
Cachování
Po úspěšně zvládnuté kompresi obrázků se hodí doplnit na web pořádný cachovací plugin, který ještě zrychlí načítání webu. Jedním z nejlepších je WP Rocket, který umí funkci Lazy Loading a jeho nastavení zvládne i běžný uživatel WordPressu.
5. Správa a organizace mediálních souborů
Jakmile budete mít na webu více obrázků a jiných mediálních souborů (videí, pdf), začne se zvětšovat potřeba po jejich lepší organizaci, aby lidově řečeno nevznikal bordel. WordPress v základu nenabízí žádný takový nástroj. Jediné, co v jeho nastavení najdete je volba Ukládat nahrané soubory do podadresářů přehledně pojmenovaných po jednotlivých měsících a letech, kterou naleznete pod záložkami Nastavení -> Média. Mně osobně se osvědčil plugin FileBird, který je v placené i free verzi a pomáhá přehledně organizovat mediální soubory přímo v knihovně médií WordPressu pomocí složek a podsložek.
6. SEO a obrázky
Google obrázky mohou tvořit podstatný zdroj návštěvnosti. Některé zdroje uvádí, že vyhledávání v Google obrázcích tvoří až 20 % (1 miliardu) z celkového počtu vyhledávání na Google za jeden měsíc. Přesto valná většina webů tento cenný zdroj opomíjí a nedává k obrázkům potřebné popisky. Google dokáže obrázky rozeznávat a kategorizovat. Zatím ale neumí pochopit kontext, který se k nim vztahuje, když mu s tím pomůžete a vytvoříte kvalitní popisky obrázků, tak vás za to štědře odmění.
SEO popisky obrázků:
- Alternativní text (Alternative text) – popište několika slovy, co je na obrázku
- Název (Title) – krátký popis obrázku ideálně s klíčovým slovem, doplní se z názvu souboru např. modré-sportovní-auto-bmw-jpg, doporučuji soubor pojmenovat už před nahráním na web, pomlčky rozdělující slova nevadí
- Titulek (Captions) – zobrazí se přímo pod obrázkem a přidává dodatečný informativní text k obrázku, není vždy nutné ho u obrázku mít
- Popis (Description) – WordPress automaticky vytváří pro každý nahraný obrázek unikátní URL (podstránku), není potřeba ho vyplňovat
Teď, když už víte, jak s obrázky ve WordPressu pracovat, možná by se vám hodilo několik zdrojů, ze kterých jde obrázky zdarma stahovat.
