reklama

Jak dostat celý web i obrázky do jednoho HTML souboru

HTML je textový soubor. Mohlo by se tedy zdát, že umí uchovat pouze text obalený formátováním a nějakými skripty. Tak tomu ale není – do HTML můžete schovat cokoliv.

Webová stránka je modulární. Skládá se z vlastního textu – hypertextu – a z mnoha příloh. Takovou přílohou je postupně ikona webu, kaskádové styly uložené v samostatných CSS souborech, hromada javascriptového kódu v souborech s příponou JS a pak samozřejmě i obrázky.

I zdánlivě jednoduchá stránka se tak může skládat z ohromného množství dílčích souborů. Uživatele to ale nemusí zajímat, vše je před ním totiž v podstatě pečlivě skryto. Najdou se ale situace, kdy se to nemusí hodit, kdy chcete mít vše na jednom místě a v jednom souboru. Takový web se snadněji archivuje a především je dostupnější v kritických situacích. Proto jej používají třeba autoři webových skriptů pro různé nekalé praktiky. Celá aplikace (třeba pro javascriptový DDoS útok) je uložená v jednom jediném a snadno přenositelném HTML souboru, ačkoliv obsahuje množství grafiky, skripty i styly. Jak je to možné? Webová stránka je přeci běžný textový soubor.

To sice ano, ale textem můžete vyjádřit i binární data. V podstatě existují čtyři základní mechanismy, jak do textového souboru dostat rastrovou grafiku. Ve dvou případech to pak může být i jakýkoliv jiný původně pouze linkovaný obsah včetně skriptů. Určitě všechny čtyři postupy znáte, já je dnes tedy jen stručně připomenu.

MHTML

Prvním způsobem, jak vše uložit do jednoho jediného souboru s příponou MHT, je stařičký formát MHTML – MIME HTML. Jeho obsah je kódovaný ve formátu HTML e-mailu. Obsahuje tedy jak samotný text webové stránky, tak grafiku převedenou do alfanumerického kódování Base64. Pakliže je vám zcela cizí, vězte, že nějaký velmi malý obrázek, třeba ikona webu, by mohl vypadat v tomto kódování asi takto:

LyoJU1dGT2JqZWN0IHYyLjIgPGh0dHA6Ly9jb2RlLmdvb2dsZS5jb20vcC9zd2ZvYmplY3QvPiAK
WlzIHJlbGVhc2VkIHVuZGVyIHRoZSBNSVQgTGljZW5zZSA8aHR0cDovL3d3dy5vcGVuc291cmNlL
m9yZy9saWNlbnNlcy9taXQtbGljZW5zZS5waHA+IAoqLwp2YXIgc3dmb2JqZWN0PWZ1bmN0aW9uK
Cl7dmFyIEQ9InVuZGVmaW5lZCIscj0ib2JqZWN0IixTPSJTaG9ja3dhdmUgRmxhc2giLFc9IlNob
2Nrd2F2ZUZsYXNoLlNob2Nrd2F2ZUZsYXNoIixxPSJhcHBsaWNhdGlvbi94LXNob2Nrd2F2ZS1mb
GFzaCIsUj0iU1dGT2JqZWN0RXhwckluc3QiLHg9Im9ucmVhZHlzdGF0ZWNoYW5nZSIsTz13aW5kb
3csaj1kb2N1bWVudCx0PW5hdmlnYXRvcixUPWZhbHNlLFU9W2hdLG89

Tato změť znaků pak může být součástí textového souboru a ten jen nabobtná do poněkud větších rozměrů. MHTML na druhou stranu zpravidla neobsahuje cross-site obsah, často tedy nearchivuje reklamy a další vložené objekty z cizích domén. MHTML archiv úvodní stránky Živě.cz se díky této „kompresi“ smrští na 1,5-2 MB. Pokud si chcete uložit webovou stránku, se kterou budete pracovat třeba na cestách, nebo ji chcete poslat jako přílohu, MHTML je prakticky jediné elegantní řešení.

