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

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 de exploración más interesantes 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 utilizan SVG, y me gustaría describirlas en este post.

En esta publicación repasaremos estos temas:

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

Descripción general de diferentes tipos de marcadores de posición

En el pasado, he escrito sobre marcadores de posición y carga diferida de imágenes, y también he hablado de ello. Al realizar la carga diferida de imágenes, es una buena idea pensar en qué renderizar 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 realizar nuevos cálculos de diseño cada vez que obtiene las dimensiones de una imagen, dejando espacio para ella.
  • Marcador de posición : Imagine que estamos mostrando la imagen de perfil de un usuario. Podríamos querer mostrar una silueta de 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 buenas candidatas para ser insertadas.
  • 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 que la transición entre la imagen sin imagen y la imagen cargada sea más suave.
  • Imagen borrosa : también llamada técnica de desenfoque. Renderizas una pequeña versión de la imagen y luego pasas a la completa. La imagen inicial es pequeña tanto en píxeles como en kB. Para eliminar artefactos, la imagen se amplía y se desenfoca. Ya escribí anteriormente sobre esto en Cómo Medium realiza la carga progresiva de imágenes, Uso de 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 mucha gente inteligente está desarrollando otras técnicas para crear marcadores de posición.

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

Otra técnica es usar SVG basados ​​en la imagen, que está ganando terreno 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 usan 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”.

Dibujar imágenes usando detección de bordes y animación SVG

En el pasado, SVG apenas se usaba y se apoyaba. Algún tiempo después comenzamos a usarlos como una alternativa al clásico… medium.com

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 el pasado, traté de hacer algo similar con 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 era de esperar, 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 marcador de posición de imagen de baja calidad utilizando SVG llamada 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 eches un vistazo. Convierte una imagen de mapa de bits en un SVG compuesto por formas superpuestas. Su pequeño tamaño lo hace adecuado para insertarlo 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 pasé por un par de imágenes. Genere SVG para la obra de arte usando 10 formas y 100 formas:

Cuando usamos 10 formas en las imágenes, comenzamos a comprender la imagen original. En el contexto de los marcadores de posición de imágenes, 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, lo que baja a ~ 640 bytes cuando se pasa 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 utilizar 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 ajusta la cantidad de formas utilizadas hasta que se alcanza 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 tener limitaciones de tamaño y estar basadas en vectores, son un buen candidato para imágenes heroicas y fondos grandes que de otro modo mostrarían artefactos.

SQIP

En las propias palabras de Tobías:

SQIP es un intento de encontrar un equilibrio entre estos dos extremos: hace uso de 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 de Desenfoque Gaussiano. . Esto produce un marcador de posición SVG que pesa solo ~ 800–1000 bytes, se ve suave en todas las pantallas y proporciona una pista 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:

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

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

Siluetas

Acabamos de echar un vistazo al uso de SVG para bordes y formas primitivas. Otra posibilidad es vectorizar las imágenes “trazándolas”. Mikael Ainalem compartió un codepen 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 generó rápidamente integraciones con herramientas para automatizar el proceso.

  • Gatsby, un generador de sitios estáticos que usa React ahora admite estos SVG rastreados. Utiliza un JS PORT 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 de Webpack que usa 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. Compruebe las opciones de image-trace-loader, que son prácticamente 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 comprimible 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 vectorizador y trazador de imágenes de trama escrito en JavaScript. También hay puertos para Java y Android.
  • Canvas-Graphics, una implementación parcial de JS Canvas API 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:

¿Cómo Medium carga la imagen progresiva

Recientemente, estaba navegando por una publicación en Medium y vi un buen efecto de carga de imágenes. Primero, cargue una pequeña imagen borrosa ... medium.com Usando WebP para crear pequeñas imágenes de vista previa

Siguiendo con el tema de optimización de imágenes, voy a echar un vistazo más profundo a la técnica de Facebook para crear una vista previa ... medium.com Más ejemplos de carga progresiva de imágenes

En una publicación anterior, analicé una técnica utilizada por Medium para mostrar imágenes, pasando de una imagen borrosa a la final ... medium.com

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