Cómo usar SVG como marcador de posición y otras técnicas de carga de imágenes

La generación de SVG a partir de imágenes se puede usar para marcadores de posición. ¡Sigue leyendo!

Me apasiona la optimización del rendimiento de la imagen y hacer que las imágenes se carguen rápidamente en la web. Una de las áreas más interesantes de exploración son los marcadores de posición: qué mostrar cuando la imagen aún no se ha cargado.

Durante los últimos días me he encontrado con algunas técnicas de carga que usan SVG, y me gustaría describirlas en esta publicación.

En esta publicación veremos estos temas:

  • Resumen de los diferentes tipos de marcadores de posición
  • Marcadores de posición basados ​​en SVG (bordes, formas y siluetas)
  • Automatizando el proceso.

Resumen de los diferentes tipos de marcadores de posición

En el pasado, he escrito sobre marcadores de posición y carga perezosa de imágenes, y también hablé sobre ello. Al cargar imágenes de forma diferida, es una buena idea pensar qué representar como marcador de posición, ya que puede tener un gran impacto en el rendimiento percibido del usuario. En el pasado describí varias opciones:

Varias estrategias para llenar el área de una imagen antes de que se cargue.

  • Mantener el espacio vacío para la imagen: en un mundo de diseño receptivo, esto evita que el contenido salte. Esos cambios de diseño son malos desde el punto de vista de la experiencia del usuario, pero también para el rendimiento. El navegador se ve obligado a hacer cálculos de diseño cada vez que obtiene las dimensiones de una imagen, dejando espacio para ello.
  • Marcador de posición: imagine que estamos mostrando la imagen de perfil de un usuario. Es posible que queramos mostrar una silueta en el fondo. Esto se muestra mientras se carga la imagen principal, pero también cuando esa solicitud falló o cuando el usuario no configuró ninguna imagen de perfil. Estas imágenes suelen estar basadas en vectores y, debido a su pequeño tamaño, son un buen candidato para estar en línea.
  • Color sólido: tome un color de la imagen y utilícelo como color de fondo para el marcador de posición. Este puede ser el color dominante, el más vibrante ... La idea es que se base en la imagen que está cargando y debería ayudar a hacer que la transición entre ninguna imagen y la imagen cargada sea más suave.
  • Imagen borrosa: también llamada técnica de desenfoque. Representa una versión pequeña de la imagen y luego pasa a la versión completa. La imagen inicial es pequeña tanto en píxeles como en KB. Para eliminar artefactos, la imagen se amplía y se difumina. He escrito anteriormente sobre esto en Cómo Medium carga la imagen progresivamente, Usando WebP para crear pequeñas imágenes de vista previa y Más ejemplos de Carga progresiva de imágenes.

Resulta que hay muchas otras variaciones y muchas personas inteligentes están desarrollando otras técnicas para crear marcadores de posición.

Uno de ellos es tener gradientes en lugar de colores sólidos. Los gradientes pueden crear una vista previa más precisa de la imagen final, con muy poca sobrecarga (aumento de la carga útil).

Usando gradientes como fondos. Captura de pantalla de Gradify, que ya no está en línea. Código en GitHub.

Otra técnica es usar SVG basados ​​en la imagen, que está obteniendo cierta tracción con experimentos y hacks recientes.

Marcadores de posición basados ​​en SVG

Sabemos que los SVG son ideales para imágenes vectoriales. En la mayoría de los casos, queremos cargar un mapa de bits, por lo que la pregunta es cómo vectorizar una imagen. Algunas opciones están utilizando bordes, formas y áreas.

Bordes

En una publicación anterior expliqué cómo encontrar los bordes de una imagen y crear una animación. Mi objetivo inicial era intentar dibujar regiones, vectorizando la imagen, pero no sabía cómo hacerlo. Me di cuenta de que usar los bordes también podía ser innovador y decidí animarlos creando un efecto de "dibujo".

Formas

SVG también se puede utilizar para dibujar áreas de la imagen en lugar de bordes / bordes. En cierto modo, vectorizaríamos una imagen de mapa de bits para crear un marcador de posición.

En aquellos días intenté hacer algo similar con los triángulos. Puedes ver el resultado en mis charlas en CSSConf y Render Conf.

El codepen anterior es una prueba de concepto de un marcador de posición basado en SVG compuesto por 245 triángulos. La generación de los triángulos se basa en la triangulación de Delaunay utilizando el poliservidor de Possan. Como se esperaba, cuantos más triángulos use el SVG, mayor será el tamaño del archivo.

Primitive y SQIP, una técnica LQIP basada en SVG

Tobias Baldauf ha estado trabajando en otra técnica de Marcadores de imagen de baja calidad utilizando SVG llamados SQIP. Antes de profundizar en SQIP, daré una descripción general de Primitive, una biblioteca en la que se basa SQIP.

Primitive es bastante fascinante y definitivamente te recomiendo que lo revises. Convierte una imagen de mapa de bits en un SVG compuesto de formas superpuestas. Su pequeño tamaño lo hace adecuado para incluirlo directamente en la página. Un viaje de ida y vuelta menos y un marcador de posición significativo dentro de la carga útil HTML inicial.

Primitive genera una imagen basada en formas como triángulos, rectángulos y círculos (y algunos otros). En cada paso agrega uno nuevo. Cuantos más pasos, la imagen resultante se parece más a la original. Si su salida es SVG, también significa que el tamaño del código de salida será mayor.

