Incrustar imatges via DATA URI

Publicada el per

Per a afegir imatges a un document HTML o CSS podem utilitzar dues vies.

  • Càrrega asíncrona, indicant una URL. D’aquesta manera el navegador sol·licita la imatge a la URL indicada després de carregar l’HTML ó CSS.
  • Incrustant la imatge a l’HTM ó CSSL via DATA URI. D’aquesta manera la imatge viatge conjuntament amb la resta del codi HTML i la pàgina es carrega més ràpid.

Per a incrustar la imatge hem d’utilitzar l’esquema següent

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

<img alt="Imatge incrustada" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/+4AJkFkb2JlAGTAAAAAAQMAFQQDBgoNAACu5gABhdYAAlJlAANW4f/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAM">

O en CSS

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/+4AJkFkb2JlAGTAAAAAAQMAFQQDBgoNAACu5gABhdYAAlJlAANW4f/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDww");

Amb aquesta tècnica podem evitar, per exemple, que les imatges no apareguin als correus electrònics si el client no té habilitada l’opció de carregar imatges del servidor.

Cal tenir en compte que incrustant  DATA URI, el pes de les imatges creix aproximadament un 30%.

Per a convertir les imatges a DATA URI un dels millors llocs de la web és http://www.cssportal.com/image-to-data/