Dobrý den, milí čtenáři tohoto blogu. Dnes chci mluvit o formátech rastrové grafiky, které bylo vhodné použít pro obrázky zobrazené na webu a obecně.

Podíváme se na Gif, který je nyní oblíbený právě díky podpoře GIF animací, Jpg, který se velmi dobře hodí pro vkládání plnobarevných fotografií a samozřejmě Png, který umožňuje vytvářet obrázky s průhledným pozadím a může sloužit jako výborná náhrada dříve zmíněných formátů. Můžete také číst z poloviny grafiku a polovinu textu.

Všechny jsou aktivně využívány, ale trikem je zvolit optimální formát pro každý konkrétní případ tak, aby neutrpěla kvalita obrazu a jeho hmotnost byla minimální. Doporučuji vám vzít si samotnou grafiku z bezplatných služeb, jako je tato a další podobné, aby později nebyly problémy s porušováním autorských práv.

Rastrová grafika pro web ve formě GIF, JPEG a PNG

V dnešní době je velmi obtížné si představit jednotlivé webové stránky bez fotografií, ikon nebo obrázků na nich. Mimochodem, první prohlížeč, který uměl zobrazovat grafiku, byl Mosaic (mozaika), který se objevil téměř současně s příchodem .

Navíc, jak jsem uvedl výše, ne všechny formáty obrázků jsou vhodné pro přidání na stránky, ale jen některé, maximálně k tomu přizpůsobené - Gif, Png a Jpg. Podle typu obrázku, který chcete na webovou stránku přidat, si budete muset vybrat některý ze zmíněných formátů, které zase patří mezi tzv. rastrovou grafiku.

To samo o sobě znamená, že obraz na papíře nebo na monitoru bude tvořen tzv. jednotlivými prvky zvanými pixely (barevné body). Všechny obrázky jakéhokoli formátu související s rastrovou grafikou mají určité vlastnosti.

Velikost obrázku je určena takovým konceptem, jako je povolení, což je horizontální a vertikální, například 300 na 200. Někdy však o celkovém počtu pixelů na obrázku mluví například výrobci fotoaparátů (12 Mega pixelů atd.).

Ve vztahu k webu může fyzická velikost rastrového obrázku výrazně záviset na velikosti pixelu (zrnitosti obrazovky) zařízení, na kterém uživatel webovou stránku prohlíží. Obrázky se vyznačují i ​​takovým pojetím jako počet barev použitý v něm. Například Gif používá pouze 256 barev, které jsou specifikovány v jednom bajtu informace.

Kromě toho mohou tyto formáty používat různé barevné modely, s jehož pomocí se tvoří všechny možné odstíny. Když jsme s vámi diskutovali o psaní, podrobně jsme se podívali na principy tvorby RGB modelu.

Jednou z hlavních nevýhod rastrové grafiky je velká velikost výsledných obrázků, a to i ve formátech Gif, Png a Jpg, které se na webu používají. Přirozeně, pro zmenšení výsledných obrázků, různé kompresní algoritmy, které fungují jak s degradací kvality (ztrátovou kompresí), tak bez ní.

To vše je velmi podobné principům fungování algoritmů komprese zvuku - MP3 komprimuje se ztrátami a především jsou odstraněny všechny přechody, které s největší pravděpodobností nebudou vnímány lidským uchem. Takovou obdobou ve světě rastrové grafiky může být Formát Jpg, ve kterém se provádí komprese informací se ztrátami. Přitom jsou zohledněny možnosti lidského zrakového vnímání a především jsou odstraněny ty detaily, které nebudou nijak zvlášť nápadné.

Existují však také bezeztrátové algoritmy komprese obrázků - BMP, Gif a Png. BMP nejčastěji není komprimovaný obrázek, ale Gif a Png jsou komprimovány bezeztrátově odstraněním opakujících se a nadbytečných informací (ukáže se něco jako archivace, ale s přihlédnutím k vlastnostem rastrové grafiky).

Existuje mnoho grafických editorů, které dokážou pracovat s rastrovou grafikou (například stejný Photoshop nebo on), ale měli byste používat editory, které jsou zaměřeny speciálně na toto, protože jen tak budete moci získat co nejvíce optimalizované obrázky, které pak nebudou zbytečně zatěžovat váš hostingový server při jejich načítání do prohlížečů uživatelů.

Formát GIF – prvky návrhu a animace pro web

