¿Cuál es la ventaja de convertir cualquier imagen a CSS puro?

Estos son los que puedo pensar:

  1. Menos conexiones de red al servidor web
  2. Es posible que el usuario vea la imagen mientras se carga la página (no espera HTML y luego imgs)

No quiero ser ese tipo (me refiero a la persona que responde lo contrario de la pregunta) pero también veo algunas desventajas:

  1. No 100% de ahorro según lo probado (captura de pantalla y voilà)
  2. Página más pesada: en mi prueba, el contenido de la imagen es 4 veces más grande que un JPEG normal. Esto puede aliviarse utilizando la compresión gzip en el servidor web (pero todo el mundo hace eso ahora … ¿verdad?)
  3. DOM / Browser se bloquea al representar este div .
  4. Preprocesamiento de imagen, aunque esto puede ser automatizado.

Las imágenes en las páginas web pueden ser un problema complejo como queremos que sean. Se pueden aplicar otras soluciones :

  • CDN (personas como esta, no he visto muchas mejoras al usarlas) [1]
  • Nuevas tecnologías de imágenes [2]
  • Lienzo de HTML5
  • Carga lenta
  • Optimizador de imagen [3] [4] [5]

Notas al pie

[1] Por qué no usamos un CDN: una historia sobre SPDY y SSL

[2] BPG vs JPEG vs WebP vs JPEG-XR

[3] TinyPNG – Comprime imágenes PNG mientras preserva la transparencia

[4] jpegoptim

[5] imagemin / optipng-bin

Se me ocurren dos ventajas:

  1. Si lo entiendo correctamente, convierte la imagen en un montón de píxeles separados y los muestra como colores. Esto evita que un visitante guarde su imagen, ya que no hay imagen para guardar, por lo que actúa como una seguridad. Por supuesto, es inútil, ya que no impedirá que nadie imprima la imagen.
  2. Puede distribuir su página web como un archivo único sin archivos de imagen o archivos de hoja de estilo externos adjuntos. Esto es bueno si, por ejemplo, desea incluir un manual html para su producto. Por lo tanto, el cliente solo tiene que descargar un archivo, pero tener imágenes y fotos reales contenidas en él. Para resumir, es bueno para la portabilidad.