Jak upravit obrázky pro použití na internetu

31. 10. 2007, 19.17

Běžný (Franta) Uživatel nemá problém s tím, poslat e-mailem deset třímegových obrázků. Nahrát na web obrázek o velikosti 3000×2000 pixelů a do webové stránky ho zmenšit pomocí parametrů width a height tagu img. Následující článek vzniká jednak proto, abych mohl odkázat bezradné či pomýlené na odpovídající návod, a taky proto, abych ukázal to, co se mi nesčetněkrát osvědčilo a jak to dělám osobně.

Programů na úpravu a správu obrázků je celá řada. Od Photoshopu (který je pro naše potřeby opravdu kanonem na vrabce), přes různé ZPS, ACDSee, až po „jednoduché“, typu IrfanView nebo ImageMagick, excelentní program pro příkazovou řádku. Photoshop vynechám, pro naše potřeby se nehodí. Stejně tak vynechám ZPS a ACDSee, jednak nejsou zadarmo, a taky neposkytují takovou rychlost, komfort a kvalitu editace. Podíváme se hlavně na IrfanView a nakonci i na ImageMagick.

Čeho chceme dosáhnout?

Obrázek publikovatelný na internetu (ať už na webu, nebo v e-mailu) by měl být rozumně veliký. Slovo „veliký“ je v našem případě mnohoznačné, ale to vůbec nevadí, ba naopak. Rozumná velikost platí jak pro rozměry stran (v pixelech), tak pro velikost souboru (v kilobytech).

„Rozumný“ záleží na tom, co upravujeme. Pro zachování jednoduchosti mějme za to, že upravujeme fotku. Rozumná fotka pro zobrazení na internetu, má podle mých zkušeností delší stranu dlouhou 800px a velikost souboru se pohybuje mezi 50 a 200 kB. Dělat takové fotky je hračka – máme-li na to odpovídající nástroj. Zde přichází na řadu IrfanView

IrfanView

Věřím, že stažení a instalaci irfanu tu popisovat nemusím. Vrhněme se tedy do díla. Otevřeme fotku. Chceme ji zmenšit, tudíž použijeme buď klávesovou zkratku ctrl + R, nebo položku menu Image → Resize/Resample.

V daném dialogu zkontrolujeme, zda je zaškrtnuto políčko „Preserve aspect ratio“. Musí být, jinak by z obrázku mohla vylézt zrůdička :) Pak změníme jedno z polí v chlívku „Set new size“. Tam, kde je číslo větší, jednoduše vyplníme požadovanou velikost, v mém případě 800. Úplně stejně bude fungovat, když z pravého sloupce vyberete 800×600, dokonce i když poměr stran není přesně 4:3, Irfan si s tím poradí a zmenší obrázek správně.

Obrázek máme zmenšený, uložíme. Stiskem klávesy s vyvoláme ukládací dialog. Z roletky dole vybereme „JPG – JPEG Files“. Pokud se nám neotevře další okýnko s dialogem, klikneme dole ještě na „Show advanced options“.

Zde je rozumné nastavit kvalitu někde mezi 80/90 pro velký (800px) obrázek, pokud budeme chtít generovat malý náhled (cca 200px a menší), stačí kvalita okolo 70. Úplně stačí nechat zaškrtnutý jen úplně horní boxík. Progresivní JPG znamená, že fotka se nebude načítat postupně odzhora, ale zobrazí se celá, rozmazaná, a postupně se bude dokreslovat a zostřovat, podle toho, jak se načítá. Na webu to vypadá rozhodně líp.

Pokud chcete nechat ve fotce EXIF, zaškrtněte i boxík, u kterého je EXIF. Pokud nevíte, co je EXIF, nechte dané políčko prázdné ;)

Pak zbývá už jen zvolit cestu a jméno souboru (pozor na přepsání starého souboru) a hotovo!

Chci uložit jen část obrázku

Není nic snazšího. Myší nakreslíme obdélník kolem objektu, který chceme zachovat a zmáčkneme ctrl + y. Hotovo, uložíme. Prosté, že?