V současné době téměř všechny prohlížeče podporují tři hlavní formáty rastrové grafiky používané pro web – Gif, Png a Jpg. Historicky jako první se objevil GIF a právě s jeho pomocí bylo možné v prvních prohlížečích přidávat a zobrazovat obrázky a mediální informace, které byly primárně vyjádřeny v tzv. GIF animaci.

Zkratka Gif znamená Graphics Interchange Format. Vyslovováno jako gif, ale vývojáři standardu věřili, že je správné ho nazývat jif, ale v ruské interpretaci se zakořenilo jiné jméno.

Protože byl vyvinut už dávno a většina tehdejších uživatelů měla, ach, tak málo a při jeho tvorbě byl kladen hlavní důraz na minimalizaci velikosti výsledného obrázku (psal jsem o tom v článku o nebo).

V tomto ohledu může Gif obsahovat paletu obsahující pouze z 256 barev(nazývá se také indexovaná paleta). Tito. obrázek převedený do tohoto formátu bude vždy obsahovat maximálně 256 odstínů a všechny ostatní barvy budou vytvořeny na základě míchání (sousední pixely základní palety jsou chytře vybrány tak, aby je lidské oko na dálku vnímalo jako barva potřebná na tomto místě).

Ale bohužel v praxi se při převodu plnobarevných fotografií do GIFů objeví hromada artefaktů (kvůli právě tomuto míchání), díky kterým jsou fotografie nepřijatelné pro zveřejnění na internetu. Neslouží tedy k zobrazování plnobarevných obrázků a fotografií na webových stránkách (k tomu se nejčastěji volí Jpg nebo Png).

Gif animace a její použití na internetu

S tak významnou nevýhodou by měl Gif dávno upadnout v zapomnění, ale je stále živější než všechno živé a obrázky v tomto formátu lze často najít na webových stránkách.

Celý úlovek je v tom Formát GIF podporuje animaci(jediný používaný na webu). Všechny druhy animovaných a (včetně), které můžete najít ve velkém množství na internetu, mají příponu GIF.

Pravda, již nějakou dobu se vyvíjí alternativní formát Mng, který přidává možnost animace v Png, ale jeho vývoj a distribuce nejde příliš vysokým tempem. Pokud tedy neberete v úvahu technologii flash, veškerá animace na webu je vytvořena na základě Gif a flash.

Podstatou této animace je, že GIF kontejner neobsahuje jeden obrázek, ale několik najednou a je tam napsána i doba, po které se tyto obrázky nahradí. V tomto případě bude možné animaci zacyklit, kdy po posledním snímku začne znovu zobrazení toho prvního.

Existují specializované editory, ve kterých můžete vytvářet animace Gif. Hlavní věcí je vytvořit požadovaný počet obrázků určité velikosti a poté je umístit na časovou osu a nastavit interval pro jejich změnu.

Výsledkem je stejný kreslený efekt, na který jsme již zvyklí vídat na webových stránkách. Někdy i oči oslní z animovaných bannerů (přečtěte si jak), emotikonů, avatarů. Příkladem animace GIF je goblin ze stránky „ “ mého projektu.

GIF podporuje průhledné pozadí (téměř)

Animace však není jedinou funkcí tohoto formátu. Může také podporovat primitivní způsob vytváření průhlednosti pro vytvořené obrázky. Jedna z 256 možných barev v Gif je nastavena na transparentní a přes něj se zobrazí pozadí webové stránky, na kterém bude tento obrázek umístěn.

Problém je ale v tom, že pro jakýkoli pixel v obrázku tohoto formátu jsou možné pouze dvě hodnoty - transparentní nebo neprůhledné (dva extrémní stavy bez možnosti mezilehlých možností jako průsvitný, čtvrtinový průhledný atd.). Tito. o konceptu alfa kanálu (používá se v Png), v průhledný Gif není žádná otázka. To ztěžuje zobrazení plynule se měnících úrovní průhlednosti.

Ale přesto transparentní GIF najde uplatnění na webu. V tomto formátu jsou často uloženy například různé značky používané na webových stránkách. Pozadí kolem značky je průhledné a bude přes něj prosvítat pozadí webové stránky. Takto by například vypadala značka s šedým pozadím:

A takto bude stejná značka vypadat při nahrazení šedého pozadí průhlednou barvou při ukládání jako GIF:

Aby v obrázcích Gif vytvořili hladké okraje s poklesem průhlednosti, používají jeden trik. V libovolném grafickém editoru budete mít při vytváření obrázku v tomto formátu možnost zadat tzv. MATE barvu (jinak se jako ní použije výchozí barva, obvykle bílá).

