Cargue de forma más inteligente: cargadores SVG y ráster en el diseño web moderno

Recibí esta interesante pregunta en un taller de SVG: “¿Cuál es la diferencia de rendimiento entre un cargador SVG y simplemente rotar la imagen para el cargador?”

La elección entre gráficos vectoriales escalables (SVG) y cargadores de imágenes rasterizadas implica muchos factores, como el rendimiento, la estética y la experiencia del usuario. La respuesta corta a esta pregunta es: si estás haciendo algo muy pequeño y específico, casi no hay diferencia. Sin embargo, analicemos las características de ambos formatos con más detalle en este artículo para que pueda tomar decisiones informadas en su propio trabajo.

entender el formato

SVG es vectorGráficos basados ​​en gráficos, populares por su escalabilidad y claridad. Pero primero definamos qué significan realmente las imágenes rasterizadas y los gráficos vectoriales.

Las imágenes rasterizadas se basan en píxeles físicos. Contienen información de color explícita para cada píxel. Lo que sucede es que envías el mensaje completo píxel a píxel y el navegador dibujará cada píxel uno por uno, haciendo que la red trabaje más.

Esto significa:

• ellos tienen un resolución fija (el zoom puede causar borrosidad),
• Se requiere navegador Decodifica y dibuja cada cuadro.y
• La animación generalmente significa Reproducir cuadro por cuadrocomo un GIF o un bucle de vídeo.

Los vectores son instrucciones matemáticas. Dile a la computadora cómo dibujar la gráfica. Como escribe Chris Coyle en ” Esta sesión CSS: “¿Por qué enviar píxeles cuando puedes enviar matemáticas?” Entonces, en lugar de enviar píxeles que contienen toda la información, SVG envía instrucciones sobre cómo dibujar el objeto. En otras palabras, dejar que el navegador haga más y la web haga menos.

Por lo tanto, SVG:

• Infinitamente ampliable sin pérdida de calidad,
• Se puede diseñar y manipular usando CSS y JavaScript, y
• Puede existir directamente en el DOM, eliminando solicitudes HTTP adicionales.

El poder de los vectores: por qué gana SVG

Hay varias razones por las que generalmente es una buena idea utilizar SVG en lugar de imágenes rasterizadas.

1. Transparencia y calidad visual

La mayoría de los formatos de imagen modernos admiten la transparencia, pero no todas las transparencias son iguales. Por ejemplo, GIF sólo admite transparencia binaria, lo que significa que los píxeles son completamente transparentes o completamente opacos.

Esto a menudo da como resultado proporciones mayores de bordes irregulares, especialmente alrededor de curvas o en fondos opacos o transparentes. SVG admite una verdadera transparencia y bordes suaves, lo que marca una diferencia significativa para los cargadores que se encuentran sobre capas complejas de UI.

2. Rendimiento de “requisitos cero”

Desde una perspectiva de rendimiento bruto, rotar un PNG pequeño y un SVG en CSS (o JavaScript) es similar. Sin embargo, los SVG ganan en la práctica porque Compatible con gzip y se puede incrustar en línea.

<!-- Inline SVG: Heart -->
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
  <title xmlns="">Heart</title>
  <path fill="currentColor" d="M8.4 5.25c-2.78 0-5.15 2.08-5.15 4.78c0 1.863.872 3.431 2.028 4.73c1.153 1.295 2.64 2.382 3.983 3.292l2.319 1.57a.75.75 0 0 0 .84 0l2.319-1.57c1.344-.91 2.83-1.997 3.982-3.292c1.157-1.299 2.029-2.867 2.029-4.73c0-2.7-2.37-4.78-5.15-4.78c-1.434 0-2.695.672-3.6 1.542c-.905-.87-2.167-1.542-3.6-1.542"/>
</svg>

<!-- Raster image -->
<img src="https://css-tricks.com/img/heart.png" alt="Solid black heart">

Al pegar el código SVG directamente en HTML, puede eliminar toda la solicitud HTTP. Para algo como un cargador (algo que debería mostrarse mientras se carga otra cosa), el hecho de que el código SVG ya esté ahí y se represente inmediatamente es una gran ventaja para el rendimiento.

Más importante aún, el cargador afecta desempeño percibido. Incluso si el tiempo de carga real es el mismo, un cargador que se adapta suavemente al contexto y escala correctamente puede hacer que los tiempos de espera parezcan más cortos.

Incluso código SVG parece Así como pesa más que una línea de HTML, lo que realmente importa es el tamaño del archivo de la imagen. El hecho de que medimos SVG en bytes que se pueden comprimir con gzip significa que la sobrecarga final es mucho menor.

Dicho esto, todavía es posible <img> Al igual que un archivo rasterizado (donde algunos otros métodos así como también):

<img src="https://css-tricks.com/img/heart.svg" alt="Solid black heart">

Sí, esto cuenta como una solicitud de red, aunque respeta la vectorialidad del archivo cuando se trata de bordes afilados a cualquier escala. Además elimina otros beneficios como el siguiente.

