Rastrové (bitmapové) formáty
Přehled základních rastrových formátů
Vlastnost |
GIF |
JPEG |
PNG |
TIFF |
Model RGB |
256 barev
(8 bitů) |
16 milionů
(24 bitů) |
16 milionů
(24 bitů) |
16 milionů
(24 bitů) |
Model CMYK |
|
4 miliardy
(32 bitů) |
|
4 miliardy
(32 bitů) |
Gama korekce |
|
|
|
|
Průhlednost |
2 úrovně
(1 bit) |
|
256 úrovní
(8 bitů) |
256 úrovní
(8 bitů) |
Komprese |
bezztrátová |
ztrátová |
bezztrátová |
bezztrátová |
Proklad |
|
|
|
|
Animace |
|
|
|
|
Vrstvy |
|
|
|
|
GIF (Graphics Interchange Format)
- určení: archivace, webová grafika, nadpisy, plakáty, loga
- nevhodné pro: barevné fotografie
JPEG (Joint Photographic Experts Group)
- určení: fotografie, hladké přechody v tónu a barvě
- nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky (rušivé artefakty)
PNG (Portable Network Graphics)
- určení: archivace, text, čárová grafika, čisté barevné plochy a ostré rozhraní barev
- nevhodné pro: fotografie (5-10x větší soubor oproti JPEG)
- průhlednost PNG umí až IE7+
- pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku
TIFF (Tag Image File Format)
- určení: tisk, archivace obrázků
ICO
Ikona favicon.ico (Favorite Icon – favicon) usnadňuje uživateli vizuální odlišení jednotlivých webů. Obsahuje několik vrstev stejného obrázku v různé kvalitě.
- Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
- velikost: 16x16 px
- počet barev: 16 (4 bity)
- Vrstva (hlavní panel systému atd.):
- velikost: 32x32 px
- počet barev: 256 (8 bitů)
- Vrstva (pracovní plocha atd.):
- velikost: 48x48 px
- maximální počet barev: 232 (32 bitů)
Asi nejrychleji můžete vytvořit ale hlavně zkontrolovat funkčnost favicony pomocí online služby Realfavicongenerator.
Další rozměry:
- Favicon
- favicon-16x16.png - The classic favicon, displayed in the tabs
- favicon-32x32.png – Main panel, Safari on Mac OS
- favicon-48x48.png – Desktop
- favicon-96x96.png - Google TV
- favicon-160x160.png - Opera Speed Dial
- favicon-192x192.png - Android Chrome M36+
- Apple Icons
- apple-touch-icon.png
- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch
- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7
- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≤ 6
- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≥ 7
- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS ≤ 6
- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS ≥ 7
- apple-touch-icon-144x144.png - iPad (with 2× display) iOS ≤ 6
- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS ≥ 7
- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS ≥ 8
- apple-touch-icon-precomposed.png (180x180)
- Windows 8 Icons
- mstile-70x70.png - Windows 8.1 / IE11
- mstile-144x144.png - Windows 8 / IE10
- mstile-150x150.png - Windows 8.1 / IE11
- mstile-310x150.png - Windows 8.1 / IE11
- mstile-310x310.png - Windows 8.1 / IE11
- Apple Startup Images
- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait)
- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape)
- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait)
- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape)
- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5
- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina)
- apple-touch-startup-image-320x460.png - iOS 6 iPhone
Odkaz na ikonu umístěte do hlavičky (X)HTML dokumentu:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Nejlepším místem pro soubor favicon.ico je kořenový adresář (root) webu.
apple-touch-icon.png
Apple zařízení iPhone, iPod a iPad hledá pro zobrazení ikony webu na plože níže uvedené soubory:
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png (129x129 px)
- použije se náhled webu (ovšem v logu webu budou chybová hlášení 404 – soubor nenalezen)
Obrázky se umisťují buď přímo do kořene webu nebo se pomocí meta tagu k nim definuje cesta (jedna):
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
nebo více cest pro každý rozměr (57x57, 72×72, 114×114 a 129x129 px) zvlášť:
<link rel="apple-touch-icon" sizes="57×57" href="images/apple-touch-icon-ipad-57.png" />
<link rel="apple-touch-icon" sizes="72×72" href="images/apple-touch-icon-ipad-72.png" />
<link rel="apple-touch-icon" sizes="114×114" href="images/apple-touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="129×129" href="images/apple-touch-icon-iphone-129.png" />
V nejjednodušší variantě stačí pouze umístit do kořene webu apple-touch-icon.png o rozměrech 129x129 px. Zařízení si velikosti přizpůsobí dle potřeb (k zakulacení rožků dochází automaticky). Při použítí pouze souboru apple-touch-icon.png nebudou použity žádné další efekty.
Tvorba a editace
Asi nejrychleji můžete vytvořit favicon pomocí online služby Bradicon. Pro vytváření a editaci je možné použít např. aplikaci Gimp.
Poznámka:
V Internet Exploreru se ikona zobrazuje až po přidání webové stránky do oblíbených položek.
XCF
- nativní formát aplikace Gimp
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
PAT
- formát obrázků používaných nástrojem Plechovka a Razítko pro výplně vzorkem
- v aplikaci Gimp se ukládají do adresáře
patterns
ABR
GBR
- formát pro stopy štětce
- mód:
- RGB – otisk štětce je barevnou kopií stopy
- odstíny šedi – pro otisk se použije aktuální barva popředí
GIH
- formát pro animované stopy štětce citlivé na směr pohybu štětce
PSD
- nativní formát aplikace Adobe Photoshop
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
CPT
- nativní formát aplikace Corel PHOTO-PAINT
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
TGA
- textury 3D modelovacích programů
Vektorové formáty
SVG
AI
- nativní formát aplikace Adobe Illustrator
- umožňuje ukládat společně rastrovou i vektorovou grafiku
- lepší vektory než EPS
CDR
- nativní formát aplikace CorelDraw
- umožňuje ukládat společně rastrovou i vektorovou grafiku
PS (PostScript)
- nezávislý na zařízení, na kterém se má tisknout
- tisknutelná oblast je celý list papíru
EPS (Encapsulated PostScript)
- nezávislý na zařízení, na kterém se má tisknout
- tisknutelná oblast je pouze obrázek
- umožňuje ukládat společně rastrovou i vektorovou grafiku
- lepší barvy než AI
Digitální negativ
RAW [ro:] (surový, nezpracovaný)
- data digitálního snímače, která nejsou nijak zpracovaná (soubor RAW není jako obrázek přímo použitelný, ale obsahuje všechny potřebné informace k jeho vytvoření)
- vlastnosti fotografie (např. vyvážení bílé) se dají upravit ještě stažením do počítače
- každý výrobce používá svoji vlastní příponu RAW soboru (RAW, NFG, DNG, CRW, CR2, NEF, ORF, MRW atd.)