Barva MATE je přimíchána do oblastí Hypha, kde chcete vytvořit hladké okraje s poklesem průhlednosti, ale to vše bude vypadat dobře pouze pro pozadí webové stránky, které odpovídá zadanému MATE. Ale kromě jiného odstínu tento obrázek nebude vypadat moc dobře.

Pro jakou webovou grafiku má smysl používat formát Gif?

Jak jsem uvedl výše, v tomto formátu jsou obrázky komprimovány (převáděny) beze ztráty, ale pouze pokud byl původní obrázek 8bitový (pro kódování barev byl přidělen pouze jeden bajt), tzn. obsahuje 256 barev. Pokud by byl zdroj plnobarevný, tak dojde ke zhoršení kvality při ukládání nebo převodu do Gif právě kvůli ztrátě některého z odstínů.

Kompresní (konverzní) algoritmus v Gifě funguje tak, že nejlépe optimalizuje velikost fotografie s vertikální změnou barvy (gradient). Tito. Má smysl jej používat ke kompresi obrázků, jejichž barva v řádcích se příliš nemění.

Ale při převodu fotografie s vodorovným nebo šikmým přechodem na Gif se může výsledný obrázek ukázat jako velmi velký, například ve srovnání se stejným Png. No, kromě toho se mohou objevit nepříjemné artefakty.

Tento kompresní algoritmus byl navíc svého času patentován, a proto se začalo intenzivně pracovat na alternativním Png 8, ale v tuto chvíli již patenty Gif vypršely. PNG skončil jako hlava a ramena nad GIF a nadále získává na popularitě mezi webmastery.

Jpg (JPEG) - plnobarevné obrázky s nízkou hmotností

Jpg byl navržen pro kompresi a ukládání plnobarevných fotografií. Je majetkem Asociace amerických fotografů, což ve skutečnosti znamená zkratka Jpeg - Joint Photographic Experts Group. I když tato asociace sama říká, že se jedná o otevřený formát.

Jak jsem zmínil výše, komprimuje obrázky se ztrátou kvality. Celý obrázek se rozdělí na čtverce o rozměrech 8 x 8 pixelů a poté začne pracovat kompresní algoritmus, který z těchto jednoduchých čtverců seskupuje různé jednoduché tvary. Všechny ty rozdíly v barvách, které lidské oko není schopno zaznamenat, jsou z obrázku Jpg odstraněny.

Výhody a nevýhody JPEG

Odstraněním některých informací, které by stejně nebyly pouhým okem patrné, Jpeg někdy umožňuje komprimovat plnobarevné obrázky desítkykrát i bez viditelné ztráty kvality.

Ale na druhou stranu, i když zvolíte maximální kvalitu, fotku v tomto formátu neuložíte v absolutně stejné kvalitě jako originál. Ztráty určitě budou, ale ne vždy znatelné okem bez zvětšení.

Můžete si to ověřit sami tím, že pořídíte velmi kvalitní fotografii a uložíte ji v Japegu v maximální kvalitě několik desítekkrát za sebou. Proto je to lepší neukládejte znovu jako Jpg zdrojové soubory stejného formátu – dojde k vážným ztrátám kvality v důsledku hromadění a překrývání artefaktů. Nedokončený obrázek byste proto neměli ukládat jako JPEG a poté pokračovat v jeho úpravách – výrazně tím ztratíte kvalitu.

Zde je příklad takového výsměchu (stačí pár opakovaných uložení ve formátu Jepeg a nebudete se moci dívat na obrázek bez slz):

Ale i přes tyto nedostatky Jpeg se stal velmi populární zejména od nástupu digitální fotografie. Jeho hlavní předností je možnost rychlé, na zdroje náročné a velmi silné komprese plnobarevných obrázků. Je pravda, že je obtížné nazvat tento formát rastrové grafiky plnobarevný, protože nepokrývá úplně celou paletu RGB, ale to lze přičíst menším nedostatkům.

Které obrázky se nejlépe ukládají ve formátu Jpg?

Jpg je nejlepší pro ukládání fotografií s hladkými přechody jasu a kontrastu, ale pro uložení něčeho jako jsou kresby, texty a další fotografie s ostrými kontrastními přechody se velmi špatně hodí a v tomto případě by bylo nejlepší použít bezztrátovou kompresi v Png.

Podívejte se, jak nevzhledně vypadá snímek obrazovky s textem ve formátu JPEG (i když se stejnou nebo dokonce menší váhou ve formátu PNG by byl obrázek k nerozeznání od originálu):

