¿Es buena o mala práctica incrustar datos de imágenes de fondo en CSS como Base64?
Estaba mirando la fuente de un userscript 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 querría empaquetar todo lo que pueda dentro de la fuente en lugar de hospedarlo en un servidor, eso es bastante obvio. Pero como no había visto esta técnica anteriormente, consideré su uso y parece atractivo por varias razones:
- Reducirá la cantidad de solicitudes HTTP al cargar la página, mejorando así rendimiento
- Si no hay CDN, entonces reducirá la cantidad de tráfico generado a través de las cookies que se envían junto con las imágenes
- Los archivos CSS se pueden almacenar en caché
- Los archivos CSS se pueden comprimir con GZIP
Teniendo en cuenta que IE6 (por ejemplo) tiene problemas con la caché para las imágenes de fondo, esto 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 base64 codificar las imágenes?
Actualizar - resultados de las pruebas
Probando con imagen: http://fragged.org/dev/map-shot.jpg - 133.6 Kb
URL de Prueba: http://fragged.org/dev/base64.html
Archivo CSS dedicado: http://fragged.org/dev/base64.css - 178.1 Kb
-
Codificación GZIP lado del servidor
Tamaño resultante enviado al cliente (YSLOW prueba de componentes): 59.3 Kb
Ahorro de datos enviados al navegador cliente de: 74.3 Kb
Agradable, pero será un poco menos útil para imágenes más pequeñas, supongo.
ACTUALIZACIÓN: Bryan McQuade, un ingeniero de software en Google, trabajando en PageSpeed, expresó en ChromeDevSummit 2013 que data:uris en CSS se considera un anti-patrón de bloqueo de render para entregar CSS crítico/mínimo durante su charla
#perfmatters: Instant mobile web apps
. Véase http://developer.chrome.com/devsummit/sessions y ten eso en mente - diapositiva real
Warning: Undefined property: agent_blog_content::$date_asked in /var/www/agent_etc/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 32
Warning: Undefined property: agent_blog_content::$count_answers in /var/www/agent_etc/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 52