Grafické formáty

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 Ne 4 miliardy
(32 bitů)
Ne 4 miliardy
(32 bitů)
Gama korekce Ne   Ano  
Průhlednost 2 úrovně
(1 bit)
Ne 256 úrovní
(8 bitů)
256 úrovní
(8 bitů)
Komprese bezztrátová ztrátová bezztrátová bezztrátová
Proklad Ano Ano Ano Ne
Animace Ano Ne Ne Ne
Vrstvy Ne Ne Ne Ano

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ě.

  1. Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
    • velikost: 16x16 px
    • počet barev: 16 (4 bity)
  2. Vrstva (hlavní panel systému atd.):
    • velikost: 32x32 px
    • počet barev: 256 (8 bitů)
  3. 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 Realfavicongeneratoryes

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:

  1. apple-touch-icon-57×57-precomposed.png
  2. apple-touch-icon-57×57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png (129x129 px)
  5. 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. enlightened 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
  • formát pro stopy štětce
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

  • nativní formát aplikace Inkscape
  • umožňuje ukládat společně rastrovou i vektorovou grafiku
  • založen na jazyce XML
  • příklad využití SVG formátu na webu: Demonstration of the SVG Checkbox and Radio Button Object
  • jednoduchý on-line SVG editor
  • podpora v prohlížečích: IE9+ (IE6+ s Chrome Frame rozšířením), Firefox 1.5+, Opera 9.50+, Safari 4+, Chrome 1+

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.)