Jpg (JPEG), jak jsem již zmínil, má schopnost nastavit kvalitu výsledný obrázek úpravou stupně komprese. Při ukládání fotografií, které mají například hodně oblohy, byste měli nastavit kvalitu Jpeg (úroveň komprese) blízko maxima (minimální komprese), abyste se vyhnuli znatelným artefaktům právě na této obloze.

A při ukládání fotografií s mnoha detaily různých barev můžete snížit kvalitu (zvýšit kompresní poměr) bez obav z výskytu znatelných artefaktů.

Zmínil jsem, že při ukládání jako Jpg (JPEG) se celý obrázek rozdělí na čtverce o straně osm pixelů. Pokud tedy máte možnost vybrat si velikost výsledné fotografie, pak je to lepší vzít v násobcích osmi, protože v tomto případě získáte o něco méně artefaktů, což bude patrné zejména na obrázcích s tenkými čarami atd.

Png - náhrada za Gif a Jpeg, stejně jako průhledné pozadí v Png32

Zpočátku byl Png vyvinut jako alternativa k Gif, který byl v té době proprietární (nikdo zvenčí do jeho vývoje nesměl). Zkratka znamená „přenosná síťová grafika“, pro kterou byla původně navržena pro použití na webu. Tento formát rastrové grafiky je zcela otevřený a jeho popis je na stránkách konsorcia W3C.

Dovolte mi, abych vám připomněl, že je bezztrátový kompresní formát, což znamená, že můžete bezpečně uložit nedokončený obrázek ve formátu Png a poté pokračovat v jeho úpravách bez obav ze získání dalších artefaktů, jako tomu bylo v případě Jpg.

Png8 a Png24 - plná náhrada za Gif a Jpeg

Existují tři varianty formátu PNG, z nichž každá je navržena tak, aby vykonávala své vlastní úkoly. První dva vznikly zpočátku jako alternativa k již existujícím formátům GIF a JPEG a třetí přinesl do webové grafiky něco, co tu do té doby vůbec nebylo. Ale nejdřív.

Png 8— osmička označuje barevnou bitovou hloubku a značí, že při ukládání fotografie v PNG 8 bude použito pouze 256 barev, podobně jako Gif již popsaný výše.

Tito. byl vyvinut jako plnohodnotná náhrada GIF a výsledky komprese obrazu v těchto dvou formátech rastrové grafiky budou téměř totožné. Stejně jako v Gif - zde podporována transparentnost, ale s alfa kanálem.

Png 24— číslo 24 znamená, že pro každý pixel fotografie v tomto formátu jsou přiděleny tři barevné kanály po 8 bitech (1 bajt), čímž je realizováno vytvoření plně barevného obrazu. Že. s pomocí Png 24 můžete přenášet barvy bez zkreslení. Ani Jpg to nedokáže stoprocentně.

Uložením původního obrázku do Png 24 získáte úplně stejnou fotografii, ale její velikost bude stále větší než při použití Jpegu. To však není vždy případ. U velkých obrázků s ostrými přechody může tento formát vykazovat ještě lepší výsledky než Jipeg přijatelné kvality.

Tito. jak jsem již zmínil výše, na běžné fotografie se nejlépe hodí Jpeg, ale pro obrázky s textem nebo tam, kde nelze za žádných okolností zhoršit kvalitu, bude Png 24 nepostradatelný. , který používám v článcích, se mi Png 8 nebo 24 jeví jako optimální řešení.

Například stejný snímek obrazovky s textem, který jste viděli nahoře uložený ve formátu Jpeg (ačkoli s nízkou kvalitou pro zvýraznění možných artefaktů) v Png, bude vypadat takto:

Obvykle si ale na začátek každého článku v Jeepu uložím plnobarevný obrázek, protože... Poměr kvalita/velikost hovoří ve prospěch této konkrétní možnosti. Hned řeknu, že existují různé způsoby, jak komprimovat obrázky do formátu Png, a jeden z nejlepších algoritmů se podle mého názoru používá v online službě Puny Png.

Png 32 - plná průhlednost s alfa kanálem

Asi jste analogicky pochopili, že v tomto formátu rastrové grafiky je možné na jeden pixel použít až čtyři bajty informace.

Tři jsou zodpovědné za vytvoření plně barevného obrazu analogicky s Png 24, ale čtvrtý bajt je přidělen samostatně, aby vytvořil alfa kanál, což umožňuje použití Png 32 k získání obrázky s průhledným pozadím.

