Zrychlení stránek díky optimalizaci obrázků

Sobota, 19. Leden 2013

V dnešním článku si povíme něco o tom, jak optimalizovat obrázky pro webové stránky. Celé téma vezmu hezky polopatě a krokově, aby bylo pochopitelné i pro úplné začátečníky. Pojďme do toho.

Proč optimalizovat obrázky pro web?

Může se zdát, že je to jen ztráta času a mnohem více pomůže kešování či jiné optimalizační techniky, o kterých jsem psal dříve. Ovšem v konečném výsledku se hodí optimalizovat každý kousek stránky a jedině tím, že se na nic nevykašlete docílíte bleskových stránek. Proto dnes píši o obrázcích.

Není problém najít weby, kde se optimalizací obrázků dá ušetři i 200 kB. To i v dnešní době rychlého připojení znamená cirka 0.3 sekundy zbytečného stahování a čekání. Některé obrázky se dokonce dají zmenšit i o 40-80 %. A to samozřejmě myslím bezztrátovou kompresi (nerozeznatelné od originálu).

Správný výběr formátu obrázku je samozřejmostí

Hodně lidí ukládá obrázky do špatných formátů a tím ničí jejich kvalitu, což nechceme. Nám jde o zmenšení datové velikosti. Proto se zkuste řídit tím, že

  • formát GIF budete používat výhradně pro jednoduché animace
  • klasické fotografie a obrázky bohaté na barvy uložíte do JPG
  • a pro webové obrázky použijete PNG (je lepší než GIF).

Ještě si dovolím doplnit, že nedoporučuji používat GIF na cokoli jiného než animace. Kvalitní fotky ničí a PNG je téměř ve všem mnohem lepší. Také podporuje průhlednost, má lepší kompresi, více podporovaných barev…

K čemu použít prokládání obrázků a co to znamená

V podstatě jde o filtr, který zařídí, že se obrázek bude načítat postupně z rozmazaného až po ostrý originál. Normálně se obrázky načítají odshora dolů a tak v jeden okamžik vidíte jen část obrázku. Tento filtr (známý také jako progresivní vykreslování) se hodí především u větších fotografií, protože budí dojem, že se fotky načítají rychleji.

Pro web plný wallpaperů se to vcelku hodí. Jestli chcete do obrázku tento filtr vložit, stačí při ukládání v Photoshopu zaškrtnou volbu „Progresivní“.

Progresivní vykreslování

Jak přes programy optimalizovat své obrázky?

Zde je 5 příkladů jak šikovně uložit a tím optimalizovat obrázky. Počítám, že většina z vás používá Photoshop, nevynechám ani populární freeware GIMP a nakonec odkážu na zautomatizované online nástroje…

Prvně uvedu návod pro Photoshop. Stačí, když kliknete na Uložit pro web a zařízení (klávesová zkratka Alt+Shift+Ctrl+S). V levém horním rohu si zvolte zobrazení dvou fotek vedle sebe (ať vidíte rozdíl oproti originálu). Na pravém horním rohu vyberte formát. Myslete na to, co jsem psal v úvodu o správném výběru. Pod obrázky máte možnost zahlédnout jejich velikost v konkrétním formátu. Pak už jen stačí obrázek uložit.

Pro nenáročné je tu GIMP. V něm použijte volbu Soubor – Exportovat (Shift+Ctrl+E). Vlevo dole v dialogovém okně si rozklikněte možnost „Zvolte typ souboru“ a nechte možnost dle přípony. Nahoru do názvu pak napište za soubor formát, který je pro fotku vhodný (například .jpg) a klikněte na Exportovat. Vyskočí další okno. V něm nechte vše ve výchozím nastavení a hrajte si jen s kvalitou. Já doporučuji hodnotu 80.