3. Animación, Control e Interactividad

El cargador de formato SVG está basado en DOM, no en marcos. Esto significa que puedes:

Puedes manipular SVG usando CSS, JavaScript o SMILcrea un mundo de posibilidades en términos de interactividad que las imágenes rasterizadas no pueden igualar.

4. Pero, ¿los SVG animados necesitan archivos separados?

Asimismo, las animaciones SVG se pueden incrustar en HTML o dentro de una sola animación. .svg documento. Esto significa que puedes enviar un archivo animado, como un GIF, pero con más control. usando <defs> y <use>puedes mantener tu código limpio. El siguiente es un ejemplo de un archivo de carga SMIL:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" overflow="visible" fill="#ff5463" stroke="none" role="img" aria-labelledby="loader-title">
  <title id="loader-title">Loading...</title>
  <defs>
    <circle id="loader" r="4" cx="50" cy="50" transform="translate(0 -30)"/>
  </defs>
  <use xlink:href="#loader" transform="rotate(45 50 50)">
    <animate attributeName="opacity" values="0;1;0" dur="1s" begin="0.13s" repeatCount="indefinite"></animate>
  </use>
  <use xlink:href="#loader" transform="rotate(90 50 50)">
    <animate attributeName="opacity" values="0;1;0" dur="1s" begin="0.25s" repeatCount="indefinite"></animate>
  </use>
</svg>

Para interacciones más complejas, incluso puedes incluir CSS y JavaScript en el archivo SVG:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<title id="titleId">Interactive Loading Spinner</title> <desc id="descId">A blue rotating circle. Clicking it toggles the rotation speed between fast and slow.</desc>
  <defs>
    <style>
      .loader {
        transform-origin: center;
        animation: spin 1s linear infinite;
        cursor: pointer;
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    </style>
  </defs>
  
  <circle class="loader" id="loader" cx="50" cy="50" r="35" 
          fill="none" stroke="#3b82f6" stroke-width="6" 
          stroke-dasharray="150" stroke-dashoffset="50" 
          stroke-linecap="round" />
  
  <script type="text/javascript">
    const loader = document.getElementById('loader');
    loader.addEventListener('click', function() {
      this.style.animationDuration = this.style.animationDuration === '0.3s' ? '1s' : '0.3s';
    });
  </script>
</svg>

Al incorporar estilos y secuencias de comandos, esencialmente está creando una miniaplicación autónoma dentro de un solo gráfico. La principal ventaja es la encapsulación: el cargador es completamente portátil, requiere menos solicitudes HTTP y sus estilos no “se filtran” en su sitio. Es el activo “complementario” definitivo para diferentes proyectos.

Sin embargo, esta capacidad viene con compensaciones de funcionalidad y seguridad. Los navegadores tratan SVG como una imagen estática cuando se carga a través de <img> Etiqueta o fondo CSS, deshabilite todo JavaScript por razones de seguridad. Para mantener la interactividad, debe insertar el código directamente o utilizar <object> Etiqueta. Debido a estas limitaciones, el enfoque en línea (pegar código directamente en HTML) sigue siendo la opción preferida para la mayoría de las aplicaciones web modernas.

5. Creatividad, marca y experiencia de usuario

Aquí es donde vamos más allá del rendimiento y hacia contar historias.

Imagine un sitio web B2B donde los usuarios crean una tienda en línea. Tarda unos segundos en generarse. En lugar de un control giratorio genérico, puedes mostrar una animación de un producto “llegando” a tu tienda. Incluso puedes hacer que este cargador sea interactivo.

Una animación SVG como esta puede tener menos de 20 kb. Para hacer lo mismo con un GIF rasterizado, hablaremos de megabytes. La eficiencia de SVG le permite hacer crecer su marca e involucrar a los usuarios mientras espera, sin afectar su rendimiento.

Cuando los cargadores ráster todavía tienen sentido

El cargador ráster en sí no tiene “errores”; es solo un error. Sus capacidades son limitadas, especialmente en comparación con SVG. Dicho esto, las imágenes rasterizadas siguen teniendo sentido si:

• Los cargadores son fotográficos o utilizan texturas complejas y muy ilustradas.
• Está utilizando un sistema antiguo que no permite la inyección de SVG, o
• Necesita un activo muy rápido, único y sin personalización.

generalizar

pensamientos finales

Si el indicador de carga que muestra es tan simple como un punto giratorio, la diferencia de rendimiento entre SVG y ráster probablemente sea insignificante. Pero una vez que se tiene en cuenta la escalabilidad, la transparencia, la accesibilidad y la capacidad de contar la historia de su marca, los cargadores SVG no se tratan solo de rendimiento; se trata de crear cargadores que realmente pertenecen a la web moderna.

Si quieres probarlo te invito a probarlo. cargadores.holasvg.com. Es un generador gratuito de código abierto que construí y que te permite personalizar parámetros como animación, forma y color, y luego te proporciona un código SVG limpio para usar.