V něm můžete určit změny stupně průhlednosti bez jakýchkoli barev MATE, což znamená, že takové obrázky budou vypadat stejně dobře na absolutně jakékoli webové stránce s jakýmkoli pozadím. Příkladem takového obrázku je logo ze záhlaví mého blogu:

To je snad jasné Png 32 je prostě nenahraditelný a nemá obdoby, pokud jde o možnosti, které poskytuje.. Mimochodem, alfa kanál lze použít i v PNG 8, ale bohužel ne všechny rastrové grafické editory vám to umožní. To neumí například Photoshop, ale Fireworks nebo Gimp ano.

Navíc Png 32 a 8 s alfa kanálem mají takový problém, že počínaje verzí 6 a nižší není plně podporován v prohlížeči IE a místo průhledného pozadí se bude míchat šedá barva a Png 8 s alfa kanálem se vůbec nezobrazí. Pravda, uživatelé už tak archaické prohlížeče prakticky nemají, ale stejně.

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

HTML a CSS – proč je potřebujete znát a proč je potřeba znalost PHP a MySQL, ale v mnohem menší míře

Víte, jaký je rozdíl mezi JPEG, GIF, PNG a dalšími formáty obrázků? Kdy byste měli použít ten či onen formát nebo který je nejlepší pro ukládání fotografií? Níže naleznete odpovědi na všechny tyto otázky.

V kontaktu s

Ztrátové/bezztrátové algoritmy komprese dat

Nejprve musíte pochopit rozdíl mezi ztrátovými a bezztrátovými algoritmy komprese dat. Bezeztrátová komprese je metoda komprese obrazu, která si zachovává svou kvalitu bez ohledu na to, kolikrát je soubor komprimován a obnoven.

Při použití ztrátové komprese se kvalita obrazu sníží pokaždé, když je soubor komprimován/dekomprimován. Jednou z nepochybných výhod této metody je možnost vyššího stupně komprese. Pro ukládání a úpravu fotografií je vhodnější bezztrátová komprese, pokud však potřebujete obrázek poslat emailem nebo publikovat na internetu, je lepší použít druhý způsob.

.DRSNÝ

Formát souboru obsahující nezpracované informace pocházející přímo ze snímače poloprofesionálních a profesionálních fotoaparátů. Tyto soubory nejsou zpracovávány procesorem fotoaparátu a obsahují všechny zachycené informace v „raw“ podobě. Velikost takových souborů může přesáhnout 25 MB. Soubory RAW jsou skvělé na úpravu, ale kvůli jejich velké velikosti nejsou příliš vhodné na ukládání.

.JPEG (JPG)

Toto je možná nejběžnější grafický formát. Obvykle se používá k publikování fotografií a obrázků s textem na internetu. JPEG je formát TrueColor, což znamená, že může ukládat obrázky s barevnou hloubkou 24 bitů/pixel. Tento formát dokáže zobrazit více než 16 milionů barev.

JPEG si získal svou popularitu díky svým flexibilním možnostem komprese dat. V případě potřeby lze snímek uložit ve vysoké kvalitě. Při použití algoritmu ztrátové komprese se kvalita obrazu ztratí při každém uložení souboru. Níže jsou obrázky JPEG ve vysoké, střední a nízké kvalitě.

Vysoce kvalitní JPEG (100). Velikost 113 kB

JPEG se střední kvalitou (50). Velikost 59 kB

JPEG nízké kvality (20). Velikost 27 kB

.GIF

Formát GIF (Graphics Interchange Format) nepotěší barevnou hloubkou (8 bitů). Dokáže uložit bezeztrátově komprimované obrázky v maximálně 256 barvách. Jednou z funkcí GIF je podpora animace.

.PNG

Tento formát byl vyvinut jako náhrada za GIF. PNG je zkratka pro Portable Network Graphics. Na rozdíl od GIF má PNG podporu pro přechody průhlednosti díky dalšímu alfa kanálu. Průhlednost je obvykle označena šachovnicovým pozadím, jak je vidět na obrázku níže.

Navenek se soubory ve formátu PNG prakticky neliší od obrázků JPG. PNG komprimuje data bez ztráty. Pokud je pro vás důležitá průhlednost, je lepší zvolit tento formát.

Při vytváření webových stránek ve fázi rozvržení je vždy úkolem vybrat jeden nebo jiný formát pro ukládání obrázků. Obrázky lze ukládat v libovolných formátech PNG, JPEG, GIF a desítkách dalších formátů, ale který formát byste si měli vybrat, abyste zprostředkovali nejlepší kvalitu při minimální velikosti výsledného obrazového souboru?

