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.
K tomuto článku již není možné přidávat další komentáře
Komentáře
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
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.
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.