Klepněte pro větší obrázek
Do formátu MHTML umí ukládat IE a Opera

Na MHTML se dlouhé roky tak trochu zapomínalo, ačkoliv do něj umí archivovat třeba Internet Explorer. Menší renesanci zažívá až v posledních letech. Jako výchozí formát pro uložení webové stránky jej používá Opera (od verze 9) upravený ChromePlus a s potřebnými doplňky i Firefox. Aby to ale nebylo zase tak jednoduché, MHT soubory vytvořené různými prohlížeči si navzájem docela často nerozumí. MHT soubor vytvořený Operou sice otevře i IE9, naopak to ovšem zpravidla nefunguje.

Klepněte pro větší obrázek
Stránka načtená z MHTML archivu
Vše je uloženo v jednom textovém souboru včetně obrázků

data:image/png;base64

Pokud je formát MHTML přívětivý především pro uživatele, pak přímé vkládání vybraného obsahu poslouží především autorům webových stránek. Dejme tomu, že chcete do své stránky umístit nějaký soubor přímo – doslova ho vypálit, ale formát MHTML vám nevyhovuje.

Pak na řadu přichází kouzelná formule z nadpisu této kapitoly. Obrázek ve stránce se tradičně zapíše značkou <img src=”klobouk.jpg” />. Prohlížeči se tím dává na vědomí, že na tomto místě má vykreslit obrázek z linkovaného souboru klobouk.jpg. Tento způsob zápisu ovšem není jediný, vy totiž můžete prohlížeči namísto souboru obrázku předložit přímo jeho data:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Tímto zápisem v podstatě kombinujete výhody klasického HTML a MHTML. Stránka má běžné formátování a zobrazí ji všechny prohlížeče. Zároveň ale můžete přímo do obsahu zapsat data obrázkového souboru zakódovaná opět do formátu Base64. Prohlížeči pouze sdělíte typ souboru (image/png, image/jpeg, image/gif aj.) a je hotovo.

Klepněte pro větší obrázek
Webový Base64 konvertor převede libovolný soubor na textový kód, který
můžete přímo vložit do webové stránky 

Samozřejmě se nabízí otázka, kde vzít Base64 kód obrázku, tedy všechny znaky za „base64,“. Buď jej budete generovat dynamicky přímo na serveru v jakémkoliv server-side skriptu, nebo si jej vytvoříte staticky. Nástrojů je na webu celá hromada včetně tohoto webového konvertoru.

K čemu je to vlastně celé dobré? Pro běžný web to nemá prakticky žádný smysl, takové monolitické webové stránky se totiž docela špatně upravují (pokud vše nebudete dynamicky skládat na serveru). Pokud ale dopředu víte, že své stránky budete chtít nabídnout k archivaci – nebo pro offline čtení – tento způsob pro vás může být zajímavý. Oproti MHT souborům si návštěvník stáhne zcela běžný HTML soubor, který bude jen trošku více nafouklý. Monolitické webové stránky se pak hodí i pro ty, kteří chtějí posílat čtenářům newslettery a lámou si hlavu nad tím, jak jednoduše veškerou grafiku a texty vnořit do jednoho souboru, aniž by použili třeba PDF.

Nakonec snad to nejdůležitější. Pomocí přímého vložení dat můžete do HTML stránky propašovat libovolný soubor. Zdaleka to nemusí být pouze obrázek, ale také Javascript, CSS nebo libovolný binární soubor.

TABLE grafika pro blázny a hračičky

Jak MHTML, tak přímé vložení souborů do stránky lze bez problémů používat. Drobnou zmínku si ale zaslouží i stará dobrá TABLE grafika. Ačkoliv už dnes nemá praktické využití, kodéři hračičkové si s ní mohou hezky pohrát a oslnit kamarády. V podstatě jde o způsob, kdy se k vykreslení obrázku použijí dostupné formátovací prostředky jazyka HTML. Jelikož je rastrová/bitmapová grafika v podstatě tabulka pixelů, nejvhodnějším prvkem bude… HTML tabulka.

