¿Es buena o mala práctica incrustar datos de imágenes de fondo en CSS como Base64?

Esta respuesta está desactualizada y no debería usarse.

1) La latencia media 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) Multiplexes HTTP2 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. Tan hay algunos casos de uso en los que interferir tus imágenes como datos en plantillas CSS o HTML podría ser beneficioso en aplicaciones web móviles. Debe medir el uso caso por caso not no estoy abogando por 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 se pueden almacenar en caché. Los límites para iOS 3.2 eran bastante bajos (25K por archivo), pero cada vez son más grandes (100K) para las versiones más recientes de Mobile Safari. Así que asegúrese de mantener una observe el tamaño total del 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 use más de una imagen o necesite hacer referencia a ella varias veces en su CSS, puede considerar usar un solo mapa de imagen en lugar de recortar sus imágenes individuales (consulte Sprites CSS).

Una de las cosas que sugeriría es tener dos hojas de estilo separadas: Uno con sus definiciones de estilo regulares y otro que contiene sus imágenes en codificación base64.

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

De esta manera se asegurará de que su hoja de estilo regular se descargue y aplique lo antes posible al documento, pero al mismo tiempo se beneficiará de las solicitudes http reducidas y otros beneficios que los uri de datos brindan usted.

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

El W3C también recomienda este enfoque para dispositivos móviles y si utiliza asset pipeline en rails, esta es una característica predeterminada al comprimir su css

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

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 el estilo de la capa de presentación, y como se mencionó anteriormente, si estás haciendo interfaz de usuario móvil es definitivamente una buena idea mantener todo el estilo en un solo archivo para que pueda ser almacenado en caché una vez.

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

Traté de crear un concepto en línea de herramienta analizador 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
• Detecta datos de compresión (gzip) y tamaño en la URL
• Compare el tamaño de los datos originales, el tamaño de los datos base64 y el tamaño de los datos base64 comprimidos con gzip
• Convertir la URL (imagen, fuente, css,...) a un esquema de URI de datos base64.
• Recuento número de solicitudes que pueden salvarse mediante URI de datos

Los comentarios/sugerencias son bienvenidos.

Antonin

Puede codificarlo en PHP:)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("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

Trayendo un poco para los usuarios de Sublime Text 2, hay un plugin que da el código base64 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 plugin porque sobrescribiría el archivo y destruiría.

Gracias por la información aquí. Estoy encontrando esta incrustación útil y particularmente para dispositivos móviles, especialmente con el archivo CSS de las imágenes incrustadas que se almacena en caché.

Para ayudar a hacer la vida más fácil, como mi editor de archivos(s) no manejan de forma nativa esto, hice un par de scripts simples para el trabajo de edición de computadoras portátiles/de escritorio, compartir aquí en caso de que sean de utilidad para cualquier otra persona. Me he quedado con php, ya que está manejando estas cosas directamente y muy bien.

Bajo 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).

Luego puede hacer clic derecho en una imagen en el explorador de archivos y enviarla al archivo de lotes.

Aceptar Admiinstartor request, y esperar a que las ventanas de shell de comandos negras se cierren.

Luego simplemente pegue el resultado del portapapeles en su editor de texto...

<img src="|">

O

 `background-image : url("|")` 

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 ruta, que 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));

?>

Por lo que he investigado,

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

No Use : 1. Cuando son imágenes más grandes. 2. Iconos como svg. Ya que son buenos y gzipped después de la compresión.