4 puntas de optimización de imágenes esenciales

Sep 11, 2025

Cómo

[dieciséis]

Unos pocos afortunados desarrolladores y este autor tuvieron la oportunidad de EDITAR TECH EDITAR el nuevo ebook de optimización de imágenes de Addy Osmani, Optimización de imágenes esenciales , que debes leer absolutamente.

10 maneras de optimizar imágenes para un mejor rendimiento

Si estás construyendo tamaño completo Sitios web de comercio electrónico o simplemente haciendo una casa en línea para su portafolio de diseño , En este artículo, aprenderá algunos consejos del libro de Addy que ayudará a que sus imágenes sean más delgadas y más rápidas.

Ser selectivas y precargar imágenes críticas.

Eche un vistazo a su sitio e identifique un activo de imagen crítica. Para la mayoría, este sería una imagen de logotipo o héroe que quiera que haga lo antes posible.

Aquí es donde el precarga El consejo de recurso viene. precarga es una forma de insinuar al cliente que debe recuperarse un activo antes de que el analizador del navegador lo descubra de lo contrario. Puedes usarlo por casi cualquier cosa, pero funciona espléndidamente por precargar imágenes críticas. Aquí hay un ejemplo de ello en uso en el HTML. & lt; cabeza y gt; Elemento en orden a precargar una imagen de banner de héroe:

<link rel="preload" href="/img/logo.svg" as="image">

También puede usar la precarga en un encabezado HTTP:

Link: </img/logo.svg>; rel=preload; as=image

A continuación, puede ver dos rollos de captura de pantalla de la misma página en carga en Chrome. Un escenario utiliza precarga Para cargar una imagen de banner de héroe, mientras que el otro no.

The effect of using preload on a hero banner

En el ejemplo con precarga La imagen de la bandera aparece en la ventana del navegador medio segundo más rápido. Todo debido a un ventilador rápido que le dio al navegador una ventaja.

Simplifica automáticamente su obra de arte SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered

La optimización de SVGS es diferente a con otros tipos de imágenes, ya que, a diferencia de JPEGS o PNG, SVGS se componen de texto, específicamente un marcado XML. Esto significa que las optimizaciones típicas que se aplicaría a los activos basados en texto (por ejemplo, la compresión de MINIFICACIÓN, GZIP / Brotli), también deben aplicarse a SVGS. Más allá de eso, puede usar un optimizador, como SVGO para desactivar el tamaño de SVGS.

Pero, ¿y si no estás simplemente consumiendo ilustraciones vectoriales, pero creándola? Si usted es un usuario ilustrador, puede simplificar automáticamente su obra de arte para reducir la cantidad de puntos de anclaje en las rutas a través de la ventana de diálogo Simplify.

Este cuadro de diálogo se puede encontrar en Illustrator CC Menú iba a ir a Object & GT; Path & GT; Simplify. Al reducir la precisión de la curva (y el umbral de ángulo de ajuste opcionalmente), es posible eliminar los puntos de ruta adicionales en su obra de arte. En este caso, notará que una reducción en la precisión de la curva de tan poco como el 6% elimina 54 puntos de la ruta. Usado con juicios, incluso podría mejorar la apariencia de su obra de arte.

The savings that path simplification can afford

Palabra a los sabios: tenga cuidado con lo agresivo que obtiene con esta herramienta. La precisión más baja de la curva demasiado, y su obra de arte una vez cuidadosamente diseñada se desviará en un blob. Sin embargo, huelga el equilibrio correcto, y cosecharás las recompensas.

Convertir gifs animados al video

With FFmpeg you can turn flabby GIFs into svelte video

Todos amamos un buen gif animado. Transmiten efectivamente casi cualquier sentimiento, pero pueden ser realmente enormes. Las optimizadores de imágenes, como el gifa, pueden ayudar a afeitarse el exceso de kilobytes, pero el boleto es convertir esos gifs en videos e incrustarlos en el HTML5 & lt; video & gt; etiqueta. los ffmpeg La utilidad de la línea de comandos es muy adecuada para esta tarea:

ffmpeg -i animado.gif -b: v 512k animado.webm
ffmpeg -i animado.gif -b: v 512k animated.ogv
ffmpeg -i animated.gif -b: v 512k animated.mp4

Los comandos anteriores toman un GIF de origen ( GIF animado ) Como entrada en el argumento -i, y salga de videos con un máximo de la tasa de bits variable de 512kbps. En una prueba propia, pudimos tomar un GIF animado de 989kb y reducirlo a un MP4 de 155kb, un OGV de 109kb y un Webm de 85kb. Todos los archivos de video fueron comparables en calidad a la fuente gif. Debido a la ubicuidad de & lt; video & gt; Soporte de etiquetas en los navegadores, estos tres formatos de video se pueden usar así:

 & lt; video prisoar = "ninguno" & gt;
  & lt; fuente src = "/ videos / animated.webm" tipo = "video / webm" & gt;
  & lt; fuente src = "/ Videos / animated.ogv" Type = "Video / Ogg" & GT;
  & lt; fuente src = "/ Videos / animated.mp4" Type = "Video / MP4" & GT;