Chci zmenšit víc souborů najednou!

Není problém, i s tím Irfan počítá. A umí to moc dobře. Spustíme ho, a zmačkneme b. Zobrazí se doalog pro batch:

Vybereme fotky, které chceme zmenšit, nějaký adresář, kam je chceme uložit (doporučuji prázdný) a dole akci. Máme na výběr

• konvertovat fotky
• přejmenovat fotky
• konvertovat a přejmenovat

Budu se věnovat poslední možnosti. Jako „Output format“ nastavíme opět JPG a klikneme na tlačítko Options. Nastavíme stejně, jako jsme nastavili při zmenšování jedné fotky. Pak zatrhneme boxík „Use advanced options“ a klikem na tlačítko pod ním vyvoláme dialog nastavení.

Vše by mělo být při prvním spuštění nenastaveno. Pak už si program pamatuje, co bylo nastaveno naposledy, ale pozor, to je dvousečná zbraň.

My se soustředíme na boxík RESIZE (zaškrtnout), do políčka „Set long side to:“ vyplníme naši 800, zaškrtneme „Preserve aspect ratio“, „Use Resample“ i „Don't enlarge smaller images“, i když to poslední není nutné, pokud víme, že mezi vybranými obrázky není žádný s delší stranou menší 800px.

Pak ještě zaškrtneme (pokud není) „Save files with original date/time“, klikneme na OK, pak ještě jednou, a koukáme se, jak se nám ve vybaném adresáři hromadí upravené fotky.

ImageMagic

Commandlinovému ImageMagicku jsem přišel na chuť nedávno. Pokud mám soubory nahrány na serveru, ke kterému mám ssh přístup, nemůžu použít žádné GUI, které by mi se zmenšováním pomohlo. Jistě, můžu soubory stahnout, zmenšit a nahrát znovu, ale není to víc práce, než do příkazové řádky prostě napsat

mogrify -quality 80 -geometry ‚800×800>‘ *.jpg

vlajka -geometry zadává velikost finálního obrázku. Poměr stran je zachován automaticky, pokud ho chceme nezachovat, za čísla výškaxšířka musíme napsat !. Menšítko znamená, že se zmenší jen větší obrázky. V příkladu nahoře by úplně stačilo napsat 800, protože předpokládáme, že nemáme obrázek, který by byl menší a pokud je přítomné jen jedno číslo, použije se pro výšku i pro šířku.

Ač se celý balík jmenuje ImageMagick, žádný program stejného jména v něm nenajdeme. Jeho hlavní součástí jsou programy convert a mogrify – mogrify pracuje přímo se vstupním souborem a nevratně ho mění, zatímco convert dostává jako parametr vstupní a výstupní soubor. Pokud chci tedy vygenerovat náhledy fotek, stačí mi do bashe napsat:

mkdir thn for FILE in *.jpg do convert -quality 70 -thumbnail ‚133×133>‘ $FILE thn/$FILE done

ImageMagick existuje i pro Windows, ale když už s ním mám pracovat ve Windows, raději spustím Cygwin, nebo Irfan :)

Kam s ním?

Výsledný obrázek se hodí k nahrání na web. Na FTP, do galerie… Pokud pracujete s nějakou galerií, která má na nahrávání fotek vlastní desktopový program (třeba Rajče), není třeba fotky většinou zmenšovat. Program si to zařídí sám.
U ostatních galerií je to případ od případu jiné. Většina z nich fotky upravuje na určitou velikost, a tím, že je zmenšíte už u sebe, jednak ušetříte lince (při posílání fotek na server), ale taky dané galerii (menší fotka stojí méně prostředků k dalšímu zpracování a někdy to zpracování dokonce ani není nutné).
Co mě překvapilo je yahoo, které asi věří ve znalosti svých uživatelů, protože fotky do Yahoo Pohotos ani do blogů Yahoo 360° vůbec nezmenšuje a jen je zobrazí scvrklé právě tím způsobem, který je popsán v perexu.

Computer$, (Web)design