Příprava obrázků
Datový formát - Grafický program - Datový objem - JPG - GIF - Prokládání - Další formáty - Průhledné obrázky - Animované gify - Sejmutí obrazovky
Datový formát
Obrázek je soubor. Na internetu se běžně používají čtyři grafické formáty -- *.jpg a *.gif, *.png a *.svg. Stručně řečeno jpg je nejlepší na fotografie, svg na vektorovou grafiku, gif a png na všechno ostatní.
Jak udělat obrázek (pro začátečníky)
Jak se třeba dá získat obrázkový soubor:
- Stáhnout z webu pomocí příkazu uložit obrázek jako (save image as) a uložit na disk.
- Najít někde na disku nebo použít sbírky obrázků, které se dodávají s některými programy.
- Nakreslit si obrázek myší v grafickém programu a uložit to jako gif nebo jpg.
- Vytáhnout z digitálního foťáku (pak je většinou potřeba v gr. programu zmenšit).
- Naskenovat a uložit, také v grafickém programu.
- Sejmout obrazovku z nějakého programu a upravit v grafickém programu.
Jinými slovy, možností je více, ale cílem musí být soubor ve formátu .png, .gif nebo .jpg Ten se pak vloží do stránky.
Grafický program
Existují jich stovky.
- Adobe Photoshop se dá také použít, ale je dražší, jde o profesionální nástroj. Je zaměřený na obecnou bitmapovou grafiku a nástroje pro web má skoro jenom jako doplněk. Přijde mi těžký na ovládání, ale asi je to věc zvyku.
- Windowsovské Malování od verze 2000 umí také ukládat do jpg, gif a png, ale protože neumožňuje nastavovat kvalitu a má mnoho omezení, pracuje se s ním jen v nouzi.
- Já používám placený program Paint Shop 8. Pro současné potřeby webové grafiky je téměř dokonalý, je trochu těžší, ale mně vyhovuje.
- Všechny výše zmíněné programy nejsou zdarma. Dobrý bezplatný grafický editor je PhotoFiltre, dokonce má češtinu a český návod na složitější věci.
- Na Linuxu kraluje v grafických programech Gimp (který je zdarma i pro Windows), jeho ovládání ovšem ne každému vyhovuje (třeba já si na něj nemůžu zvyknout).
- Další bezplatné editory popisuje Daniel Dočekal
- Na vektorovou grafiku je nejlepší bezplatný program Inkscape. Ukládá nativně do svg.
- Dále existuje spousta polo-editorů, které umějí třeba jenom ořezávat a optimalizovat.
- Prohlížeče obrázků umožňují obrázky též zmenšovat, přebarvovat a ořezávat (nikoli dokreslovat). Já mám rád IrfanView (zdarma)
Hlavním kritériem použitelnosti editoru je, zda umí ukládat do jpg a gif. Novější verze Malování už to umějí.
Datový objem
Hlavní přikázání webového grafika zní: obrázky se nesmějí dlouho stahovat, musejí být co nejmenší. Proto jsou gif i jpg formáty kompresní.
| forma | optimum | snesitelné maximum |
|---|---|---|
| tlačítko | 2 kB | 10 kB |
| pozadí stránky | 2 kB | 20 kB |
| reklamní baner | 8 kB | 25 kB |
| fotografie | 20 kB | 250 kb |
| zmenšenina fotky | 5 kB | 10 kB |
| ilustrační obrázek | 10 kB | 50 kB |
| obrázkový nadpis | 3 kB | 8 kB |
| diagram, komix | 100 kB |
Dávat na web obrázek větší než takových 250 kB je vcelku nesmysl, protože se na jedné obrazovce stejně nemůže patřičně zobrazit. Od roku 1999, kdy jsem psal tento text, se datově akceptovatelné limity trochu posunuly nahoru, ale i tak platí, že čím datově menší, tím lépe (aktualizace 2017).
JPG
Formát JPG (též JPEG) je vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. Jpeg neumožňuje dělat průhledné nebo animované obrázky. Ukládá se do souborů s příponou .jpg nebo jpeg.
JPG používá ztrátovou kompresi, to znamená, že část informace vypouští. Dělá to tak, aby to lidské oko pokud možno nepoznalo. Míra této komprese se dá nastavit v grafickém programu. Ale pozor, po každém znovuotevření a uložení se opět provádí komprese, takže se tím obrázek stále znehodnocuje. Je proto dobré mít předlohu uloženou v něčem neztrátovém a po každé úpravě importovat do jpg.
GIF
GIF také používá kompresi, ale neztrátovou, takže jsou ty soubory relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Může se v něm vyskytovat maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace.
Barevná hloubka GIFu
Na Internetu záleží na každém bitu, a proto čím jsou obrázkové soubory menší, tím lépe. Je zbytečné kódovat v gifu 256 barev, když používá třeba jenom dvě nebo čtyři. Pokud se v grafickém programu sníží barevná hloubka (počet barev), podstatně se ušetří velikost souboru (u černobílého souboru až osminásobně). Postup při snižování počtu barev se opět liší od programu k programu. V angličtině je to obvykle příkaz "decrease color depth" nebo "export - bitmap".
Proužkování
Z datového formátu GIFu vyplývá zajímavá vlastnost: pokud řádek bodů obsahuje jenom jednu barvu, velmi se šetří datový objem. Jednoduchý gif obsahující zejména barevné proužky (a málo přechodů) se tedy uloží velmi úsporně.
PNG
O grafickém formátu PNG nevím skoro nic. Jenom to, že funguje výborně a nemá omezení gifu. Hodí se na diagramy, pozadí, nákresy a veškerou ilustrační grafiku, zejména pokud potřebuje poloprůhlednost. V PNG se totiž dá nastavit každému pixelu kromě barvy také průhlednost tak zvaným alfa kanálem. Na rozdíl od GIFu to není jenom prostá informace průhledné/neprůhledné, ale i na kolik procent to má být poloprůhledné.
PNG na rozdíl od GIFu nelze animovat.
Komprese PNG je průměrně o 20 % lepší než u GIFu.
Prokládání (progresivní vykreslování)
Při ukládání souborů JPG, PNG i GIF se dá nastavit, zda se mají vykreslovat prokládaně. Konkrétní postup nastavení prokládání při ukládání obrázku závisí na použitém editoru. V anglických editorech se to jmenuje "interlaced" nebo "progresive encoding".
Normálně se obrázky vykreslují po řádcích odshora, ale když se nastaví toto prokládání, tak se napřed vykreslí zamlžené, ale celé. Jak postupně docházejí další data, tak se zobrazení zpřesňuje. Je to hezké.
SVG
Obrázek ve formátu SVG je XML popis vektorové grafiky. Dá se běžně používat od roku 2016. Kromě ukládání jako soubor a použití normálně v tagu <img src="něco.svg"> se dá jazykem SVG zapsat i přímo do HTML stránky (to je spíše pro pokročilé).
SVG jako svůj nativní formát používá volně dostupný grafický program Inkscape.
Další formáty
Prohlížeče v sobě mohou mít i podporu jiných formátů; kupříkladu IE podporuje minimálně bmp. Ale takový bmp soubor rozhodně nedoporučuji do stránek zařazovat, protože je moc velký a prohlížeče kromě IE jej stejně číst neumějí.
Převážná většina netradičních grafických formátů potřebuje ke svému zobrazení plug-in, což je podpůrný program prohlížeče. Chcete-li umístit na stránky něco hodně divokého, musíte si na webu najít rozšíření a uživatelům dát možnost si ho stáhnout. Obrázek pak nezadávat jako <img>, ale jako <object> nebo <embed> s odkazem na umístění rozšíření.
Průhledné obrázky
V grafickém editoru můžete udělat gif, který bude mít některé části průhledné. Výhody jsou tyto:
- pod obrázkem se může vykreslovat pozadí
- pokud změníte barvu pozadí stránky, nemusíte se o obrázek starat
- při použití animací, pozicování a různých obtékání působí barevné okraje obrázku rušivě.
Zprůhlednění se v každém grafickém editoru dělá jinak, idea je taková, že se vybere jedna barva a ta se nastaví jako průhledná. Jak na to:
- Snižte barevnou hloubku nejvýše na 256 barev, raději méně.
- Všechny oblasti, které mají být průhledné, vyplňte nějakou barvou (doporučuji něco kontrastního, třeba fialovou, stejně pak zmizí).
- Tuto barvu pak nastavte jako průhlednou. Většinou na to existuje příkaz, který dovoluje ťuknout na tu barvu. Pokud máte anglický grafický editor, hledejte příkaz, ve kterém se vyskytuje slovo "transparent" (angl. průhledný). Dost často se to dělá až při ukládání obrázku (případně nějakým příkazem "uložit pro web" nebo "optimalizovat" nebo tak). V každém programu to je jiné.
- Uložte jako gif.
Opravdovým problémem průhledných gifů jsou různé přechody a okraje ploch, které obsahují mnoho přechodových odstínů. Na jiné barvě pozadí potom budou po okrajích tečkované. Takové obrázky doporučuji raději dávat do jpg a zprůhlednění oželet.
Jiným problémem může být to, že je potřeba zprůhlednit více než jednu barvu. To nejde. Je potřeba všechny takové odstíny převést na jeden a ten zprůhlednit.
Když se průhledné obrázky tisknou, místo průhledné barvy se netiskne nic. Kdyby byl pod obrázkem jiný objekt (např. pozicovaný), nevytiskne se.
Poloprůhledné PNG
Obrázek ve formátu png může mít některé oblasti poloprůhledné. Poloprůhlednost se nastavuje v grafickém programu a obvykle je to o něco těžší než průhledná barva. Hledejte nějaký příkaz, který pracuje s alfa kanálem. Nejčastější použití poloprůhlednosti je na okrajích grafických tlačítek, aby dobře zapadly do pozadí.
Internet Explorer od verze 7 poloprůhledný png umí, ostatní prohlížeče taky.
Animované gify
Formát gif dovoluje poskládat v sobě několik obrázků a sestavit z nich animaci. Musíte na to mít nějaký speciální program, většinou se to jmenuje "bla bla Animator". V normálním editoru si připravíte grafické sekvence, které v animátoru poskládáte, nastavíte časování a uložíte do gifu. Animované gify se ve stránkách používají úplně stejně jako normální gify, což je fantastická výhoda.
Nevýhodou animovaných gifů je značná rušivost pro čtenáře (takže se používá prakticky pouze v reklamách) a někdy i dost velký datový objem.
Sejmutí obrazovky
Když chci udělat obrázek z toho, co mám na obrazovce, použiju klávesu Print Screen (nahoře nad insertem). V tu chvíli se do schránky vloží obrázek aktuální obrazovky (bez ukazatele myši). Ten se dá pak vložit do nějakého grafického programu příkazem Vložit (Ctrl + V) a upravit.
Zkratka Alt + Print Screen sejme pouze aktivní okno. To je často dost pohodlné, protože se to pak nemusí ořezávat.
Reklama