Jaký formát souboru mám zvolit?

formát GIF omezeno na 256 barev. Jedná se o bezztrátový formát a při jeho použití je dosaženo minimální komprese obrazu. Formát GIF podporuje animaci (jediný ze všech formátů) a průhlednost, ale nelze do něj uložit průsvitné obrázky. Vzhledem ke zvláštnostem algoritmu velmi dobře komprimuje obrázky, které mají svislé čáry (např. pro web to mohou být svislé dělící pruhy, jednobarevné ikony, grafické tečky atd.). ukládejte kresby, text a grafiku symbolů v malé velikosti souboru.

formát PNG je formát, ve kterém komprese probíhá beze ztrát. V tomto formátu má každý pixel 3 barevné kanály (RGB - červený, zelený, modrý), čímž dochází k vytvoření plně barevného obrazu bez zkreslení. Formát PNG může mít lepší kvalitu barev než JPG, ale velikost souboru bude také větší. Formát PNG podporuje různé úrovně průhlednosti (průsvitnosti). Vzhledem ke zvláštnostem algoritmu velmi dobře komprimuje obrázky, které obsahují vodorovné čáry. A když je úkolem vybrat uložení souboru ve formátu GIF nebo PNG, pro případy, kdy se obrázek skládá z primitivních řádků, je třeba věnovat pozornost poloze těchto řádků - tzn. Obrázky se svislými čarami byste měli ukládat ve formátu GIF, v PNG – horizontální. PNG je dobrou volbou pro ukládání kreseb, textu a ikonické grafiky v malé velikosti souboru.

formát JPG je formát, který trpí ztrátou barev. Algoritmus pro práci v tomto formátu je takový, že velmi dobře komprimuje obrázky s přechody (ukládají se barvy prvního a posledního pixelu v přechodu a při zobrazení obrázku se spočítají všechny mezilehlé barvy mezi těmito body), které je užitečný pro ukládání obrázků v menší velikosti než ve formátu BMP. Fotografie, přetečení, loga, pozadí atd. je lepší ukládat ve formátu JPG.

Při vývoji webových stránek tak můžete výběrem správného formátu pro ukládání obrázků dosáhnout velmi dobrých výsledků v rychlosti.

22. listopadu 2008 v 07:17

O formátu PNG. Krátká zkušební jízda

• webový design

Pozor, obrázků je hodně! Všechny jsou klikatelné.

PNG

Rastrový grafický formát PNG, který si v éře Webu 2.0 získává stále větší oblibu, se objevil již v roce 1995 jako náhrada starého dobrého GIFu (a částečně i TIFF). V té době se majitelé patentovaného GIF rozhodli účtovat čtyřmístné částky od všech vývojářů využívajících formát a svobodné komunitě nezbylo než nabídnout bezplatnou alternativu.

Jaké jsou tedy výhody formátu?

• Plná podpora pro alfa-transparentnost. Umožňuje zprůhlednit a zprůhlednit oblasti obrazu.
• Vysoce kvalitní kompresní algoritmus bez ztráty kvality. Podobné jako LZW, ale o něco efektivnější.
• Možnost prokládaného skenování a (na rozdíl od GIF) současně vertikálně i horizontálně.
• Vestavěná gama korekce. Umožňuje připojit k obrázku nastavení zobrazení, takže na různých monitorech se obrázek zobrazí přesně stejný jako obrázek autora.

Existují 2 verze formátu: PNG-8 (obdoba GIF – používá indexové barvy) a PNG-24 (bližší JPEG – plnobarevná paleta).

Protože PNG-24 používá plnou barevnou paletu, je obtížné ji srovnávat s GIF. PNG-8 se svou indexovou paletou je zde podobnější. Zde je několik snímků obrazovky pro srovnání:

Praxe (ale i názor kolegů) ukazuje, že GIF lépe komprimuje jednoduché malé obrázky. Ale pokud jde o velké obrázky, GIF stále zůstává pozadu.

Kromě toho další poměrně velká výhoda: ve skutečnosti, na rozdíl od všeobecného přesvědčení, PNG-8 může také používat úplný alfa kanál jako PNG-24. Photoshop to prostě nepodporuje, takže Sergey Chikuenok z Lebedevova studia doporučuje používat Adobe Fireworks, což jsem se rozhodl udělat (Něco o tom).

A v této bitvě, pokud nepotřebujeme transparentnost, PNG prohrává, abych tak řekl, ve „středním segmentu trhu“. I když, pokud propojíte ICC profil s JPEG, rozdíl v objemu se stane neviditelným, moje měření byla uvedena na JPEG 100%. stává ještě smutnější.

