Data URIs allow embedding of resources like images, JavaScript, HTML, and CSV directly into other files and documents. They use a uniform resource identifier scheme with a base64 encoded interpretation of the resource. Most modern browsers understand data URIs so they provide a way to include resources without an additional network request.

1. Data URIs
Data URIs:
Images, but textier

2. Data URIs
What are they?
• Uniform Resource Identifier scheme
• Normally a base64 encoded interpretation of an
image
• Can also refer to js, html, csv etc.
• Understood by most modern browsers

3. <img
src='data:image/gif;base64,R0lGODlhyQBPAMQfAP///6ysrEJEQ4GCgsDAwBMVFO/v72JjYqChoSMkIzI0My0vLpCRkdDQ0HJzclJTU1hZWLCxsIKCgt/g
4A4PDyMkJBgaGaGioWxtbUNEQzg5OZeXl4yNjE1OTnd4dwMFBCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN
6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LC
AyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1uc
yMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRw
Oi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1
wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFMkM5ODhCNjI5MTFFMUEzOUVFRT
EzQjBFREZERkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFMkM5ODlCNjI5MTFFMUEzOUVFRTEzQjBFREZERkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc
3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QkUyQzk4NkI2MjkxMUUxQTM5RUVFMTNCMEVERkRGQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QkUyQzk4
N0I2MjkxMUUxQTM5RUVFMTNCMEVERkRGQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH
//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpK
OioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR
0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAB8ALAAAAADJAE8AAAX/
4CeOZGmeaKqubOu+cCzPdP0lwjAgej8wA4egYCsaj8ik0pRwMBBCYgq3Yxyky6x2y401oYrSYTCaCEpSAcOK7brfcKOakbidSQpA/WEoJQATCA8iagh1cYiJiiY
CCFciCAAAgyQECB8RDGITD2skCT+Hi6OkWQk8JQB3JQIAeWEkCBEpBTxtpbi5MA4Itx8GBAOwlQYNJhMAwCYMDh8KEau60tN+EZRMDA0AB6wAzZ96Ct8jeQQjP7
7U6qMCEQUKOtwnA+YlBLcHk74NE30iCc9ErRuY6IAmBwAiRABwiUSEAQ0a/hNAsSKRRsjGfXBgIA8RBxM+FIgwjKDJLlY+/7SSl0eeiAMEHCg4gECbpJs4CTB4o
EBUAQPcVP0c5+ikUS1FP9CLRWZEAQc2cUqdmvARgnoxa5ZIerRrEa4DZo14+C8S1bNUDQxIcOiqKxNcvcqFccClykkvVZ1C2yDYgYoPdkTFqZbIAACaTjAoObdx
CjVwARDQdoAjWqkT6JAocGAhZgEKJqQTQUCg49MjEohlpEMBgctoGdwqMMCA1MQkHiCb4GAk6t8j7hWIhsc2WgNQKjrwDKCBL9rGJTkf8QBxDrUKcANvPEAAn+Y
mvp+dYPeTzdXVcE6AZWnEAQO0iW8/moAO0Jag8541oPHESALllYDQTR19oAoJB6I33/9R7ggATD43kaQeMtKZZoMC0cGXSWpv5bBgVwJ8k4A2EmF4UwNRTaeEid
JV14wAfY0g24dGSSTCYbIVkCIDN4nGQgGBEfCadDodYCGLDL0nyT2pNUXjQAIE6KATJ+Zxk3xiROBXRRWFZVsD5SE5SE/LjNaCBRlAAEEGFpBAwQJwLkABChRoo
GYHFZxQgZoZzPkBnH6OAOgHFsQZp58VyGlCooGKgCafbZaQKJx5nmDjZq1I0pFZDNFCzyMrtNNcSRAmMxooM1BwQACstoqBnwu0ymqAEFwgawASRCpCB7JeIAIH
AWRAggWszgnBrQEsIIIEAWBgArPKikABBsge0Cj/s61uUGmTKVDozR83WfhSA9e44OA2Dt10aSwzANusBgtAsEGyIsS6AQTYdkACtbhmsMABtl5QKbEBQLAAtSJ
kEAAHJKzq7AfHSqCmmpFi+/AI0ErrLgYaaMAvB4EyiwHAAfhKAh0PlKufZB9wuu4NOpmpgonD/BSuHw44cIDKLBwbbAls1ourCNRKICir+o5gwbxG/zm0CJVSYO
u2tkZ7LAQnYPszxvRCzOq2ThfMtbIERwtJAkB9sMYd3tYRHc+68UwXIFiU2lAT2hgQknYt2Ip1CrE2XfQIHjxNQqwB5FnB1yZQ+7DCG4xwddbNsqrB2CL4bcKxJ
n+QcdnkOLDU/y+vRamuMzjdwhFjM9jm5Adtv9ZPM67wvcLiAeh6gr34Wj4Cq8KaMO/f/ELQ6OIXzMls0l5LPHHFySos8LL0Iq67o6xGKzLJDI/gQALB3HAJAQIM
qcdGJ25VoBGyN3zTAAeEMUEDPCbw1wuIk5CmmtEi3irzH8ge5f7mtQBoiwTMYlPJAuUzWWmPXtRKnueqxyoUCHCC2WrUJRAgkQKoIkKQAOEIELA+IxwGACUwTkg
2ghwCDII2+GOVrrT2t1hxQAPMAtnvtlaC4Q2rcBJMmAEdR4JjYcBQfsrYBwoHsoxZzwSgm2AHasXDlt2lNyOKyU0oYT4n8UhuNDhhCXgkCf8FrGSMMNAc1A4mNq
Data URIs
c1rXAeIJzhjpa4ZwUAgAGro+TaWAIlUgBYElCiGotYMszhrlIzeYlx7sGc4LwvL69jnyRKYCUAVGEZdAEeIWv4NKkF4HIf0ADShsU0qLlkVQT8wKoWVoLJ2dFsF
JjXBVcJNsQRUInH6t4DopGfX0hiNV1EXT2S8CUTLFJca3nBH1nFsQV0wIduHAHk/MQvCfiLZNNzowYyYCtQYq+KzZuYwahntg9UwFZdW+a7PMYqHZJzBPPSVyTJ
8UjSvO8nBhBXDaqDGBN4xh+MwFIKpoWsC4AycAhs1h5vlSulyZKZzwriQmX1NyXSEZaFu5W1Emq2WAn/zHYi4OeBREBGySykP0aoTj5NcEIApCORMXgUBDpQzje
B7U013R+eTmAnCHjzcMEblqHgFClGLUpRw5rimq5nTqSu0QLzvNFN6kYgQGghAekQqUCj+iRFcLWl4MBJgLqQqZGytKu5aMpwYqGpEjAHoHEAlzfIIQquojUOTY
What does it look like?
nEOIY0TELgRJ9cqOcfAGrXu76hKYe5Bl9NYD4FvaGePzHGjQxLCq5y6hg4QSkX5KpZpVB2FF+9SQlEepOxygAeAzBTWbf62UWAVCk3G6EkvNVPG5ywAYDVKgoKi
4IHXIUAEQDVZtpjAgX8tjf/gJ97kikG5o5ADUKKAHIFJCQECPQI/1xdLQmM053oNOC6KhAAhdTqAODapaXp8A4MCmA+AqlsQIyppCSa0ophvkZFjlwFe6digHIx
Z5JbSO0J5OqkSpIBfDix7gtgsqRDKKm0jkxGb8GLhrwlEx5qKQGFLrWQXqiGviyzJ3gqYVYL78EmlMiDAc7wHi5QBAWL9F49VUnbzAg0Ab5d5B3KNxUnGcexk31
BJEooggIIJB8UEshreFbfCHcqv/ohTvvuIlk3oOoEzJECpyJ5gMHMVkhgjg5DdtxenIBYEp19LQokYVoSL8eSbMVtN+zrDddB+QMkYoIkBgGuzi7htaWSRzCZsB
zaSkUnDyACZ7wslW9winUkff9BpmR2F/i0Aj5OsTAJmmxP0LC50yLY8wm00RQIEQDSSnitXOvhLTWTg0tDyA0JYXMgm1n1BOKQNIBVEInEUGYzZFQRpz9QOlWWk
dgjlQSWXuMk8X6aC/FDAXPqkJMZ2G/WaZnKyrj6vReAC9X/oMoKzfPkYRcbth05t200u24BSQKwRijAa0V6CcKoYCETALOQjuMIrEqlIW2TdgyQAWQZAULftuEZ
HTML
uPxK51VEYn4jfbjq3h0Z3n6lW1eSSm4ZLZWIRNvgODnDgJ6MjRhASDu04YbNonEYrMhj4XdpOImVLQIr9YI6tmkIjLQMZ2gLtFQEoG2bi5wDH3QH1WVdkkj/oqN
P5wp5tkCIgJ0R0leRHPs1wSA4w+9cZJusAkLIgYh00pCMJxybC/JOAccTogS0aRwTN1Hzy1pwANoihwjICFAkLqGbE5Fd5p+wDS8Hk2GncApdbjAECuQrFUq/QE
dSIcPIMX2CutgAB72MgRnBbW2KoHo4sX5DfcQAhBycxeItgDxOjCFfMFqxtbrQjAgagJyFiJ2/jl+B6gkEkOisgcghHTrs45qY98CiJWIWIQ1GJJWOIAlMwCfN8
KXRnZZph4NIyiwNxEMgBXDfORABhZAoIYTp68I3T8gNGbJ/Ez+jAMHNh8fqieD2zDCgD6cwvzRy0ApIs/+X8EYd/3Ui/w/QXviVG33gDvonDQzQCGlTXGuHAJCG
YwhgaOpSUkvyHJEwBq63gIpwDz+AAiNxHELCAEKSfM1He5H3GBThah6YCOxlJk9xeLRWgy1iFgpISQX3gqOQHb1lG8NhgTaYFt8DDN6BIm1QC7nHg3Hgg59AAMA
AUA8wgEPYIwJ2FU7xgCJxc0xIDU7IQt4wOk7RGVWYDIJQCa8TPlu4hF2ICM8gb0CBEIWnfilDDyj4Zd3BGfZgI7zhDDnYhupgXAogBS3BCgYgdRqBeRRRAO9AT2
2QD80wEvDhW2wIiDB4hqHGGBDhDCzXV9UxI79AHC11ajpgiUbBC++AQn6AHHDxOo/g0gBhoIaYogDPQGGmqAuqIVxF9gHVUR6yKAK8gYhiuBnocIteMYXRkBK/S
GyRhAAH0Ryq2DASaIyNQRPykA9LZg+RBBU1pw2wwBkKRo2nQRNrAQryQS6UFI2c8Q7OaIviaBRfUH32wDrJBCRroIvvuB32uAPdIQACYUaB4YzymI+UBXqi0wN/
4Y4EmQghAAA7'/>

