Es la incorporación de los datos de imagen de fondo en CSS como Base64 práctica buena o mala?

StackOverflow https://stackoverflow.com/questions/1124149

Pregunta

Me estaba mirando a la fuente de un userscript Greasemonkey y se dio cuenta 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 para agrupar todo lo que pueda dentro de la fuente en lugar de alojarlo en un servidor, que es lo suficientemente obvia. Pero ya que no había visto esta técnica con anterioridad, he considerado su uso y parece atractiva por varias razones:

  1. Se reducirá la cantidad de peticiones HTTP al cargar la página, mejorando así el rendimiento
  2. Si no hay CDN, a continuación, se reducirá la cantidad de tráfico generado a través de cookies que se envían junto con las imágenes
  3. archivos CSS pueden almacenar en caché
  4. archivos CSS se pueden gzipped

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

Por lo tanto, se trata de una buena o mala práctica, ¿por qué no usarlo y qué herramientas utilizaría para base64 codificar las imágenes?

actualización - resultados de las pruebas

Niza, pero será un poco menos útil para imágenes más pequeñas, supongo.

  

ACTUALIZACIÓN: Bryan McQuade, un ingeniero de software de Google, trabajando en Page Speed, expresó en 2013 que los datos ChromeDevSummit: URIs en CSS se considera un render de bloqueo anti-patrón para la entrega de CSS crítica / mínima durante su #perfmatters: Instant mobile web apps charla. Ver http://developer.chrome.com/devsummit/sessions y tener eso en mente - < a href = "https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194" rel = "noreferrer"> diapositiva real

¿Fue útil?

Solución

No es una buena idea cuando usted quiere que sus imágenes e información de estilo que se almacenan en caché por separado. Además, si se codifica una imagen grande o un número significativo de imágenes en su archivo css que tomará el navegador más en descargarse el archivo de salir de su sitio sin ninguna de la información de estilo hasta que se complete la descarga. Para las pequeñas imágenes que no se pretendía en el cambio de frecuencia o nunca es una buena solución.

tan lejos como la generación de la codificación base64:

Otros consejos

Esta respuesta está fuera de fecha y no se debe utilizar.

1) Promedio de latencia es mucho más rápido en el móvil en 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 multicines https://http2.github.io/faq/#why-is- HTTP2 multiplexados

"Datos URI" definitivamente debe ser considerado para los sitios móviles. el acceso HTTP a través de redes de telefonía móvil viene con una mayor latencia por solicitud / respuesta. Así que hay algunos casos de uso donde atascados en sus imágenes como datos en plantillas CSS o HTML podría ser beneficioso en aplicaciones web móviles. Se debe medir el uso sobre una base caso por caso -. No estoy abogando por que las URIs de datos se debe utilizar en todas partes de una aplicación web para móviles

Tenga en cuenta que los navegadores móviles tienen limitaciones en el tamaño total de archivos que se pueden almacenar en caché. Límites para IOS 3.2 eran bastante bajos (25K por archivo), pero son cada vez más grande (100K) hay nuevas versiones de Safari Mobile. Así que asegúrese de mantener un ojo en su tamaño total del archivo cuando se incluye URIs de datos.

http: //www.yuiblog. com / blog / 2010/06/28 / móvil-navegador-cache-límites /

Si hace referencia a que la imagen sólo una vez, no veo un problema para incrustarlo en su archivo CSS. Pero una vez que se utiliza más de una imagen o necesita hacer referencia a ella varias veces en el CSS, es posible considerar el uso de un único mapa de imagen en lugar a continuación, puede recortar las imágenes individuales a partir de (ver CSS Sprites ).

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

Hay que incluir la hoja de estilo de base antes de que la hoja de estilo de imagen, por supuesto.

De esta manera se asegurará de que usted está de estilo regular se descargan y se aplican tan pronto como sea posible con el documento, sin embargo, al mismo tiempo que se beneficia de la reducción de las peticiones HTTP y otros beneficios ficha URIs le dan.

Base64 añade alrededor del 10% del tamaño de imagen después de gzipped pero que compense los beneficios cuando se trata de teléfonos. Dado que existe una tendencia general con el diseño web de respuesta, es muy recomendable.

El W3C también recomienda este enfoque para móviles y si se utiliza tubería de activos en los carriles, esta es una función predeterminada cuando se comprime el CSS

http://www.w3.org/TR/mwabp / # pb-de conserva-CSS-imágenes

No estoy de acuerdo con la recomendación de crear archivos CSS separadas para las imágenes no editorial.

Suponiendo que las imágenes son con fines de interfaz de usuario, es capa de estilo de presentación, y como se mencionó anteriormente, si está haciendo de interfaz de usuario móvil es sin duda una buena idea para 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 estilo CSS sin tener que preocuparse acerca de cómo copiar imágenes asociadas, puesto que ya están incrustados en el interior.

He intentado crear un concepto de línea de herramienta de análisis de CSS / HTML:

http://www.motobit.com/util/ base64 / CSS-imágenes-a-base64.asp

Se puede:

  • Descargar y analizar archivos de HTML / CSS, elementos extracto href / src / URL
  • Detección de compresión (gzip) y datos de tamaño en la dirección URL
  • Comparación de tamaño de los datos originales, el tamaño de los datos de base 64 y el tamaño de los datos base 64 gzip
  • Convertir la URL (imagen, fuente, CSS, ...) a un esquema de URI de datos base 64.
  • Contar el número de solicitudes que puede ser ahorrado por Data URI

Comentarios / sugerencias son bienvenidas.

Antonin

Puede codificar 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

Traer un poco para los usuarios de Sublime Text 2, hay un plugin que le da el código de base 64 que cargar las imágenes en el ST.

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

PS:. Nunca guardar este archivo generado por el plugin porque sería sobrescribir el archivo y destruiría

Gracias por la información aquí. Estoy descubriendo este incrustar útil y particularmente para móviles especialmente con css las imágenes incrustadas se almacena en caché.

Para ayudar a hacer la vida más fácil, ya mi editor (s) de archivos de forma nativa no manejan esto, hice un par de secuencias de comandos simples para el trabajo de edición portátil / escritorio, comparten aquí en caso de que sean alguna utilidad para cualquier otra persona. He pegado con php, ya que se encarga de estas cosas directamente y muy bien.

En Windows 8.1 dicen --- 

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

... allí como un administrador puede establecer un acceso directo a un archivo por lotes en su camino. Archivo por lotes que se llame a un script PHP (CLI).

A continuación, puede hacer clic en una imagen en el explorador de archivos, y el archivo batch SendTo.

Solicitud de Autorización Admiinstartor, y esperar a que las ventanas de comandos shell negro para cerrar.

A continuación, simplemente pegar el resultado desde el portapapeles en su en su editor de texto ... 

<img src="|">

o 

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

Tras debe ser adaptable para otro sistema operativo.

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, que llama a un php (CLI) guión ... 

<?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 se utiliza un sprite de SVG. 2. Cuando las imágenes son de un tamaño menor (200 MB como máximo).

No utilizar: 1. Cuando son imágenes más grandes. 2. Los iconos como de SVG. Ya que son ya bien y después de la compresión gzip.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top