¿Está incrustando datos de imágenes de fondo en CSS como una buena o mala práctica de Base64?

Estaba mirando el origen de una 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 desearía agrupar todo lo que pueda dentro de la fuente en lugar de alojarlo en un servidor, eso es bastante obvio. Pero como no había visto esta técnica anteriormente, consideré su uso y parece atractiva por varias razones:

  1. Reducirá la cantidad de solicitudes HTTP en la carga de la página, mejorando así el rendimiento
  2. Si no hay CDN, reducirá la cantidad de tráfico generado a través de las cookies que se envían al costado de las imágenes.
  3. Los archivos CSS se pueden almacenar en caché
  4. Los archivos CSS pueden ser GZIPPED

Teniendo en cuenta que IE6 (por ejemplo) tiene problemas con la memoria caché para imágenes de fondo, parece que no es la peor idea …

Entonces, ¿es esta una buena o una mala práctica, por qué NO lo usarías y qué herramientas usarías para codificar las imágenes en base64?

actualización – resultados de las pruebas

  • probando con la imagen: http://sofes.miximages.com/css/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

  • GZIP que codifica el lado del servidor

  • tamaño resultante enviado al cliente (prueba de componentes YSLOW): 59.3Kb

  • Guardado de datos enviados al navegador del cliente de: 74.3Kb

