Las estadísticas nos siguen repitiendo acerca de la fuerte correlación entre una caída en la velocidad de carga de la página de un sitio y un aumento en la tasa de rebote con una disminución en la conversión. No descubriré Estados Unidos si digo que el sitio está ralentizado por una carga útil "inflada" (con imágenes mal optimizadas y código HTML redundante). Esto obliga al servidor a realizar un trabajo innecesario. Una gran parte de este trabajo está asociada con los problemas de optimización de imágenes.
Las imágenes correctamente seleccionadas, por sí mismas, atraen bien la atención y ayudan a aumentar las conversiones, difundir información en las redes sociales y otras interacciones de los visitantes. Por lo tanto, continúan publicándose activamente en las páginas web. Pero cómo afecta esto a la velocidad de carga de estas páginas es una pregunta interesante. Todo depende de la estrategia de optimización.
Creo que las estrategias que se apoyan en la tesis de que las imágenes son de contenido estático no son muy efectivas (desarrollaré esta idea y daré argumentos a lo largo del artículo). Los dispositivos móviles ahora representan una gran parte del tráfico de Internet, pero existe un problema: estos dispositivos tienen diferentes tamaños, resoluciones de pantalla, sistemas operativos y software de aplicación (por ejemplo, navegadores). ¿Cómo hacer una página web rápidamente (!) Y cargar correctamente en cualquier plataforma y verse igual al mismo tiempo?
En este artículo, reduciremos la solución a la optimización de la imagen en la etapa de desarrollo, montaje del proyecto y / o en la etapa de mantenimiento del sitio web terminado.
Es cierto que algunas estrategias de optimización pueden complicar significativamente el proceso de diseño y desarrollo, además de agregar dolores de cabeza por mantenimiento. En general, guardo silencio sobre la creciente pérdida de recursos y tiempo durante el montaje. Existen muchos métodos y herramientas para optimizar imágenes. Pero algunos de ellos no son fáciles de usar sin automatizar procesos complejos y repetitivos. Examinaremos cuatro estrategias y descubriremos cuál le permite automatizar mejor y realizar una optimización de imagen flexible (dinámica) para diferentes dispositivos.
Probaremos cuatro estrategias. Primero, sin la optimización de la imagen, simplemente alimentaremos un código adaptativo simple al servidor con todos los puntos de interrupción y opciones de imagen para ellos. Luego, veremos la optimización en la etapa de construcción, donde las herramientas y servicios especiales ayudan a preparar las variantes de imágenes necesarias. La tercera estrategia es la optimización del tiempo de ejecución: antes de enviar la página, una herramienta automatizada o un servicio en línea aplica la optimización a la imagen de acuerdo con una plantilla determinada o en función de la información del navegador. La última estrategia es utilizar información sobre el dispositivo y el navegador obtenida a través de otros servicios especializados para generar y entregar imágenes optimizadas (definitivamente hablaré de ellas al final del artículo).
¡Atención! ¡Revelación!
Una estrategia de optimización de imagen específica del dispositivo dará los mejores resultados. En este artículo, veremos los pros y los contras de implementar cada estrategia y su impacto en el proceso de desarrollo de aplicaciones web.
El objetivo final de la optimización de imágenes es mejorar la velocidad de carga de las páginas web. Utilizo Google PageSpeed Insight para auditar páginas . Le permite analizar fácilmente la efectividad de las estrategias individuales. Como escribí anteriormente, auditaremos las páginas móviles.
Estrategia n. ° 1: código receptivo sin optimización
Tomé el código de respuesta estándar sin usar ninguna optimización de imagen: el navegador, según el tamaño de la pantalla, simplemente selecciona una opción más o menos adecuada de un conjunto de imágenes idénticas de diferentes tamaños. Hay varios puntos de interrupción en el código para imágenes de diferentes tamaños. Están determinados por los tamaños de pantalla de teléfonos móviles, tabletas y computadoras de escritorio.
Pero aquí de nuevo el problema: hay miles de configuraciones de este tipo, y cada día hay más. Tenemos que agregar más y más puntos de interrupción. Sin embargo, esto requiere más tiempo de desarrollo, conduce a un crecimiento excesivo de la base del código y, en el futuro, a confusión y errores.
Aquí hay un ejemplo con cuatro puntos de interrupción en el atributo srcset:
<img srcset = "image-1920.jpg 1920w,
image-1280.jpg 1280w, image-640.jpg 640w, image-480.jpg 480w" tamaños = "(ancho mínimo: 36em) 50vw, 100vw" src = " image-320.jpg "alt =" Sintaxis de imagen receptiva "/>
Ahora piense cuánto de este código puede tener en su proyecto ...
Además, las imágenes para cada uno de los tamaños enumerados deben crearse por separado. Esto lleva tiempo, así como espacio de almacenamiento adicional.
También puede implementar la capacidad de respuesta con consultas de medios CSS. Alternativamente, puede usar los elementos new y
<source>
, donde <picture> es un contenedor para uno o más elementos <source & gt y un elemento <img & gt. Sin embargo, todos estos enfoques no permiten soluciones escalables.
Finalmente, estos enfoques no tienen en cuenta las características específicas del dispositivo. Cada vez que escribe un código como este, solo intenta adivinar qué puntos de interrupción usar y qué tamaños de imagen necesitará. Además, no hay garantía de que las opciones que ha elegido bien hoy funcionen mañana.
Beneficios:
- no es necesario comprar software o pagar una suscripción a software o servicios adicionales;
- Es relativamente fácil escribir código receptivo basado en un estándar bien documentado.
Desventajas:
- se requiere espacio adicional para almacenar imágenes de diferentes tamaños;
- se requiere más tiempo y esfuerzo para implementar tal “multivarianza adaptativa”;
- el crecimiento del código y la complejidad de su mantenimiento;
- Este código no funciona igual en todos los navegadores;
- sin dependencia del contexto del dispositivo;
- El escalado requiere una CDN (Content Delivery Network) separada;
- lleva mucho tiempo finalizar para nuevos dispositivos, formatos de imagen, etc.
Resultados de la prueba
Las pruebas muestran que no elegí los mejores formatos, e incluso sin compresión. Y mis imágenes son demasiado grandes.
Estrategia n. ° 2: optimización en el tiempo de construcción
Una forma de facilitar la creación de variaciones de imágenes es utilizar servicios especializados de edición o compresión de imágenes como Kraken , Compressor.io , mozjpeg y squoosh.
Usted carga sus imágenes y el servicio procesa y optimiza las imágenes en su servidor. Entonces puede utilizar las imágenes optimizadas en su proyecto. Puede establecer configuraciones de optimización estándar o personalizadas: compresión con pérdida o sin pérdida, cambio de tamaño, reducción de escala, etc. Algunos servicios pueden proporcionar varias versiones de la misma imagen a la vez de acuerdo con las dimensiones requeridas.
¿Qué pasa si te arriesgas y usas el constructor Grunt o Gulp para optimizar tus imágenes ? Para ello, basta con asignar las tareas adecuadas a realizar durante la compilación. El procesamiento de imágenes en sí puede ser manejado por el paquete imagemin js .
Puede instalarse a través de npm o utilizarse a través de la interfaz de línea de comandos. Es una solución modular con complementos para comprimir varios formatos de imagen: por ejemplo, imagemin usa mozjpeg para JPEG y pngquant para compresión PNG. La configuración de las opciones de optimización de imágenes es similar a muchas herramientas SaaS.
Al implementar esta estrategia, la mayor carga recae en los desarrolladores. Primero deben automatizar el procesamiento por lotes de imágenes con ajustes de herramientas de terceros y luego actualizar periódicamente su código para admitir nuevos formatos de imagen.
Beneficios:
- la optimización de la imagen se realiza en un servidor externo;
- los servicios procesan imágenes con la suficiente rapidez;
- el control de optimización se puede integrar en su flujo de trabajo de desarrollo e implementación;
- los servicios tienen una interfaz conveniente para configurar los parámetros de optimización;
- muchas herramientas gratuitas (o planes gratuitos) con una funcionalidad bastante rica.
Desventajas:
- de nuevo, se necesita mucho tiempo para implementar la multivarianza adaptativa;
- todavía no se depende del contexto del dispositivo (tamaño, resolución de pantalla, etc.);
- todavía necesita espacio para almacenar muchas imágenes;
- todavía necesita un CDN;
- se necesitan incluso más horas de trabajo para implementar aún más la integración con productos de terceros a través de la API;
- cada vez que aparecen nuevas variantes de imágenes, también debe ejecutar todo el proceso de optimización para las variantes ya existentes;
Resultados de la prueba
En términos de puntos, es un poco mejor que la primera estrategia. Las quejas sobre la compresión se han calmado, pero sobre formatos y tamaños demasiado grandes, permanecen.
Es importante tener en cuenta que la carga útil total se ha reducido a 1,4 MB. Esto es un 80% menos de lo que nos da una solución sin estrategia y un 50% menos que una estrategia con código adaptativo.
Estrategia n. ° 3: optimización en tiempo de ejecución
Cuando visitamos la página desde un determinado dispositivo, el navegador envía una solicitud con un encabezado HTTP al servidor. El encabezado almacena información sobre el contexto de acceso y los formatos de imagen.
La optimización en tiempo de ejecución se ejecuta en el servidor, justo antes de que se envíe la respuesta (contenido) al navegador. El objetivo de esta optimización es reducir la cantidad de datos transmitidos para acelerar la carga de la página web.
Por ejemplo, el encabezado del navegador Chrome se ve así:
image / avif, image / webp, image / apng, image / *, * / *; q = 0.8
Con la llegada de Client Hints, puede transferir más información adicional campos, por ejemplo, DPR (relación de píxeles del dispositivo, "densidad de píxeles", un valor similar a la resolución) y Viewport-Width (ancho de pantalla).
Client Hints es un protocolo mediante el cual el navegador, en el encabezado de la solicitud HTTP, puede decirle al servidor qué tipo de contenido le gustaría recibir. Las sugerencias del cliente agregan campos adicionales a los encabezados de solicitud HTTP que contienen información sobre el navegador. Una de las características clave de este protocolo es informar al servidor sobre el tamaño de las imágenes que necesita la página.
Con estos datos, los optimizadores en tiempo de ejecución determinan cómo comprimir las imágenes y en qué formato sacarlas. Sin embargo, para un cambio de tamaño flexible, aún necesita implementar manualmente la lógica adaptativa basada en puntos de interrupción.
Estas tareas las realizan optimizadores SaaS como Cloudinary e imgix. Estas plataformas suelen tener una opción de optimización automática cuando el servidor de imágenes o el proxy decide cuál es la mejor manera de optimizar el contenido. Pero también puede personalizar los parámetros de optimización usted mismo usando la API (generalmente usando parámetros de URL simples).
ImgIx es un complemento de CDN (Amazon CloudFront) que permite el procesamiento de imágenes en tiempo real antes de agregarlas a la caché. ImgIx proporciona toda la funcionalidad necesaria para el procesamiento de imágenes, así como una serie de funciones adicionales, por ejemplo, monocromo, desenfoque, medios tonos.
A menudo, estos servicios también pueden servir como CDN. Y Cloudinary tiene su propio sistema DAM (Digital Asset Management).
Todo está bien, pero estos optimizadores aún no pueden analizar el contexto del dispositivo. El encabezado HTTP podría transmitir datos del agente de usuario e indicar que la página se ha abierto, por ejemplo, desde el navegador Chrome en un dispositivo Android. Pero esto no es suficiente. No se dice nada sobre si es un teléfono o una tableta, y cuál es su diagonal, resolución de pantalla.
Las imágenes también se almacenan en los servidores de la plataforma, no en sus propios recursos. Sin embargo, normalmente tiene una cuota fija de espacio en disco con cierto margen en caso de nuevas imágenes.
Beneficios:
- se requiere muy poco esfuerzo para optimizar las imágenes;
- run-time CDN ;
- , , DAM ;
- URL;
- , /
- , ;
:
- , ;
- src , , -;
- - ;
- generalmente funciona más lento en las primeras solicitudes, porque el servicio tiene que obtener una imagen de una fuente de terceros y luego optimizarla sin caché.
Resultados de la prueba
Las quejas sobre la compresión y los formatos casi han desaparecido, pero aún puede
encontrar fallas en el tamaño.
En comparación con las dos estrategias anteriores, la carga útil se ha reducido en un 88%. Ahora solo tiene 897 KB.
Estrategia n. ° 4: optimizar para el contexto del dispositivo
Como en la estrategia anterior, necesitamos un servicio con un servidor de imágenes. Debe usar encabezados de solicitud para la optimización dinámica sensible al contexto. Por ejemplo, un navegador puede declarar soporte para AVIF a través de Aceptar en una solicitud HTTP. Luego, el servicio pensará qué tipo de imagen debería mostrar en formato AVIF. Y aquí es donde comienza la "magia".
Por ejemplo, considere el servicio ImageEngine . Puede obtener información completa sobre el dispositivo desde el contexto de acceso utilizando la biblioteca WURFL js ... Además del navegador y el sistema operativo, puede determinar la marca y el modelo exactos del dispositivo, así como las características de la pantalla (resolución, PPI y muchas otras). También es compatible con las sugerencias del cliente, incluido el encabezado de datos guardados, con el que no funcionan todos los servicios.
Esto permite que dicho optimizador ofrezca opciones de imagen más relevantes para todas las ocasiones, al tiempo que garantiza el equilibrio óptimo de carga útil y calidad de imagen.
Estos servicios también utilizan CDN para acelerar la entrega de imágenes y mejorar las tasas de aciertos de caché. Este enfoque tiene una gran ventaja en el segmento móvil de Internet, ya que hay muchos dispositivos con diferentes parámetros de pantalla.
Esta estrategia casi no requiere completar el código. Es bastante fácil actualizar los valores del atributo src de la etiqueta img vinculándolos al servicio de optimización. Y eso es todo.
Beneficios:
- requiere un esfuerzo mínimo en desarrollo y mantenimiento;
- se puede configurar y olvidar de forma eficaz (cuando se utilizan ajustes de optimización automática);
- optimización automática y manual de imágenes mediante directivas en la URL;
- el mayor ahorro posible en la carga útil de la imagen manteniendo la máxima calidad;
- puede implementar y comenzar a utilizar esta estrategia en cuestión de minutos;
- el servicio de optimización suele ofrecer la mejor relación precio / ancho de banda;
- sin sobrecrecimiento de la base de código: sin código adaptativo y sin puntos de interrupción.
Desventajas:
- src , , - ( );
- ;
- , , .
Ahora Google PageSpeed Insights está contento.
La mayoría de los indicadores han mejorado significativamente. El servicio se puso en marcha automáticamente con nuevos formatos de imagen (por ejemplo, AVIF con compresión óptima según el contexto de acceso). Además, para diferentes tamaños de pantalla, las imágenes cambian automáticamente de largo y ancho, y también se escalan.
Nuestra carga útil total se ha reducido en aproximadamente un 95%:
Y serás feliz
Como puede ver, todas las estrategias tienen sus pros y sus contras. No hay duda de que los servicios de optimización de imágenes, especialmente aquellos basados en el contexto del dispositivo, tienen una ventaja.
Las estrategias tercera y cuarta le permitirán construir racionalmente el proceso de desarrollo con problemas mínimos en la etapa de creación, mantenimiento y almacenamiento de imágenes. Además, no necesitará escribir código de respuesta intrincado y no escalable. La optimización de imágenes funcionará de manera confiable y flexible para satisfacer los nuevos requisitos y necesidades comerciales.
No se preocupe por perder el control sobre la configuración de optimización de su imagen, porque puede realizar sus ajustes utilizando API o parámetros de URL simples.
Por supuesto, tendrás que pagar por ese placer. Pero los representantes de los servicios aseguran que se brindan planes tarifarios económicos para particulares, así como para pequeñas y medianas empresas.
Los Cloud VDS de Macleod son excelentes para el alojamiento de sitios web.
Regístrese usando el enlace de arriba o haciendo clic en el banner y obtenga un 10% de descuento durante el primer mes de alquiler de un servidor de cualquier configuración.