& lt; / video & gt;

Si decides ir a esta ruta, asegúrese de ordenar su & lt; fuente y gt; Etiquetas para que el formato más óptimo se especifique primero, y se haya especificado el menor óptimo. En la mayoría de los casos, esto significa que comenzará primero con los videos de WebM, pero verifique el tamaño del archivo de salida de cada video y vaya con lo que sea más pequeño, y termine con lo que sea más grande.

Si no tiene FFMPEG o no sabe qué es, Echale un vistazo . Es fácil instalar a través de la mayoría de los administradores de paquetes del sistema operativo, como Homebrew o Chocolatey.

Carga perezosa con intersectionobserver

Las imágenes de carga perezosa es algo que podría estar haciendo, pero muchos scripts de carga perezosa utilizan los manipuladores de eventos de desplazamiento intensivo de CPU. Tales métodos contribuyen a las lentas interacciones en una página. El hardware más antiguo con menos potencia de procesamiento es aún más propenso a los efectos negativos de este tipo de código. La aceleración de la ejecución ayuda a un título, pero sigue siendo una solución desordenada y bastante ineficiente para determinar cuándo se encuentran los elementos en la ventana.

Afortunadamente, la API del observador de la intersección nos da una forma más sencilla y mucho más eficiente de determinar cuándo se encuentran los elementos en la ventana. Aquí hay un ejemplo de algunas marcas de imagen básicas de carga perezosa:

 & lt; img class = "perezy" data-src = "/ images / lazy-carged-image.jpg" src = "/ images / placeholder.jpg" alt = "soy perezoso". ancho = "320" altura = "240" & gt;

Aquí, cargamos una imagen de marcador de posición en el SRC atribuir, y luego almacenar la URL para la imagen que queremos cargar perezosamente en el Data-SRC atributo. Para rematar todo, le damos al & lt; img & gt; elemento una clase de perezoso para facilitar el acceso con queryselectorall . Desde allí, simplemente usamos este código:

 document.addeventlistener ("domcontentloaded", función () {
  if ("intersectionobserver" en ventana y amp; & amp; "intersectionobserverentry" en ventana y amp; & amp; "intersectionratio" en window.intersionobserverventry.prototype) {
    elementos = document.queryselectorall ("img.lazy");

    var imageobserver = nueva intersectionobserver (función (entradas, observador) {
      entradas.foreach (función (entrada) {
        if (Entry.Esintersecting) {
          entrada.target.setattribute ("SRC", entrada.target.getattribute ("Data-SRC"));
          entry.target.classlist.reemove ("perezoso");
          imagebserver.unobserve (Entry.Target);
        }
      });
    });

    Elements.Foreach (función (imagen) {
      imagebserver.observe (Imagen);
    });
  }
});

Aquí, vinculamos el código a la documento objetos Domcontentloaded evento. Este código comprueba para ver si el observador de intersección es compatible con el navegador actual. Si resulta que es, agarramos a todos. img elementos con una clase de perezoso con queryselectorall y luego adjuntar observadores a ellos.

El observador contiene referencias a los elementos que estamos observando ( entradas ) y el observador en sí ( observador ). Este código depende de cada entrada de observadores. isImpresor valor. Mientras que el elemento observado está fuera de la ventana, isImpresor devoluciones 0 . A medida que el elemento entra en la ventana, sin embargo, devolverá un valor mayor que 0 . Está en este punto que cambiamos el contenido de la imagen. Data-SRC atribuir en el SRC atributo, y eliminar su perezoso clase. Después de una imagen dada, la carga perezosa, el observador se retira de él con el observador. desalentador método.

Este proceso es mucho más fácil que la parpadeo con los manipuladores de desplazamiento, pero dado que el observador de la intersección no goza de apoyo universal, es posible que tenga que recurrir a ellos. Si usted es el tipo para agarrar un script y vaya, hemos escrito un cargador perezoso que usa el observador de intersección, pero también cayendo a los métodos de antaño. Puedes agarrarlo aquí .

Este artículo fue publicado originalmente en el número 301 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 301 aquí o Suscríbete aquí .

Artículos relacionados:

La guía completa de svg
Usando herramientas de vectores: el enfoque de un diseñador web
Animar svg con javascript

4 puntas de optimización de imágenes esenciales

Ser selectivas y precargar imágenes críticas.

Simplifica automáticamente su obra de arte SVG

Convertir gifs animados al video

Carga perezosa con intersectionobserver

Cómo - Artículos más populares

Composición en la animación: aprenda lo básico

Use Framer X para construir prototipos interactivos

Ilustración de mapa: una guía paso a paso

Construye tu propio juego de física webgl

Cómo pintar miniaturas deliciosas

Crea mejores animaciones de caracteres en maya

Cómo pintar un zombie en la pintura de estudio de clip

Combina habilidades tradicionales y digitales para crear una cubierta cómica

Categorías