Obrázky a WordPress

Obrázky a WordPress

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:

  1. Jak nahrát obrázky do knihovny
  2. Jak si upravit nahrané obrázky
  3. Tvorba fotogalerie
  4. Návod na zmenšení rozměrů a datové velikosti obrázků
  5. Správu obrázků a mediálních souborů
  6. 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.

Jak nahrát obrázek do WP
Nahrání obrázku do knihovny WordPressu

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.

Úprava obrázku v knihovně médií WordPress
Úprava obrázku v knihovně médií WordPress

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.  

Nastavení médií v pluginu WP Rocket umožňuje zapnout Lazy Loading

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.

Organizace médií s pluginem File Bird
Plugin FileBird přidává do knihovny médií postranní panel, ve kterém si můžete mediální soubory lépe organizovat

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.

#obrazky #galerie #fotogalerie

Jak opravit chybu 500 Internal Server Error ve WordPressu
Jak zobrazit obsah PDF ve WordPressu

Potřebujete pomoct s WordPressem?

Líbil se vám článek? Sdílejte ho s přáteli

Autor

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.

Vyplňte toto pole
Vyplňte toto pole
Zadejte prosím platnou e-mailovou adresu.

Menu