Obecně se podívejte sami:

UPD Obecně platí, že výsledky výrazně závisí na samotném obrázku: PNG komprimuje přechody a jednobarevné oblasti lépe, ale pro fotografie poskytuje nejlepší kompresi JPEG. I když, jak se říká (sám tomu těžko uvěří), ve velkých fotografiích je PNG vůdčí i zde – to bylo právě ověřeno v procesu převodu screenshotů pro článek (PNG versus JPEG-70 % – zisk jeden a jeden poloviční časy).

Život po Photoshopu nebo další kompresi

V mnoha situacích zůstává PNG naprosto nenahraditelné, protože průhlednost není běžně podporována žádným z alternativních webových formátů a jaký rozsah otevírá pro designéry a designéry layoutů... UPD Navíc s přihlédnutím ke specifikům formátu jde asi o nejlepší řešení designových prvků na webu.

Google a stáhněte si - . Program, asi 1,5 MB s minimálním počtem nastavení, umožňuje spouštět (včetně dávkového) soubory PNG s kompresí.

Na balíčku ikon (90 souborů s průhledným pozadím bez jakýchkoliv speciálních zvonků a píšťalek) byl nárůst objemu v průměru asi 10-15%. Nijak zvlášť působivé, samozřejmě. Ale pro výše uvedené příklady souborů se procento komprese pohybovalo od 10 % (velký plakát bez průhlednosti) do 72 % (průsvitné obdélníky). Takže to stojí za vyzkoušení, zejména proto, že práce s nástrojem nezabere mnoho času.

Kromě PNGOut existuje mnoho dalších programů, které teď nechci podrobně zkoumat:

• OptiPNG - nemá grafický shell a funguje z příkazové řádky. Podle neověřených údajů je procento komprese nižší. UPD ale její uživatelé tvrdí opak.
• Pngcrush - Sám jsem to nezkoušel, říká se "snaží se optimalizovat soubor všemi dostupnými způsoby", ale hlavní věc není "jak to zkouší", ale "jak to optimalizuje."
• a řadu nástrojů, které jednoduše vyčistí servisní odpad ze souborů.

Adobe Fireworks

Upřímně, Adobe Fireworks byl pro mě skutečný objev: PNG-8, PNG-24 a PNG-32 + spousta nastavení!

PNG-24 a PNG-32 jsem podrobně nezvažoval. Pokud jsem pochopil, v jejich terminologii je 32 s alfa kanálem a 24 je bez. Podle předběžných odhadů se s tímto úkolem lépe vyrovnává Photoshop.

Ale PNG-8 naboural všechny moje (a většinu mých kolegů) stereotypy. Výsledný soubor je mnohem menší než GIF a je zde plná podpora průhlednosti dvěma způsoby: průhlednost alfa a indexu Jedinou nevýhodou ve srovnání s PNG-24 je paleta indexů, i když to vše závisí na potřebách PNG-8 ve většině případů dělá GIF i PNG-24.

PNG vs GIF v AF, ačkoli Fireworks ve výchozím nastavení nefunguje příliš dobře s obvyklým GIF-JPEG (nehrál jsem si s nastavením). Ale i ve srovnání s výsledkem Photoshopu je rozdíl ve prospěch PNG:

A zde je veškerá rozmanitost PNG-8 - proto se vyplatí nainstalovat Adobe Fireworks:

Pro srovnání: stejný soubor díky úsilí Photoshopu vážil 3 188 bajtů oproti nyní získaným 450, tedy 6krát více.

Výrok

Podle mého názoru GIF již přežil svou užitečnost. Nyní je jeho existence především věcí setrvačnosti společnosti. UPD Segment různých animovaných lahůdek je však stále ponechán GIFu :).

Pro průhledné designové prvky byste měli použít PNG-8 (méně často PNG-24, když paleta PNG-8 nestačí k uložení obrázku beze ztrát).

U fotografií a složité grafiky je JPEG i nadále lídrem díky svým výkonným schopnostem optimalizace obrazu. I když v některých případech může být PNG-8 dostačující – stejně jako dříve i u GIF jsou klíčem k úspěchu odvážné experimenty. UPD Ale u opravdu velkých obrázků JPEG stále ztrácí.

UPD Opravdu nejsem odborník a recenze jsem psala na koleně, o čemž svědčí přídomek „stručný“; možná to nejsou nejlepší příklady. Proto děkuji všem, kteří se aktivně zapojili do diskuse, zvláště

