--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Optimalizace obrázků ve WordPress url: https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/ date: 2016-06-03 modified: 2016-06-03 author: Tomáš Cirkl type: post categories: [WordPress obecně] tags: [obrázky, optimalizace, WordPress] --- WordPress obecně # Optimalizace obrázků ve WordPress [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 3. 6. 2016 3 min čtení Pozor: Článek je z roku 2016. Některé postupy se mohly změnit. ![optimalizace obrázků](https://www.wplama.cz/wp-content/uploads/2016/06/optimalizace-obrazku.jpg "optimalizace obrázků") Obsah článku (5 kapitol) 1. [Používání obrázků na prvky, které lze vyřešit pomocí CSS](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#pouzivani-obrazku-na-prvky-ktere-lze-vyresit-pomoci-css) 2. [Používání špatného formátu obrázků](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#pouzivani-spatneho-formatu-obrazku) 3. [Používání neoptimalizovaných obrázků](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#pouzivani-neoptimalizovanych-obrazku) 4. [Nevyužívání cache](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#nevyuzivani-cache) 5. [Zmenšení zbytečně velkých obrázků](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#zmenseni-zbytecne-velkych-obrazku) Moderní weby jsou plné multimediálního obsahu. Z něj jsou pak naprosto nejčastěji použité obrázky, které tvoří v průměru i **více než 60% velikosti zobrazené stránky**. Z toho důvodu byste se měli, v případě, že chcete mít [rychlou stránku](https://www.wplama.cz/optimalizace-rychlosti-nacitani-webu-na-wordpress-bez-znalosti-programovani/), věnovat jejich optimalizaci. V tomto článku bych rád ukázal několik způsobů jak optimalizaci obrázků provést a také vysvětlit proč některé formáty obrázku jsou lepší něž jiné. [![Velikost prvků stránky](https://www.wplama.cz/wp-content/uploads/2016/06/velikost-prvku-stranky.png "Velikost prvků stránky")](https://www.wplama.cz/wp-content/uploads/2016/06 / velikost-prvku-stranky.png) Velikost prvků stránky ## Používání obrázků na prvky, které lze vyřešit pomocí CSS Dříve (a není to až zas tak dávno) byly možnosti CSS omezené a mnohé prvky stránky (jako pozadí, stíny, ikony, atd) byly nutné vytvářet pomocí CSS. Nicméně s nástupem CSS3 a jeho podporou nejpoužívanějšími internetovými prohlížeči, je možné tyto prvky nahradit. Pokud potřebujete udělat [přechod](http://www.cssmatic.com/gradient-generator#'%5C-moz%5C-linear%5C-gradient%5C%28left%5C%2C%5C%20rgba%5C%28248%5C%2C80%5C%2C50%5C%2C1%5C%29%5C%200%5C%25%5C%2C%5C%20rgba%5C%28241%5C%2C111%5C%2C92%5C%2C1%5C%29%5C%2050%5C%25%5C%2C%5C%20rgba%5C%28246%5C%2C41%5C%2C12%5C%2C1%5C%29%5C%2051%5C%25%5C%2C%5C%20rgba%5C%28240%5C%2C47%5C%2C23%5C%2C1%5C%29%5C%2071%5C%25%5C%2C%5C%20rgba%5C%28231%5C%2C56%5C%2C39%5C%2C1%5C%29%5C%20100%5C%25%5C%29%5C%3B') nebo [stín](http://www.cssmatic.com/box-shadow), můžete je udělat pomocí CSS. Nepoužívejte obrázky na ikony, raději využijte [SVG](https://cs.wikipedia.org/wiki/Scalable_Vector_Graphics) nebo [obrázkové písmo](https://www.wplama.cz/jak-na-font-awesome/). ## Používání špatného formátu obrázků Jedna z nejčastějších chyb u obrázků je používání nesprávného formátu obrázků. Mezi nejpoužívanější formáty obrázků na stránce patří *.jpg, .gif a .png*. Nicméně to neznamená, že byste měli používat jakýkoliv z nich. Ve skutečnosti každý z těchto formátů má své výhody a nevýhody a vždy byste měli určit, který z nich je ten nejlepší pro danou věc. Fotografie by vždy měly být ve formátu .*jpg*. Loga nebo grafy v *.png*. A *.gif* by se měl využívat jen u velmi malých obrázků, například u pozadí, které se opakuje a nelze udělat pomocí CSS. Existují však i další skvělé formáty. Například **Web P** (vytořil Google a v porovnání s PNG je až o 26% menší) nebo **JPEG-XR** od Microsoftu. Problémem u nich však je nedostatečná podpora od prohlížečů. Ano, každý si takhle hraje na svém písečku. Web P je podporován pouze v Chrome a Opeře. **JPEG-XR** pouze u prohlížečů od Microsoftu. ## Používání neoptimalizovaných obrázků Základním pravidlem každého obrázků na webové stránce je, že by měl být **optimalizovaný**. Nejjednodušším způsobem u WordPress je využítí pluginu [WP Smush](https://www.wplama.cz/optimalizace-obrazku-pomoci-wp-smush-it/), který automaticky optimalizuje každý obrázek nahraný do WordPress. Ve verzi zdarma to dělá u obrázků do velikosti 1MB. Jestliže máte obrázek větší, ujistěte se, že jste jeho rozměr upravili. Pokud ano a je pořád větší, můžete jej [bezztrátově komprimovat](https://cs.wikipedia.org/wiki/Bezeztr%C3%A1tov%C3%A1_komprese) pomocí nějakého z online nástrojů. Já používám [Compressor.io](https://compressor.io/compress). Pomocí tohoto nástroje můžete optimalizovat i obrázky, které se nenahrávají do WordPress pomocí administrace, ale jsou například součástí šablony. ## Nevyužívání cache Cache by měli být součástí každé stránky. Umožňují **výrazně vylepšit rychlost načítání stránek** a snížit datovou náročnost na hostingu. Na cache doporučuji využívat plugin [WP Super Cache](https://www.wplama.cz/wp-super-cache/). Pokud jej z nějakého důvodu využívat nechcete, můžete udělat cachování obrázků i pomocí souboru *.htaccess*. Stačí do něj přidat následující: ``` Expires Active On Expires By Type image/jpg "access 1 year" Expires By Type image/jpeg "access 1 year" Expires By Type image/gif "access 1 year" Expires By Type image/png "access 1 year" Expires By Type text/css "access 1 month" Expires By Type application/pdf "access 1 month" Expires By Type application/javascript "access 1 month" Expires By Type application/x-javascript "access 1 month" Expires By Type application/x-shockwave-flash "access 1 month" Expires By Type image/x-icon "access 1 year" Expires Default "access 2 days" ``` ## Zmenšení zbytečně velkých obrázků Posledním typem je ta nejzákladnější optimalizace obrázků – **hlídání velikosti obrázku a prvku**, v němž se nachází. Je jasné, že box o velikosti 300px v sobě nemusí držet obrázek o šířce 2000px. Šablona se o to postará a obrázek zmenší tak, aby se do boxu vešel, ale při zobrazení stránky se stále bude stahovat obrázek zbytečné velký. Hlídejte tedy velikost prvku stránky a obrázku, který do něj přijde. Dobrým nástrojem pro odhalení problému s obrázky je [tools.pingdom.com](https://tools.pingdom.com/). Můžete si zde provést načtení stránky a poté si zobrazit vodopádový graf, kde rychle rozpoznáte prvky stránky, které se načítají podezřele dlouho. Následně se na ně můžete zaměřit a optimalizovat je. - [#obrázky](https://www.wplama.cz/stitek/obrazky/) - [#optimalizace](https://www.wplama.cz/stitek/optimalizace/) - [#WordPress](https://www.wplama.cz/stitek/wordpress/) Sdílet - - [](mailto:?subject=Optimalizace obrázků ve WordPress&body=Optimalizace obrázků ve WordPress https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Foptimalizace-obrazku-ve-wordpress%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Foptimalizace-obrazku-ve-wordpress%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/optimalizace-obrazku-ve-wordpress/#respond) [← Předchozí článek Jaký byl WPweekend](https://www.wplama.cz/jaky-byl-wpweekend/) [Další článek → Jak aktivovat shortcody v sidebaru](https://www.wplama.cz/jak-aktivovat-shortcody-v-sidebaru/) Související ## Mohlo by vás zajímat [Všechny články z rubriky WordPress obecně →](https://www.wplama.cz/wordpress/obecne/) ![opravene verze php rijen 2026 720x405](https://www.wplama.cz/wp-content/uploads/2026/10/opravene-verze-php-rijen-2026-720x405.webp "opravene verze php rijen 2026 720x405") WordPress obecně ### [Kritická oprava PHP: co znamená pro váš WordPress web](https://www.wplama.cz/kriticka-oprava-php-rijen-2026/) 21. 10. 2026 8 min čtení --- ![wordpress 7.1 mary lou](https://www.wplama.cz/wp-content/uploads/2026/08/wordpress-7.1-mary-lou.webp "wordpress 7.1 mary lou") WordPress obecně ### [WordPress 7.1 „Mary Lou“](https://www.wplama.cz/wordpress-7-1-mary-lou/) 24. 8. 2026 6 min čtení --- ![wordpress 7.0 armstrong](https://www.wplama.cz/wp-content/uploads/2026/05/wordpress-7.0-armstrong.webp "wordpress 7.0 armstrong") WordPress obecně ### [WordPress 7.0 “Armstrong”](https://www.wplama.cz/wordpress-7-0-armstrong/) 22. 5. 2026 6 min čtení ---