DataURI generátor

Tipy & triky, Zrychlení webu, JavaScript

Ukážu vám nový nástroj mé vlastní výroby, pro generování DataURI. Podporuje drag'n'drop i pro více souborů a také zobrazí statistiky nárůstu velikosti a případné snížení použitím GZip komprese.

DataURI generátor

V článku DataURI - zrychlujeme po čtvrté jsme si ukázali, jak můžeme pomocí DataURI ušetřit požadavky na server, a tím snížit čas potřebný pro načtení webu. Protože mi žádný nástroj pro generování DataURI nevyhovoval, rozhodl jsem se vytvořit vlastní.

Jak se to povedlo, se můžete přesvědčit na odkazu datauri.kutac.cz

Drag 'n' drop - DataURI generátor

Pro pohodlnost jsem si stanovil, co musí můj generátor umět:

  • drag 'n' drop - neboli možnost soubor přetáhnout do webového prohlížeče,
  • vygenerovat DataURI hromadně pro více souborů najednou,
  • zobrazit alespoň orientační statistiky ohledně zvětšení dat při použití kódování base64,
  • BONUS - zobrazit orientační statistiku zlepšení/zhoršení při následné GZip kompresi.

Pokud se rozhodneme využít GZip pro obrázky, většinou dojde ke zhoršení. Jenže obrázky převedené pomocí base64 jsou přenášeny jako plain text, tudíž je vhodné použít GZip. Většinou se dostaneme blízko původní velikosti obrázku, přestože base64 velikost přenášených dat zvýšil přibližně o 33%.

Bez minifikace skriptů

Skripty určitě nejsou napsány pěkně, abych se jimi mohl chlubit. Pokud někdo z vás ale bude řešit podobnou část, může se trochu inspirovat. Proto jsem skripty nakopíroval bez minifikace.

Knihovny 3. stran

Pro vygenerování GZip dat a zjištění jejich velikosti jsem využil již hotovou knihovnu pro JavaScript, která implementuje GZip algoritmus. Můžete ji nalézt v repositáři na GitHubu.

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Václav Vaněk

http://vaclavvanek.cz 12.5.2015 13:10

Pěkné,
jen nechtěl by si to dropovací místo nehat vždy na stejném místě?

Nevím jak si to zkoušel nebo chceš využívat, ale když mám jeden monitor a to okno ze kterého draguju nad prohlížečovým, tak ho musím pořád přesouvat abych našel to místo pro dropnutí :D

ps. doufám, že můj popis není moc zmatený :D

Odpovědět

Pavel

http://www.kutac.cz/blog/ 12.5.2015 14:56

Nad tím jsem taky uvažoval. Ale když můžeš přesunout více objektů, tak to tam hodím najednou. Pak mě to dropovací okno neobtěžuje a sjede dolů..

Ale uvidím, případně to změním.

Václav Vaněk

http://vaclavvanek.cz 13.5.2015 10:18

Aha, to mi nějak ušlo, že jde dropnout více souboru v jednom. V tom případě je to ok :D. Ale nějak bych zvýraznil tu možnost více souborů. Teď když se na to dívám tak vidím 'Drag and drop files here', ale předtím jsem si toho nevšiml ... respektive jsem to nečetl, nepovažoval jsme to za důležité a unikla mi ta funkcionalita.

Novinky z blogu

LocalStorage a Lockr

Ukládání dat v prohlížeči pomocí LocalStorage má své úskalí. Od toho je tady mini knihovna, která tyto problémy řeší a hodně práci hodně...

Další články