Para entender cómo funciona Primitive, lo revisé en un par de imágenes. Generé SVG para la obra de arte usando 10 formas y 100 formas:

Procesando esta imagen usando Primitive, usando 10 formas y 100 formas.Procesando esta imagen usando Primitive, usando 10 formas y 100 formas.

Cuando usamos 10 formas de las imágenes, comenzamos a comprender la imagen original. En el contexto de los marcadores de posición de imagen, existe la posibilidad de utilizar este SVG como marcador de posición. En realidad, el código para el SVG con 10 formas es realmente pequeño, alrededor de 1030 bytes, que se reduce a ~ 640 bytes al pasar la salida a través de SVGO.

              

Las imágenes generadas con 100 formas son más grandes, como se esperaba, con un peso de ~ 5kB después de SVGO (8kB antes). Tienen un gran nivel de detalle con una carga útil aún pequeña. La decisión de cuántos triángulos usar dependerá en gran medida del tipo de imagen (por ejemplo, contraste, cantidad de colores, complejidad) y nivel de detalle.

Sería posible crear un script similar a cpeg-dssim que ajuste la cantidad de formas utilizadas hasta que se cumpla un umbral de similitud estructural (o un número máximo de formas en el peor de los casos).

Estos SVG resultantes también son excelentes para usar como imágenes de fondo. Al estar limitados por tamaño y basados ​​en vectores, son un buen candidato para imágenes de héroes y grandes fondos que de lo contrario mostrarían artefactos.

SQIP

En las propias palabras de Tobias:

SQIP es un intento de encontrar un equilibrio entre estos dos extremos: utiliza Primitive para generar un SVG que consta de varias formas simples que se aproximan a las características principales visibles dentro de la imagen, optimiza el SVG usando SVGO y le agrega un filtro Gaussian Blur. . Esto produce un marcador de posición SVG que pesa solo ~ 800–1000 bytes, se ve suave en todas las pantallas y proporciona una señal visual del contenido de la imagen por venir.

El resultado es similar al uso de una pequeña imagen de marcador de posición para la técnica de desenfoque (lo que hacen Medium y otros sitios). La diferencia es que, en lugar de utilizar una imagen de mapa de bits, por ejemplo, JPG o WebP, el marcador de posición es SVG.

Si ejecutamos SQIP contra las imágenes originales, obtendremos esto:

Las imágenes de salida utilizan SQIP para la primera imagen y la segunda.

El SVG de salida es ~ 900 bytes, e inspeccionando el código podemos detectar el filtro feGaussianBlur aplicado al grupo de formas:

    < path fill = "# 817c70" d = "M0 0h2000v2000H0z" />           

SQIP también puede generar una etiqueta de imagen con el contenido SVG codificado en Base 64:

Siluetas

Acabamos de ver el uso de SVG para bordes y formas primitivas. Otra posibilidad es vectorizar las imágenes "trazándolas". Mikael Ainalem compartió un código abierto hace unos días mostrando cómo usar una silueta de 2 colores como marcador de posición. El resultado es realmente bonito:

Los SVG en este caso fueron dibujados a mano, pero la técnica rápidamente generó integraciones con herramientas para automatizar el proceso.

  • Gatsby, un generador de sitio estático que usa React ahora es compatible con estos SVG trazados. Utiliza un puerto JS de potrace para vectorizar las imágenes.
  • Craft 3 CMS, que también agregó soporte para siluetas. Utiliza un puerto PHP de potrace.
  • image-trace-loader, un cargador Webpack que utiliza potrace para procesar las imágenes.

También es interesante ver una comparación de la salida entre el cargador de paquetes web de Emil (basado en potrace) y los SVG dibujados a mano de Mikael.

Supongo que la salida generada por potrace está usando las opciones predeterminadas. Sin embargo, es posible modificarlos. Verifique las opciones para image-trace-loader, que son más o menos las que se transmiten a potrace.

Resumen

Hemos visto diferentes herramientas y técnicas para generar SVG a partir de imágenes y usarlas como marcadores de posición. De la misma manera que WebP es un formato fantástico para miniaturas, SVG también es un formato interesante para usar en marcadores de posición. Podemos controlar el nivel de detalle (y, por lo tanto, el tamaño), es altamente compresible y fácil de manipular con CSS y JS.

Recursos extra

Esta publicación llegó a la cima de Hacker News. Estoy muy agradecido por eso y por todos los enlaces a otros recursos que se han compartido en los comentarios de esa página. ¡Éstos son algunos de ellos!

  • Geometrize es un puerto de Primitive escrito en Haxe. También hay una implementación de JS que puede probar directamente en su navegador.
  • Primitive.js, que es un puerto de Primitive en JS. Además, primitive.nextgen, que es un puerto de la aplicación de escritorio Primitive que usa Primitive.js y Electron.
  • Hay un par de cuentas de Twitter donde puedes ver ejemplos de imágenes generadas con Primitive y Geometrize. Echa un vistazo a @PrimitivePic y @Geometrizer.
  • imagetracerjs, que es un trazador y vectorizador de imágenes ráster escrito en JavaScript. También hay puertos para Java y Android.
  • Canvas-Graphics, una implementación parcial de la API JS Canvas en PHP alrededor de GD.

Artículos Relacionados

Si te ha gustado esta publicación, mira estas otras publicaciones que he escrito sobre técnicas de carga de imágenes:

Puedes leer más de mis artículos en jmperezperez.com.