4. background-image:
url(data:image/gif;base64,R0lGODlhyQBPAMQfAP///6ysrEJEQ4GCgsDAwBMVFO/v72JjYqChoSMkIzI0My0vLpCRkdDQ0HJzclJTU1hZWLCxsIKCgt/g4
A4PDyMkJBgaGaGioWxtbUNEQzg5OZeXl4yNjE1OTnd4dwMFBCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6
TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCA
yMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucy
MiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwO
i8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1w
OkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFMkM5ODhCNjI5MTFFMUEzOUVFRTE
zQjBFREZERkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFMkM5ODlCNjI5MTFFMUEzOUVFRTEzQjBFREZERkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3
RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QkUyQzk4NkI2MjkxMUUxQTM5RUVFMTNCMEVERkRGQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QkUyQzk4N
0I2MjkxMUUxQTM5RUVFMTNCMEVERkRGQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH/
/v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKO
ioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0
ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAB8ALAAAAADJAE8AAAX/4
CeOZGmeaKqubOu+cCzPdP0lwjAgej8wA4egYCsaj8ik0pRwMBBCYgq3Yxyky6x2y401oYrSYTCaCEpSAcOK7brfcKOakbidSQpA/WEoJQATCA8iagh1cYiJiiYC
CFciCAAAgyQECB8RDGITD2skCT+Hi6OkWQk8JQB3JQIAeWEkCBEpBTxtpbi5MA4Itx8GBAOwlQYNJhMAwCYMDh8KEau60tN+EZRMDA0AB6wAzZ96Ct8jeQQjP77
U6qMCEQUKOtwnA+YlBLcHk74NE30iCc9ErRuY6IAmBwAiRABwiUSEAQ0a/hNAsSKRRsjGfXBgIA8RBxM+FIgwjKDJLlY+/7SSl0eeiAMEHCg4gECbpJs4CTB4oE
BUAQPcVP0c5+ikUS1FP9CLRWZEAQc2cUqdmvARgnoxa5ZIerRrEa4DZo14+C8S1bNUDQxIcOiqKxNcvcqFccClykkvVZ1C2yDYgYoPdkTFqZbIAACaTjAoObdxC
jVwARDQdoAjWqkT6JAocGAhZgEKJqQTQUCg49MjEohlpEMBgctoGdwqMMCA1MQkHiCb4GAk6t8j7hWIhsc2WgNQKjrwDKCBL9rGJTkf8QBxDrUKcANvPEAAn+Ym
vp+dYPeTzdXVcE6AZWnEAQO0iW8/moAO0Jag8541oPHESALllYDQTR19oAoJB6I33/9R7ggATD43kaQeMtKZZoMC0cGXSWpv5bBgVwJ8k4A2EmF4UwNRTaeEidJ
V14wAfY0g24dGSSTCYbIVkCIDN4nGQgGBEfCadDodYCGLDL0nyT2pNUXjQAIE6KATJ+Zxk3xiROBXRRWFZVsD5SE5SE/LjNaCBRlAAEEGFpBAwQJwLkABChRooG
YHFZxQgZoZzPkBnH6OAOgHFsQZp58VyGlCooGKgCafbZaQKJx5nmDjZq1I0pFZDNFCzyMrtNNcSRAmMxooM1BwQACstoqBnwu0ymqAEFwgawASRCpCB7JeIAIHA
WRAggWszgnBrQEsIIIEAWBgArPKikABBsge0Cj/s61uUGmTKVDozR83WfhSA9e44OA2Dt10aSwzANusBgtAsEGyIsS6AQTYdkACtbhmsMABtl5QKbEBQLAAtSJk
EAAHJKzq7AfHSqCmmpFi+/AI0ErrLgYaaMAvB4EyiwHAAfhKAh0PlKufZB9wuu4NOpmpgonD/BSuHw44cIDKLBwbbAls1ourCNRKICir+o5gwbxG/zm0CJVSYOu
2tkZ7LAQnYPszxvRCzOq2ThfMtbIERwtJAkB9sMYd3tYRHc+68UwXIFiU2lAT2hgQknYt2Ip1CrE2XfQIHjxNQqwB5FnB1yZQ+7DCG4xwddbNsqrB2CL4bcKxJn
+QcdnkOLDU/y+vRamuMzjdwhFjM9jm5Adtv9ZPM67wvcLiAeh6gr34Wj4Cq8KaMO/f/ELQ6OIXzMls0l5LPHHFySos8LL0Iq67o6xGKzLJDI/gQALB3HAJAQIMq
cdGJ25VoBGyN3zTAAeEMUEDPCbw1wuIk5CmmtEi3irzH8ge5f7mtQBoiwTMYlPJAuUzWWmPXtRKnueqxyoUCHCC2WrUJRAgkQKoIkKQAOEIELA+IxwGACUwTkg2
ghwCDII2+GOVrrT2t1hxQAPMAtnvtlaC4Q2rcBJMmAEdR4JjYcBQfsrYBwoHsoxZzwSgm2AHasXDlt2lNyOKyU0oYT4n8UhuNDhhCXgkCf8FrGSMMNAc1A4mNqc
Data URIs
1rXAeIJzhjpa4ZwUAgAGro+TaWAIlUgBYElCiGotYMszhrlIzeYlx7sGc4LwvL69jnyRKYCUAVGEZdAEeIWv4NKkF4HIf0ADShsU0qLlkVQT8wKoWVoLJ2dFsFJ
jXBVcJNsQRUInH6t4DopGfX0hiNV1EXT2S8CUTLFJca3nBH1nFsQV0wIduHAHk/MQvCfiLZNNzowYyYCtQYq+KzZuYwahntg9UwFZdW+a7PMYqHZJzBPPSVyTJ8
UjSvO8nBhBXDaqDGBN4xh+MwFIKpoWsC4AycAhs1h5vlSulyZKZzwriQmX1NyXSEZaFu5W1Emq2WAn/zHYi4OeBREBGySykP0aoTj5NcEIApCORMXgUBDpQzjeB
7U013R+eTmAnCHjzcMEblqHgFClGLUpRw5rimq5nTqSu0QLzvNFN6kYgQGghAekQqUCj+iRFcLWl4MBJgLqQqZGytKu5aMpwYqGpEjAHoHEAlzfIIQquojUOTYn
What does it look like?
EOIY0TELgRJ9cqOcfAGrXu76hKYe5Bl9NYD4FvaGePzHGjQxLCq5y6hg4QSkX5KpZpVB2FF+9SQlEepOxygAeAzBTWbf62UWAVCk3G6EkvNVPG5ywAYDVKgoKi4
IHXIUAEQDVZtpjAgX8tjf/gJ97kikG5o5ADUKKAHIFJCQECPQI/1xdLQmM053oNOC6KhAAhdTqAODapaXp8A4MCmA+AqlsQIyppCSa0ophvkZFjlwFe6digHIxZ
5JbSO0J5OqkSpIBfDix7gtgsqRDKKm0jkxGb8GLhrwlEx5qKQGFLrWQXqiGviyzJ3gqYVYL78EmlMiDAc7wHi5QBAWL9F49VUnbzAg0Ab5d5B3KNxUnGcexk31B
JEooggIIJB8UEshreFbfCHcqv/ohTvvuIlk3oOoEzJECpyJ5gMHMVkhgjg5DdtxenIBYEp19LQokYVoSL8eSbMVtN+zrDddB+QMkYoIkBgGuzi7htaWSRzCZsBz
aSkUnDyACZ7wslW9winUkff9BpmR2F/i0Aj5OsTAJmmxP0LC50yLY8wm00RQIEQDSSnitXOvhLTWTg0tDyA0JYXMgm1n1BOKQNIBVEInEUGYzZFQRpz9QOlWWkd
gjlQSWXuMk8X6aC/FDAXPqkJMZ2G/WaZnKyrj6vReAC9X/oMoKzfPkYRcbth05t200u24BSQKwRijAa0V6CcKoYCETALOQjuMIrEqlIW2TdgyQAWQZAULftuEZu
CSS
PxK51VEYn4jfbjq3h0Z3n6lW1eSSm4ZLZWIRNvgODnDgJ6MjRhASDu04YbNonEYrMhj4XdpOImVLQIr9YI6tmkIjLQMZ2gLtFQEoG2bi5wDH3QH1WVdkkj/oqNP
5wp5tkCIgJ0R0leRHPs1wSA4w+9cZJusAkLIgYh00pCMJxybC/JOAccTogS0aRwTN1Hzy1pwANoihwjICFAkLqGbE5Fd5p+wDS8Hk2GncApdbjAECuQrFUq/QEd
SIcPIMX2CutgAB72MgRnBbW2KoHo4sX5DfcQAhBycxeItgDxOjCFfMFqxtbrQjAgagJyFiJ2/jl+B6gkEkOisgcghHTrs45qY98CiJWIWIQ1GJJWOIAlMwCfN8K
XRnZZph4NIyiwNxEMgBXDfORABhZAoIYTp68I3T8gNGbJ/Ez+jAMHNh8fqieD2zDCgD6cwvzRy0ApIs/+X8EYd/3Ui/w/QXviVG33gDvonDQzQCGlTXGuHAJCGY
whgaOpSUkvyHJEwBq63gIpwDz+AAiNxHELCAEKSfM1He5H3GBThah6YCOxlJk9xeLRWgy1iFgpISQX3gqOQHb1lG8NhgTaYFt8DDN6BIm1QC7nHg3Hgg59AAMAA
UA8wgEPYIwJ2FU7xgCJxc0xIDU7IQt4wOk7RGVWYDIJQCa8TPlu4hF2ICM8gb0CBEIWnfilDDyj4Zd3BGfZgI7zhDDnYhupgXAogBS3BCgYgdRqBeRRRAO9AT22
QD80wEvDhW2wIiDB4hqHGGBDhDCzXV9UxI79AHC11ajpgiUbBC++AQn6AHHDxOo/g0gBhoIaYogDPQGGmqAuqIVxF9gHVUR6yKAK8gYhiuBnocIteMYXRkBK/SG
yRhAAH0Ryq2DASaIyNQRPykA9LZg+RBBU1pw2wwBkKRo2nQRNrAQryQS6UFI2c8Q7OaIviaBRfUH32wDrJBCRroIvvuB32uAPdIQACYUaB4YzymI+UBXqi0wN/4
Y4EmQghAAA7);