Další možností je použití online nástroje Smush.it. Jeho výhodou je, že soubory stačí poslat na server a o víc se starat nemusíte. Nástroj vám poté už jen odešle nazpět optimalizované obrázky. K tomu dodá kolik kB ušetříte a procentuální úsporu. To je výhodné zvláště pokud chcete optimalizovat více obrázků najednou, protože výše uvedené postupy jsou spíše pro budoucí ukládání než návod jak optimalizovat již používané.

Alternativou pak může být nový polský nástroj Kraken. Také zvládá upload více souborů, optimalizuje perfektně a navíc si můžete stáhnout plugin do svého prohlížeče (pro Firefox a Chrome). Poté se stane optimalizace už jen otázkou jednoho kliknutí. Už jen proto ho používám nejraději.

Kategorií samo o sobě je nástroj TinyPNG, protože se specializuje čistě na optimalizaci PNG obrázků pro web. Dopředu musím upozornit, že jako jediný z tohoto seznamu pracuje se ztrátovou kompresí. Ztrátová komprese znamená, že nástroj může snížit barevnou paletu v obrázku a tím zhoršit jeho kvalitu. Například převede váš PNG obrázek na 8-bitový (což je maximálně 256 barev). Ale na 90 % rozdíl nepoznáte a TinyPNG je dobrý pomocník.

Efektivita optimalizace u jednotlivých nástrojů

Asi si říkáte, jaký nástroj zvolit. Já jsem udělal testování a z něj vyplývá, že je to v podstatě jedno. Všechny nástroje jsou si totiž velmi podobné.

Zelená umbrella

V tomto příkladě jde o barevnou fotografii ve formátu JPG, která měla vždy nastavenou hodnotu komprimace na 80 %. Photoshop ji dokázal stlačit na 54,6 kB, GIMP na 52 kB, Smush.it udělal tutéž velikost a Kraken 51,4 kB.

Další příklad (ve formátu PNG) je logo Google. Photoshop vytvořil obrázek o velikosti 8,1 kB, GIMP 7,3 kB, Smush.it totéž jako GIMP a Kraken 7,1 kB. Jestli tedy potřebujete ušetřit každý bajt, zvolte nástroj Kraken.

Google

Jako poslední jsem si uložil logo Rychlost.cz. Na něm ukazuji jak nástroj TinyPNG funguje a díky čemu dokáže snížit velikost. Logo bylo totiž uložené do bitové hloubky 32, i když používá sotva pár barev. To je chyba, protože obsáhlá paleta se do obrázku ukládá pokaždé a nezáleží, zda je plně využita.

TinyPNG

I zde platí pravidlo, že nic se nemá přehánět

Setkal jsem se s programem Riot, který optimalizoval fotky příliš a snižoval horizontální a vertikální rozlišení (dpi). Což je to nejhorší, co můžete udělat, protože fotka bude jako z kostek a můžete ji pak klidně zahodit. Snižovat tyto hodnoty má v oblibě i GIMP při exportování, takže pozor. Prvořadá musí být vždy snaha zachovat fotku co nejkvalitnější. Nezapomeňte na to.

Zaměřujte se především na správný výběr formátu, oříznutí zbytečného místa v obrázcích a pokud je to možné, snížení barevné palety.

Pokud máte nějaké dotazy, nebojte se pomocí komentářů zeptat. Rád se věnuji vývoji webu a optimalizovat web na výkon se mi zdá být smysluplná, uspokojující a zábavná práce. A určitě o tom ještě něco napíšu.

Nabízíme vám širokou škálu zdravotnických potřeb.
V sortimentu www.dentimedshop.cz máme například inkontinenční pomůcky, zdravotní kompresní punčochy nebo ortézy. Pomůžeme vám s výběrem.

{ Komentáře k článku }

VK

Nejen na webu, ale i v emailu by lidé měli volit přiměřenou velikost.

CrazyDog

Díky za „progresivní“. Do teď jsem nevěděl k čemu je ;).

Tomáš Erlich

