Pakke html / css / bilder til én fil

[kongen]

La oss si jeg skal lage en annonse som inneholder en Youtube-embeded video, noen bilder og tekst, finnes det noen muligheter for å "pakke" alt til én browser-kjørbar fil (unntatt flash)?

 

[impel]

Ja, det kan du. CSS kan du legge rett i HTMLen med en <style>-tagg, og bilder kan du Base64-enkode, og sette inn via CSS, eller <img src="data...">. Det egner seg dog best for mindre bilder, og ikke store foto osv.

Prøv å laste opp et bilde her, f.eks, så ser du hvordan det funker: Convert images to base64 strings for HTML/CSS embedding

 

[kongen]

Takk

 

[adeneo]

Jupp!

Enda en konverteringsgreie (som jeg lagde for noen år siden) : Base 64 Image

 

[kongen]

Bra

 

[adeneo]

Sånn ellers, hvis du er ekstremt tålmodig (eller generer automatisk), så kan du jo lage det i HTML ved å bruke en font som er 1px stor og fargelegge hver enkelt pixel.

Eksempel
Enda et

 

[kongen]

Likte siste bilde best Men blir ikke filene veldig store slik?

 

[adeneo]

Jo, de blir veldig store.
Det er bare festlige eksempler hvor det brukes en font som er 1px til å sette farger på hver eneste pixel i et bilde med span elementer, det er selvfølgelig helt ubrukelig til noe særlig annet enn nettopp slike festlige eksempler.

Base 64 tar generelt opp rundt 33% mer plass en binært, og alle typer lagring av slike data i tekstformat i stedet for binær kode vil ta opp en del mer plass, samt at bildene ikke lengre caches.
Derfor bør slike tekstformater normalt brukes kun til små bilder på steder hvor det ikke er mulig av en eller grunn å laste vanlige bilder.