Jak nastavit optimální velikost obrázků ve WordPressu pro rychlé načítání
Systém pro správu obsahu WordPress nabízí možnost používat kromě standardních velikostí obrázků také individuální formáty obrázků. Představujeme důležité kroky k přizpůsobení velikosti obrázků na základě WordPress 6.0.3.
Výchozí velikosti obrázků v WordPressu
Velikost souborů obrázků vložených na webové stránce má velký vliv na její rychlost načítání. Optimální formáty obrázků zkracují dobu načítání a snižují zatížení paměti serveru. CMS WordPress nabízí při nahrávání médií sadu standardizovaných velikostí obrázků na serveru.
| Standardní velikosti obrázků WordPress | Velikost (Š x V) v pixelech | Poměr stran |
|---|---|---|
| Náhledové obrázky | 150 x 150 | Lze deaktivovat |
| Střední | 300 x 300 | Zachováno |
| Velký | 1024 x 1024 | Zachováno |
| Původní obrázek | Jak bylo nahráno | Zachováno |
Nechte za sebe mluvit své jméno. Zaregistrujte si doménu podle svých představ.
Uložení obrázků WordPress v backendu a úprava velikosti
Tyto velikosti obrázků jsou definovány v nastavení WordPressu a lze je tam v určitých mezích upravit. Chcete-li to provést, přejděte v backendu do části „Nastavení“ > „Média“.
Po nahrání médií se v knihovně médií objeví další soubory. Adresář pro tyto soubory je https://mydomain.com/wp-content/uploads/ nebo https://mydomain.com/wp-content/uploads/2022/11/ (pokud jsou povoleny složky podle měsíce a roku). Například obrázek se nachází v následujících souborech:
- vzorový obrázek-1024x683.jpg
- vzorový obrázek-150x150.jpg
- vzorový obrázek-1536x1024.jpg
- vzorový obrázek-2048x1365.jpg
- vzorový obrázek-300x200.jpg
- vzorový obrázek-620x413.jpg
- vzorový obrázek-zmenšený.jpg (2 560 x 1 707 px)
- sampleimage.jpg (originál)
To poskytuje nejlepší velikosti obrázků pro většinu stránek nebo příspěvků WordPress. Obrázky pro nahrání do knihovny médií by neměly být větší než 1 920 pixelů na delší straně obrázku. Před nahráním je lze změnit pomocí bezplatných programů pro úpravu obrázků, aby se předešlo nepříjemným překvapením. To platí pro formát obrázků WebP, který není nativně podporován všemi prohlížeči.
Toto jsou doporučené velikosti obrázků pro použití v šablonách WordPress:
| Velikosti obrázků WordPress | Velikost (Š x V) v pixelech |
|---|---|
| Loga | 200 x 100 |
| Náhledové obrázky | 150 x 150 |
| Obrázky pozadí | 1920 x 1080 |
| Obrázky příspěvků ve formátu na výšku | 900 x 1200 |
| Obrázky příspěvků v horizontálním formátu | 1200 x 900 |
| Obrázky v záhlaví (banner) | 1048 x 250 |
| Obrázky posuvníku (v závislosti na tématu) | Až 1920 x cca 600 |
Konkrétní požadované rozměry obrázků závisí na komponentách a struktuře šablony WordPress. Najdete je v dokumentaci příslušné šablony.
Změna velikosti obrázků v knihovně médií WordPress
Velikost obrázků ve WordPressu lze také upravit. Kromě změny původních rozměrů obrázku je možné obrázek oříznout, otočit nebo převrátit. Chcete-li například vytvořit posuvnou fotografii z obrázku s většími rozměry v knihovně médií, postupujte takto:
Krok 1: Vyberte obrázek v knihovně médií a klikněte na „Upravit obrázek“.
Krok 2: Nastavte způsob úpravy a velikost
Je třeba poznamenat, že tlačítko oříznutí musí být použito dvakrát: jednou pro aktivaci funkce a podruhé po nastavení rozměrů obrázku pro provedení operace.
Chcete ukládat soubory co nejbezpečněji? Použijte cloudové úložiště HiDrive. Můžete si být jisti, že vaše data jsou bezpečně uložena v souladu s britskými normami GDPR.
Krok 3: Uložení obrázku do knihovny médií
Po uložení zmenšeného obrázku obsahuje složka pro nahrávání soubor
- náhled-obrázek-zmenšený-e1667121439976.jpg
v dalších pěti formátech s automaticky přiřazeným ID …-e1667121439976. Nově vytvořené velikosti obrázků lze při vkládání nebo výměně vybrat z knihovny médií v editoru Gutenberg. Tam jsou také k dispozici rozměry obrázku v pixelech.
Upravte velikost obrázku při vkládání do obsahu WordPressu
Obrázky z knihovny médií WordPressu se vkládají do obsahu. To umožňuje dodatečné úpravy velikosti v širokých mezích. Editor WordPress Gutenberg nabízí mnohem širší možnosti než klasický editor TinyMCE.
Pokud si chcete uložit vlastní nastavení pro pozdější použití, můžete použít sekci Gutenberg „Přidat do opakovaně použitelných bloků“ a také ji uzamknout, aby nedošlo k náhodné změně. Pokud často publikujete nové příspěvky, ušetří vám to spoustu práce.
Pro stránky zaměřené na konkrétní profese, jako jsou například stránky fotografů, mohou být zapotřebí další formáty obrázků, aby bylo možné dokonale vyjádřit vaši vizi. Náš průvodce„komprimace obrázků“poskytuje další pomoc při úpravě velikosti obrázků, např. pro pluginy galerií WordPress.
Zakázat výchozí velikosti obrázků v WordPressu
Nejjednodušší způsob, jak deaktivovat výchozí velikosti obrázků, je použít plugin „Disable Media Sizes “. V jeho nastaveních je také uvedených všech sedm generovaných formátů obrázků.
S nastavením pluginu, jak je zobrazeno, nejsou nevybrané formáty vůbec generovány. Nahrávání původního obrázku nelze „vypnout“. To je výhodné, pokud chcete později přece jen generovat jiné formáty.
Přidání dalších formátů obrázků nebo jejich potlačení je také možné pomocí záznamů v souborech jádra WordPressu functions.php a index.php. To by však mělo být vyhrazeno zkušeným programátorům. První přehled programovacího jazyka najdete v našem tutoriálu PHP pro začátečníky.
Další optimalizace obrázků pro WordPress pomocí pluginů
V praxi se obrázky používají hlavně ve formátech JPG a PNG. Velikost souborů těchto obrazových formátů lze dále upravovat pomocí programů pro úpravu obrázků. V programu Photoshop se při ukládání nebo exportu zobrazí dotaz na kvalitu. Nevýhodou této metody je, že každý obrázek musí být „upravován“ jednotlivě a poté nahrán. Pluginy jsou elegantnějším řešením. Tyto pluginy mají často širokou škálu funkcí, proto je vhodné si pečlivě prostudovat dokumentaci k použitému pluginu.
Vysoký počet instalací a dobré hodnocení mají například následující pluginy WordPress pro úpravu velikosti souborů a obrázků WordPress:
- EWWW Image Optimizer: Podporuje formáty: JPG, PNG, GIF, PDF, WebP, SVG
- TinyPNG: Podporuje formáty JPG, PNG, WebP
- Imagify: Podporuje formáty JPG, PNG, PDF, GIF, WebP
- Regenerate Thumbnails: již delší dobu neaktualizováno
- Image Regenerate & Select Crop: stejně
Než vyzkoušíte pluginy, nezapomeňte: Záloha WordPressu chrání před ztrátou dat, pokud se něco opravdu pokazí.
Shrnutí: Optimalizujte velikost obrázků ve WordPressu
Pomocí nástrojů WordPressu lze již dosáhnout mnoha optimálních velikostí obrázků. S pluginy jsou k dispozici ještě rozsáhlejší možnosti. Zásahy do PHP kódu webu WordPress by měly být vyhrazeny profesionálním programátorům. A na závěr: při optimalizaci mějte na paměti SEO obrázků.