Bien, 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 los datos: uris en CSS se considera un anti-patrón de locking de presentación para entregar CSS crítico / mínimo durante su charla #perfmatters: Instant mobile web apps . Visita http://developer.chrome.com/devsummit/sessions y tenlo en cuenta: diapositiva real

    No es una buena idea cuando quiere que sus imágenes y la información de estilo se guarden 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 tiempo en descargar el archivo dejando su sitio sin ninguna información de estilo hasta que la descarga se complete. Para imágenes pequeñas que no tiene la intención de cambiar a menudo, si alguna vez es una buena solución.

    en cuanto a la generación de la encoding base64:

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Esta respuesta no está actualizada y no debe usarse.

    1) La latencia promedio es mucho más rápida en los dispositivos móviles en 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

    2) HTTP2 multiplexes https://http2.github.io/faq/#why-is-http2-multiplexed

    Los “URI de datos” definitivamente deben considerarse para sitios móviles. El acceso HTTP a través de redes celulares viene con una latencia más alta por solicitud / respuesta. Por lo tanto, hay algunos casos de uso en los que bloquear las imágenes como datos en plantillas CSS o HTML podría ser beneficioso para las aplicaciones web móviles. Debe medir el uso caso por caso. No estoy recomendando que los URI de datos se utilicen en todas partes en una aplicación web móvil.

    Tenga en cuenta que los navegadores móviles tienen limitaciones en el tamaño total de los archivos que pueden almacenarse en caché. Los límites para iOS 3.2 fueron bastante bajos (25K por archivo), pero se están haciendo más grandes (100K) para las versiones más nuevas de Mobile Safari. Por lo tanto, 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/

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Si hace referencia a esa imagen solo una vez, no veo ningún problema para incrustarla en su archivo CSS. Pero una vez que usa más de una imagen o necesita hacer referencia a ella varias veces en su CSS, puede considerar el uso de un mapa de imágenes individual, en su lugar puede recortar sus imágenes individuales (consulte CSS Sprites ).

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Una de las cosas que sugeriría es tener dos hojas de estilo separadas: una con sus definiciones de estilo regulares y otra que contiene sus imágenes en encoding base64.

    Debe incluir la hoja de estilo base antes de la hoja de estilos de la imagen, por supuesto.

    De esta manera, se asegurará de que su hoja de estilo habitual se descargue y aplique lo más pronto posible al documento, pero al mismo tiempo se beneficiará de la reducción de las solicitudes de HTTP y de otros beneficios que le brindan los datos.

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Base64 agrega alrededor del 10% del tamaño de la imagen después de GZipped, pero eso supera los beneficios cuando se trata de dispositivos móviles. Como hay una tendencia general con un diseño web receptivo, es muy recomendable.

    El W3C también recomienda este enfoque para dispositivos móviles y si utiliza la canalización de activos en Rails, esta es una característica predeterminada al comprimir su CSS

    http://www.w3.org/TR/mwabp/#bp-conserve-css-images

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    No estoy de acuerdo con la recomendación de crear archivos CSS separados para imágenes no editoriales.

    Asumiendo que las imágenes son para propósitos de interfaz de usuario, es estilo de capa de presentación, y como se mencionó anteriormente, si está haciendo una interfaz de usuario móvil definitivamente es una buena idea mantener todo el estilo en un solo archivo para que se pueda almacenar en caché una vez.

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    En mi caso, me permite aplicar una hoja de estilos CSS sin tener que preocuparme por copiar las imágenes asociadas, dado que ya están incrustadas.

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Traté de crear un concepto en línea de herramienta de análisis CSS / HTML:

    http://www.motobit.com/util/base64/css-images-to-base64.asp

    Puede:

    • Descargar y analizar archivos HTML / CSS, extraer elementos href / src / url
    • Detectar compresión (gzip) y datos de tamaño en la URL
    • Compare tamaño de datos originales, tamaño de datos base64 y tamaño de datos gzipped base64
    • Convierta la URL (imagen, fuente, css, …) a un esquema de URI de datos base64.
    • Contar el número de solicitudes que pueden ser remediadas por los URI de datos

    Comentarios / sugerencias son bienvenidos.

    Antonin

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Puedes codificarlo en PHP 🙂

     "> Or display in our dynamic CSS.php file: background: url("https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/data:image/gif;base64,< ?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>"); 1 That's sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents(): < ?php // convert image to dataURL $img_source = "feed-icon.gif"; // image path/name $img_binary = fread(fopen($img_source, "r"), filesize($img_source)); $img_string = base64_encode($img_binary); ?> 

    Fuente

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Trayendo un poco para los usuarios de Sublime Text 2, hay un complemento que le da al código base64 que cargamos las imágenes en el ST.

    Llamado Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

    PD: Nunca guarde este archivo generado por el complemento porque sobrescribiría el archivo y lo destruiría.

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Gracias por la información aquí. Creo que esta inserción es útil y especialmente para dispositivos móviles, especialmente con el archivo css de las imágenes incrustadas almacenadas en caché.

    Para facilitar la vida, ya que mis editores de archivos no manejan esto de forma nativa, realicé un par de scripts simples para el trabajo de edición de equipos portátiles / computadoras de escritorio, los cuales comparto aquí en caso de que sirvan para otros. Me he quedado con php ya que está manejando estas cosas directamente y muy bien.

    En Windows 8.1 decir —

     C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo 

    … allí como Administrador puede establecer un acceso directo a un archivo por lotes en su ruta. Ese archivo por lotes llamará a un script php (cli).

    A continuación, puede hacer clic con el botón derecho en una imagen en el explorador de archivos y Enviar al archivo por lotes.

    Acepte la solicitud de Admiinstartor y espere a que se cierren las ventanas negras del shell de comandos.

    Luego simplemente pega el resultado del portapapeles en tu editor de texto …

      

    o

      `background-image : url("https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|")` 

    Lo siguiente debe ser adaptable para otros sistemas operativos.

    Archivo por lotes…

     rem @echo 0ff rem Puts 64 encoded version of a file on clipboard php c:\utils\php\make64Encode.php %1 

    Y con php.exe en su camino, eso llama a un script php (cli) …

     < ?php function putClipboard($text){ // Windows 8.1 workaround ... file_put_contents("output.txt", $text); exec(" clip < output.txt"); } // somewhat based on http://perishablepress.com/php-encode-decode-data-urls/ // convert image to dataURL $img_source = $argv[1]; // image path/name $img_binary = fread(fopen($img_source, "r"), filesize($img_source)); $img_string = base64_encode($img_binary); $finfo = finfo_open(FILEINFO_MIME_TYPE); $dataType = finfo_file($finfo, $img_source); $build = "data:" . $dataType . ";base64," . $img_string; putClipboard(trim($build)); ?> 

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Por lo que he investigado,

    Uso: 1. Cuando estás usando un sprite svg. 2. Cuando sus imágenes son de menor tamaño (máximo de 200 mb).

    No usar: 1. Cuando eres imágenes más grandes. 2. Iconos como svg. Como ya están bien y gzip después de la compresión.