No sice jsem chtěl, aby bylo poselství článku „optimalizujte obrázky“, ale i tak jsem rád, že jsem přinesl něco nového. Progresivní vykreslování se hodí hlavně u těch velkých obrázků, ale bylo by určitě fajn třeba i u obrázků map na webu a podobně. Každopádně optimalizace obrázků má smysl a čím více lidí bude obrázky ukládat pomocí těchto postupů – tím lépe.

CrazyDog

S obrazky nemam problem. Ty jsem odjakziva optimalizoval. Je mozne, ze ne na maximum, ale i tak.

Kdyz me pred 8-mi roky ucil jeden znamy jak si udelat svuj prvni web, tak me uz tehdy obdivoval jak mam optimalizovanou grafiku a to tehdy nebyli, tak rychle pripojky jak dnes. Myslim, ze nikdo nemel ani 1mb/s.

Arxeiss

Důvod proč Photoshop má větší obrázky než třeba GIMP a Smush.it je ta, že Photoshop do obrázku uloží i nějaká ta metadata, které jsou jinak úplně zbytečná. Nejsem si teď úplně jist, ale myslím, že jsem to někde četl, proto prohnání jěště Smush.it-em tomu jěště trochu pomůže…

Tomáš Erlich

Ano, je to tak. Odstranění metadat z obrázků je jedna z optimalizačních technik, který tyhle nástroje používají. Takže pokud člověk uloží obrázek přes Photoshop správně (podle postupu v článku), nemá už vlastně smysl prohánět ho ještě nějakým nástrojem. Ušetřilo by to jen smazání metadat a takové drobné optimalizace (pár stovek bajtů) nemají smysl.

Proto jsem do článku popsal co možná nejvíce postupů jak ukládat obrázky rovnou optimalizované. Abychom šetřili čas a nemuseli pořád používat nějaké online optimalizátory. Tím nechci tvrdit, že jsou špatné – jsou úžasné.

MaReK Olšavský

Malá námitka :-): GIMP bych za program pro nenáročné nepovažoval, umí toho více, než je na první pohled patrné. Ano, Adobe Photoshop to není, ale mezi nimi není velký odskok a mám pocit, že není žádný program, který by se dal zařadit funkčností mezi tyto dva [až za GIMPem bych viděl nejbližšího konkurenta]. Sorry, rýpnout jsem si „musel“.

Jan33

píšete, že The GIMP! je jen pro nenáročné uživatele a jak koukám umí ukládat obrázky lépe, než předražený Adobe Photoshop.

Tomáš Erlich

Všechno má své pro a proti. Gimp třeba to ukládání obrázků moc pohodlné nemá. Je třeba ručně psát koncovku, není tam žádný náhled a podobně. V Photoshopu je jasně vidět výsledný obrázek, člověk si může hrát s počtem barev a sledovat kolik je již na obrázek málo. Může si optimalizovaný obrázek přiblížit a srovnávat s originálem, aby si lépe uvědomil o kolik bude obrázek horší a tak dále.

Pokud by někdo trvale pracoval s obrázky, rozhodně bych doporučil Photoshop. A přiznejme si to… není to zrovna zabezpečený program a není ho problém cracknout nakopírováním jednoho souboru.

CrazyDog

Gimp má náhled ukládaného obrázku. Jen musíš kliknout pro zobrazení a potom vidíš ubíraní kvality. Můžeš si dát i dva vedle sebe – originál:optimalizovaný. S Gimpem jsem dělal dlouho, tak vím :).

Fantomas

Zdravím, můžeš popsat, kde se dá v Gimpu zapnout prohlížení dvou stejných grafik vedle sebe, se sledováním optimalizací? Používal sem soft Fireworks od Macromedia a přechod na Gimp je celkem těžkopádný, ale zvykám si…

Vintage

Nevím, jak ve starších PS, ale v CS6 je v Save for Web možnost neukládat do výsledku žádná metadata (anebo si vybrat, která zachovat), tím by rozdíl měl odpadnout.

Komentáře jsou pro tento článek již uzavřeny.

Předchozí příspěvek:

Následující příspěvek:

Tato stránka již není udržována. Děkuji za pochopení.