¿Incrustar datos de imágenes de fondo en CSS es una buena o mala práctica de Base64?
Estaba mirando la fuente de un script de usuario de Greasemonkey y noté lo siguiente en su CSS:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
Puedo apreciar que un script de Greasemonkey quiera agrupar todo lo que pueda dentro del código fuente en lugar de alojarlo en un servidor, eso es bastante obvio. Pero como no había visto esta técnica anteriormente, me planteé su uso y me parece atractiva por varios motivos:
- Reducirá la cantidad de solicitudes HTTP al cargar la página, mejorando así el rendimiento.
- Si no hay CDN, se reducirá la cantidad de tráfico generado a través del envío de cookies junto con las imágenes.
- Los archivos CSS se pueden almacenar en caché
- Los archivos CSS pueden ser GZIPPED
Teniendo en cuenta que IE6 (por ejemplo) tiene problemas con el caché de las imágenes de fondo, parece que no es la peor idea...
Entonces, ¿es esta una buena o mala práctica? ¿Por qué NO la usarías y qué herramientas usarías para codificar las imágenes en base64?
actualización - resultados de las pruebas
prueba con imagen: http://fragged.org/dev/map-shot.jpg - 133.6Kb
URL de prueba: http://fragged.org/dev/base64.html
archivo CSS dedicado: http://fragged.org/dev/base64.css - 178,1Kb
Lado del servidor de codificación GZIP
tamaño resultante enviado al cliente (prueba de componentes YSLOW): 59,3 Kb
Ahorro de datos enviados al navegador del cliente de: 74.3Kb
Bien, pero supongo que será un poco menos útil para imágenes más pequeñas.
ACTUALIZACIÓN: Bryan McQuade, un ingeniero de software de Google que trabaja en PageSpeed, expresó en ChromeDevSummit 2013 que data:uris en CSS se considera un antipatrón de bloqueo de renderizado para entregar CSS crítico/mínimo durante su charla
#perfmatters: Instant mobile web apps. Consulte http://developer.chrome.com/devsummit/sessions y téngalo en cuenta: diapositiva real
No es una buena idea cuando desea que las imágenes y la información de estilo se almacenen en caché por separado. Además, si codifica una imagen grande o una cantidad significativa de imágenes en su archivo CSS, el navegador tardará más en descargar el archivo y dejará su sitio sin información de estilo hasta que se complete la descarga. Para imágenes pequeñas que no desea cambiar con frecuencia, si es que alguna vez alguna vez, es una buena solución.
en cuanto a generar la codificación base64:
- http://b64.io/
- http://www.motobit.com/util/base64-decoder-encoder.asp (cargar)
- http://www.greywyvern.com/code/php/binary2base64 (desde el enlace con pequeños tutoriales debajo)
Esta respuesta está desactualizada y no debe usarse.
1) La latencia promedio es mucho más rápida en dispositivos móviles en 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network
2) Multiplexores HTTP2 https://http2.github.io/faq/#why-is-http2-multiplexed
Definitivamente se deben considerar los "URI de datos" para los sitios móviles. El acceso HTTP a través de redes celulares viene con una mayor latencia por solicitud/respuesta. Por lo tanto, existen algunos casos de uso en los que insertar imágenes como datos en plantillas CSS o HTML podría resultar beneficioso en aplicaciones web móviles. Debe medir el uso caso por caso; no estoy defendiendo que los URI de datos deban usarse en todas partes en una aplicación web móvil.
Tenga en cuenta que los navegadores móviles tienen limitaciones en cuanto al tamaño total de los archivos que se pueden almacenar en caché. Los límites para iOS 3.2 eran bastante bajos (25 KB por archivo), pero están aumentando (100 KB) para las versiones más nuevas de Mobile Safari. Así que asegúrese de estar atento al tamaño total de su archivo al incluir URI de datos.
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
Si hace referencia a esa imagen solo una vez, no veo ningún problema para incrustarla en su archivo CSS. Pero una vez que uses más de una imagen o necesites hacer referencia a ella varias veces en tu CSS, podrías considerar usar un único mapa de imagen del que luego podrás recortar tus imágenes individuales (consulta CSS Sprites ).
Una de las cosas que sugeriría es tener dos hojas de estilo separadas: una con las definiciones de estilo habituales y otra que contenga las imágenes en codificación base64.
Por supuesto, debe incluir la hoja de estilo base antes de la hoja de estilo de la imagen.
De esta manera, se asegurará de que su hoja de estilo habitual se descargue y se aplique lo antes posible al documento y, al mismo tiempo, se beneficiará de la reducción de solicitudes http y otros beneficios que le brindan los data-uris.
