Jak si různorodá vykreslovací jádra dnešních internetových prohlížečů poradí s obrázky zmenšovanými pouze HTML kódem? Všelijak...
Určitě jste již na internetu narazili na obrázky, které byly buď příliš zmenšené, nebo naopak zvětšené natolik, že je váš internetový prohlížeč zobrazoval „zubatě“ a deformovaně. Nové verze dnešních prohlížečů se však snaží tyto vady obrázků redukovat. Podíváme se, jak jim to jde.
Proč jsou obrázky deformované?
Když webmaster vloží na stránku nějaký obrázek a nastaví mu nepřiměřenou velikost pro zobrazení, prohlížeč si vždy obrázek stáhne do mezipaměti v původní velikosti a teprve následně mu nastavuje novou velikost. Aby nedocházelo k prodlevám mezi stažením obrázku do paměti a jeho vykreslením, bývá velikost obrázku změněna co nejrychleji, avšak na úkor kvality. Tím na obrázcích vznikají „zuby“ a jiné defekty.
Chyba je velkou měrou na webmasterech, kteří občas nesmyslně nutí prohlížeče uživatelů stáhnout si velký obrázek, přičemž je na stránce zmenšen. Správně by měl obrázek zmenšit přímo webmaster a na stránce nechat zobrazovat už fyzicky zmenšenou verzi. Uživatel pak nestahuje zbytečná data navíc a obrázek je kvalitněji vykreslen.
Přesto se však s „umělým“ zmenšováním obrázků jen za pomoci HTML kódu často setkáváme, proto se vývojáři webových prohlížečů snažit vylepšovat algoritmy pro změnu velikosti tak, aby výsledný zvětšený či zmenšený obrázek ztratil co nejméně na kvalitě.
Vykreslovací jádra prohlížečů
Samotný prohlížeč ve většině případů do změny velikosti obrázků vůbec nezasahuje, to nechává na tzv. vykreslovacím jádře, které používá.
Vykreslovací jádro potřebuje každý prohlížeč, aby dokázal uživateli převést stránku do výsledné podoby ze zdrojového kódu, který si stáhne ze serveru. Když jste si otevřeli tuto stránku, renderovací jádro si nejprve stáhlo HTML kód stránky, obrázky, Flash animace apod. a následně z informací z HTML sestavil hotovou stránku tak, jak ji nyní vidíte.
Dnes vyzkoušíme vykreslení obrázků v prohlížečích Internet Explorer 7 a 6, Opera 9, Firefox 3, Google Chrome a Konqueror. Podívejme se nejdřív, jaká jádra pro zobrazení webu používají.
Internet Explorer: MSHTML neboli Trident
Internet Explorer od Microsoftu používá pro vykreslování stránek jádro Trident, známé také pod pojmem MSHTML. Poprvé se objevil v Internet Exploreru 4.0 v roce 1997. V Internet Exploreru 7 je obsažena verze Trident 7.0, nástupce IE 8 už používá Trident 8.0.
Kód Tridentu je obsažen v komponentě mshtml.dll, kterou mohou využít i jiní vývojáři pro své programy napsané v jazyce C++. Např. programátoři v Microsoft Visual Studiu mají Trident přímo v nabídce komponent. V současné době Trident, kromě IE, používají také třeba programy Google Talk, LimeWire, Microsoft Outlook nebo Windows Media Player.
Trident je často mnoha webmastery zatracován kvůli nízké podpoře HTML standardů.
Mozilla Firefox: Gecko
Ke konci devadesátých let byly velice populární prohlížeče Netscape Navigator a Internet Explorer. S rozšiřujícími se prvky webu začínalo jádro Netscapu ztrácet a Exploer měl v té době navrch. Proto byl zahájen vývoj nového vykreslovacího jádra Raptor, které se následně přejmenovalo na NGLayout a později na Gecko. Po spuštění projektu Mozilla bylo toto jádro vydáno pod open-source licencí. Do výrazného povědomí se dostalo v momentě, kdy jej začal používat prohlížeč Firefox.
V současné době Gecko víceméně kvalitně podporuje mnoho standardů jako HTML, XHTML, XML, CSS či JavaScript.Kromě Firefoxu jej používá také například SeaMonkey, Thunderbird, Camino či Flock a oproti Tridentu je spustitelný nejen na Windows, ale také pod Linuxem, BSD, Mac OS X či Solarisem.
Opera: Presto
Před rokem 2003 používala Opera vykreslovací jádro Electra, po novém roce však bylo v Opeře 7.0 nahrazeno Prestem. Na rozdíl od Gecka nebo Tridentu, Presto nemohou použít vývojáři třetích stran do svých aplikací. Kód jádra je přímo integrován do prohlížeče Opera, takže jej prohlížeč nemusí načítat z externích binárních souborů (DLL).
Google Chrome: WebKit
Všechna předešlá vykreslovací jádra byla vždy vyvíjena pro nativní použití v nějakém prohlížeči, nejinak tomu nebylo ani u WebKitu, který v roce 2002 původně začala vyvíjet společnost Apple pro použití ve svém prohlížeči Safari. WebKit byl odvozen z jádra KHTML (používané Konquerorem). V současné době je jádro k dispozici pod open-source a využívá jej právě i Google Chrome.
WebKit se člení na několik komponent – např. WebCore (základní knihovna pro práci s HTML a DOM obecně), SquirellFish (dříve JavaScriptCore, používá se pro interpretaci JavaScriptového kódu) a SunSpider (měření rychlosti JavaScriptu – benchmark).
Kromě Google Chrome WebKit používá také Safari a to pro všechny platformy, na které je poskytováno, nebo Microsoft Entourage (e-mailový klient Microsoftu pro Mac OS).
V listopadu 2008 připustil šéf Microsoftu Steve Ballmer možnou implementaci WebKitu do budoucích verzí Internet Exploreru.
Konqueror: KHTML
KHTML je čistě linuxové rendrovací jádro vyvíjené pod hlavičkou projektu KDE (vývoj stejnojmenného desktopového prostředí pro unixové systémy). Používá jej především prohlížeč Konqueror, který lze najít ve většině edicí Linuxu využívající KDE (např. Mandriva nebo live edice Slax).
KHTML vznikl v roce 1998 kopií staršího jádra KDE HTML Widgetu, rozšířené o nepatrné změny, přidání podpory znakové sady Unicode a GUI frameworku Qt 2. Skutečných změn se KHTML dočkalo až o rok později.
Test: kvalita předimenzovaných obrázků v prohlížečích
Kvalita uměle zmenšovaných obrázků se v jednotlivých prohlížečích (resp. jejich renderovacích jádrech) velice liší. Vyzkoušeli jsme proto, jak si jednotlivé prohlížeče poradí při zobrazení stejného obrázku o původních rozměrech 1361 × 1600 bodů ve zmenšených velikostech 680 × 800, 380 × 446, 180 × 211a 80 × 94 bodů.
Testovány byly prohlížeče Google Chrome, Opera 9, Firefox 3 a Internet Explorer 7 pod Windows Vista. Dále v Internet Exploreru 6 pod Windows XP a Konqueroru pod Slaxem.
Pro test byla použita fotografie dívky ve vysoké kvalitě formátu JPEG. Obrázek byl na stránce zmenšován pouze HTML kódem za použití parametrů width a height ve značce img.
Srovnávací obrázky, které v článku následují, nebyly nijak upravovány a byly ukládány bez komprimace v nejvyšší kvalitě.
První zmenšení
Obrázek v plné velikosti zobrazují všechny prohlížeče stejně, bez žádných větších odchylek.
Avšak už při zmenšení na poloviční velikost, tedy 680 × 800 bodů, můžeme vidět rozdíly. Nejlépe dopadlo zmenšení v Google Chrome, který obrázek krásně vyhladil. Zvláště si povšimněte odstávajících vlasů dívky, které jsou u Chrome kvalitně vykresleny.
Opera 9 jej vykreslila ostřeji, možná až příliš. Přesto však je obrázek stále ve velice dobré kvalitě.
Překvapením byl Firefox 3, jehož vývojáři se chlubili vylepšenými algoritmy pro vykreslování obrázků. Přesto v testu skončil až za Operou. Při přiblížení můžeme vidět, že obrázek nebyl natolik dobře vyhlazen, jako v předchozích dvou případech.
Internet Explorer 7 a 6 dopadly velice podobně, při zmenšování téměř nevyhlazovaly, což se projevilo především na vlasech. Ještě o něco málo hůře byl obrázek vykreslen Konquerorem.
Kvalita vykreslení obrázku při zmenšení na 680 × 800 bodů.
Druhé zmenšení
Ten samý obrázek byl následně zmenšen na rozměry 380 × 446 bodů. Google Chrome a Opera 9 opět obrázek vyhladily, takže se na něj stále dívá velice dobře. Avšak už Firefox 3 obrázek zmenšil tak, že začaly vynikat jednotlivé pixely s příliš odlišnými odstíny barev. O něco hůře dopadly oboje verze Internet Exploreru, Konqueror navíc méně viditelná místa začíná příliš rozmazávat.
Kvalita vykreslení obrázku při zmenšení na 380 × 446 bodů.
Třetí zmenšení
Obrázek byl zmenšen ještě více a to na 180 × 211 bodů. Jak je vidět, Google Chrome i Opera stále zobrazují obrázek ve velice přijatelné kvalitě. Firefox 3 už začíná vytvářet zuby kolem vlasů a tváře.
Pohledem na IE 7 a IE 6 vidíme nepatrné rozdíly mezi vykreslením v těchto dvou prohlížečích. Obrázek v IE 7 je o něco méně zubatý. Konqueror už začíná fotografii výrazně deformovat především na okrajích tváře.
Rozdíl mezi vykreslením Google Chrome (vlevo) a Konquerorem při zmenšení na 180 × 211 bodů (zvětšeno o 300%).
Kvalita vykreslení obrázku při zmenšení na 180 × 211bodů.
Čtvrté zmenšení
Poslední zmenšení bylo na rozměry 80x94px. V tomto případě vynikly rozdíly mezi vykreslením Google Chrome a Operou, která o něco hůře vykreslila odstávající vlasy. Přesto však změna velikosti dopadla velice dobře.
Firefox i Internet Explorer příliš zvýraznily barvu úst a tím je ve výsledku deformovaly do jiného tvaru. Z toho důvodu se dá říct, že Konqueror v tomto případě zvládl zmenšení fotky lépe, jelikož ústa tolik nezvýraznil.
Kvalita vykreslení obrázku při zmenšení na 80 × 94 bodů.
Chrome za hezčí weby
Jednoznačně nejlépe fotografii zmenšil Google Chrome, který ji vždy velice pěkně a důvěryhodně vykreslil s vyhlazenými hranami. Následován je Operou 9, která ale u čtvrtého zmenšení začala vytvářet malé „zuby“.
Na pomyslném třetím místě by skončil Firefox 3, Internet Explorer 7 a 6 až na drobné detaily obrázek vykreslují zhruba stejně, a to nepříliš dobře.
Zcela nejhůře však dopadl Konqueror, který už při druhém zmenšení obrázek necitelně přeostroval, což se projevilo v podobě „zubů“ na hranách.
Každopádně by tvůrci webů by měli vždy obrázky zmenšit už při vkládání na web (ručně, nebo automaticky – třeba pomocí GD knihovny v PHP) a nenutit uživatele stahovat zbytečná data navíc.