Dejme tomu, že budete chtít vykreslit obrázek o rozměrech 100×100 pixelů. Pomocí surového HTML tedy v takovém případě stačí vytvořit tabulku o sto řádcích a sloupcích. Bude mít 10 000 buněk a její načítání bude skutečný test výkonu renderovacího jádra webového prohlížeče. Celé kouzlo spočívá v tom, že každá z těchto buněk tabulky bude mít rozměr 1×1 pixel a pozadí buňky bude odpovídat konkrétnímu pixelu z původní bitmapy.

Klepněte pro větší obrázek  Klepněte pro větší obrázek  Klepněte pro větší obrázek
TABLE obrázek si můžete vytvořit třeba v prográmku Bitmap 2 Html table convertor,
nevytvoří ale moderní kód, Chrome a další s ním tedy budou mít problémy

Tato spíše zábavná metoda měla své opodstatnění v minulosti, kdy webem poletovaly obrázky titěrných rozměrů, nicméně pokud byste tímto způsobem vygenerovali HTML kód pro obrázek se současným rozlišením 2000×1000 pixelů, vznikne tabulka se dvěma miliony buněk. A to bude vážně průšvih, nehledě na to, že velikost HTML souboru se nafoukne do obřích rozměrů desítek megabajtů. Každý pixel původního obrázku totiž bude převeden na formuli <td bgcolor=”#1100ff”></td>, respektive na moderní kód, který k nastavení barvy využije kaskádové styly. V každém případě, jeden jediný pixel jsem tímto zastaralým způsobem popsal pomocí 27 bajtů. HTML soubor by tedy měl nejméně 27 × 2 000 000 bajtů = 54 MB! Naštěstí se dá komprimovat i tabulka, a tak plochy se stejnou barvou mohou být definované menším počtem tabulkových buněk. Případně můžete rozšířit velikost buněk na více pixelů, čímž se také dramaticky sníží jejich počet. V každém případě, TABLE grafika zůstává jen potravou pro experimentátory a studenty s hromadou volného času a neexistuje jediný web, který by ji snad používal v produkční verzi.

Canvas a SVG

Od TABLE grafiky je to už jenom malý krok k SVG a Canvas. Oběma technologiím dnes rozumí všechny nejnovější verze všech webových prohlížečů a jelikož jde v podstatě o XML data a Javascript, jedná se o dynamické kreslení grafiky na straně klienta. Pro programovatelné dynamické generování složité rastrové grafiky a fotografií to sice není ideální a bylo by to i pomalé, technicky je to ovšem možné.

Co z toho všeho definitivně plyne? Ačkoliv se dají stránky velmi snadno archivovat do jednoho souboru třeba tiskem do PDF, zdaleka to není jediná cesta. MHTML má sice problémy s kompatibilitou a podporou napříč prohlížeči, zvládne ale to samé a i jeho dynamické generování na serveru je mnohem jednodušší. V případě přímo vložené grafiky a dalších souborů do HTML pak získáte zcela standardní HTML soubor, který zobrazí naprosto každý, aniž byste k němu museli dodávat složku s přílohami. PDF a další archivační formáty prostě nejsou jedinou možnou cestou.

Témata článku: Web, Technologie, Prohlížeče, Programování, HTML, Image, Canvas, Side

8 komentářů

Nejnovější komentáře

  • Alois Novák 24. 3. 2011 19:01:29
    Zajímavé načasování. Zrovna když byla objevena (to dřív, ale hlavně dosud...
  • tech778 24. 3. 2011 9:40:15
    Schválně jsem testnul své nainstalované prohlížeče jak si poradí s...
  • outsyder 24. 3. 2011 9:17:40
    Nejsem si jistý, ale mám pocit, že když pošlete velký soubor mailem, tak...
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 100

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 34

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 144

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 73


reklama