--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@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] --- 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#'-moz-linear-gradient%28left%2C%20rgba%28248%2C80%2C50%2C1%29%200%25%2C%20rgba%28241%2C111%2C92%2C1%29%2050%25%2C%20rgba%28246%2C41%2C12%2C1%29%2051%25%2C%20rgba%28240%2C47%2C23%2C1%29%2071%25%2C%20rgba%28231%2C56%2C39%2C1%29%20100%25%29%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.