5. data: image/gif; base64,R0lGODlhyQBPAMQfAP///…
Data URIs
What does it look like?
Composition

6. Data URIs
Advantages
• Less requests
• Load at the same time as HTML/CSS
• No HTTPS dependency
• Easier to maintain than sprites
• Semantic

7. Data URIs
Disadvantages
• Fallback necessary for IE7
• Up to 30% more data
• Cacheable?
• Re-encoding required for changes
• Maximum size

8. Data URIs
Unknown
• Does Google index them?

9. Data URIs
The problem:
Ungainly CSS sprites

10. Data URIs
The problem:
Overusing sprites &
background images

11. “Google has top-secret algorithms designed to detect when
text is hidden/positioned off screen. If this type of hidden
text is detected, our important red phone rings, and this
becomes one of the signals that may cause us to believe
your site is deceptive.”
- Maile Ohye, Google
25 May 2010
Data URIs
More problems:
Gaming Google

12. Data URIs
The solution:
Data URIs & CSS3 effects

13. Data URIs
Before:
Each CSS image here has a response
time of approx. 200ms, which 8 CSS images
means about 1.5 seconds waiting
for these images alone.

14. Data URIs
NB: Extra file weight is due to extra
promo images on test1 not present After:
on live.
DATA URIs actually increase file size 1 CSS image
by 17.8Kb, but save 1.3s in response
times

15. Data URIs
The Grosvenor footer
Going Cross-browser

16. Data URIs

17. Data URIs

18. Data URIs

19. Data URIs
But it’s not perfect…
• Footer URIs now load on every page
• Not cached for the site
• File storage for originals/fallbacks

20. Data URIs
Top tips
• Optimise and Smush your image first
• More data in, more data out
• Gzipping is brilliant
• 2-3% of filesize rather than 20-30%
• The ideal solution?
• Build URIs on the fly