Nyní má přední pozici formát jpeg. Díky své schopnosti několikanásobné komprese fotografií a barevných obrázků předčí formáty gif a png v minimální hmotnosti a bmp se stále „pase pozadu“.

V dnešní době je asi nemožné najít webovou stránku na internetu bez fotografií nebo obrázků. Dnes se to stalo normou při rozvržení jakýchkoli webových stránek, protože obrázky oživují, zdobí, doplňují hlavní obsah stránek a úspěšně se používají ve všech oblastech webu. Mimochodem, první prohlížeč, který uměl zobrazovat grafiku, byl Mosaic (mozaika), který se objevil téměř současně s příchodem hypertextového značkovacího jazyka Html.

V dnešní době téměř všechny prohlížeče podporují tři hlavní formáty rastrové grafiky používané pro web – Gif, Png a Jpg. Historicky se jako první objevil gif a právě s jeho pomocí bylo možné v prvních prohlížečích přidávat a zobrazovat obrázky a informace o médiích. Při jeho tvorbě se vývojáři zaměřili na minimalizaci velikosti uloženého obrázku.

Ostatně v té době byla rychlost internetu tak nízká, a aby načítání obrázků netrvalo „věčně“, byl vyvinut a aplikován speciální „grafický výměnný formát“ (to znamená zkratka GIF).

Zvláštností Gif je, že může obsahovat paletu pouze 256 barev. Tito. Obrázek převedený do tohoto formátu bude vždy obsahovat maximálně 256 odstínů, přičemž všechny ostatní barvy budou vytvořeny z mix-in. Ale právě kvůli tomuto míchání se při převodu plnobarevných fotografií do GIF objevují různé nečekané artefakty. Kvůli této zřejmé a významné nevýhodě se jpeg a png stále častěji používají k zobrazování plnobarevných obrázků a fotografií na webových stránkách.

Gif je ale ve webové branži stále populární z jednoho prostého důvodu – podporuje animaci, jedinou používanou na webu. Animované emotikony a avatary, pohlednice a bannery jsou výsledkem formátu GIF. Je pravda, že technologie flash jsou nyní neméně populární, ale díky své jednoduchosti je gif oblíbený mezi webmastery, zejména začátečníky.

Podstatou této animace je, že GIF kontejner neobsahuje jeden obrázek, ale několik najednou a je tam napsána i doba, po které se tyto obrázky nahradí. V tomto případě je možné opakovat animaci a poté po posledním snímku začne znovu zobrazení prvního. Dnes na internetu existuje mnoho specializovaných editorů, ve kterých si můžete vytvořit animaci Gif sami.

Gif může také podporovat primitivní způsob vytváření průhlednosti pro vytvořené obrázky. Proč primitivní? Ano, protože GIF podporuje pouze dvě hodnoty průhlednosti – průhlednou nebo neprůhlednou, bez jakýchkoli přechodných stavů, kterých lze dosáhnout použitím alfa kanálů ve formátech Png.

Z tohoto důvodu vznikají potíže se zobrazením plynule se měnících úrovní průhlednosti, takže vše, co souvisí s vysoce kvalitním průhledným pozadím obrázků, je výsadou Png. Téměř všechny obrázky s průhledným pozadím, které najdeme na internetu, mají příponu png.

Existuje několik variant Png, z nichž každá je navržena tak, aby vykonávala své vlastní úkoly:

Png 8 - zde bude analogicky s Gifem při ukládání fotografie v PNG 8 použito pouze 256 barev, takže výsledky komprese obrazu v těchto dvou formátech rastrové grafiky budou téměř totožné. Stejně jako v Gif je zde podporována průhlednost, ale s alfa kanálem.

Png 24 - zde jsou pro každý pixel fotografie přiděleny tři barevné kanály po 8 bitech (8*3=24), čímž je realizováno vytvoření plně barevného obrazu bez zkreslení. Kvalita barevného zobrazení je lepší i než Jpg, ale bude těžší.

Png 32 - zde jsou tři barevné kanály zodpovědné za vytvoření plnobarevného obrázku a čtvrtý je přidělen samostatně, aby vytvořil alfa kanál, což vám umožňuje použít Png 32 k získání obrázků s průhledným pozadím. V Png 32 si můžete zvolit libovolnou změnu stupně průhlednosti, díky čemuž budou takové obrázky vypadat stejně dobře na všech webových stránkách s jakýmkoli pozadím.

Nyní si shrňme všechny informace a vyvodíme nějaké závěry.