Consulta el estado de las herramientas de imágenes.
Una cosa es colocar una imagen en la Web, pero es difícil hacerlo bien. De lo contrario, es fácil olvidarse de elegir el formato, la compresión, los puntos por pulgada (DPI) y cientos de otros parámetros de configuración cuando hacemos todo esto por nuestra cuenta.
La buena noticia es que hoy en día tenemos una gran cantidad de herramientas y servicios que pueden hacer todo eso por nosotros. La mala noticia es que hay una gran cantidad. Puede ser difícil elegir qué herramienta o servicio es adecuado para ti. Por eso, lanzamos images.tooling.report, un sitio en el que enumeramos lo que consideramos más importante cuando se envían imágenes en producción y comparamos algunos de los softwares y servicios más populares, ya sean pagados o gratuitos, alojados o autoalojados.
¿Por qué?
Las imágenes representan una gran parte de los bytes transferidos de un sitio, y esos bytes se suman. De hecho, descubrimos que las imágenes no optimizadas representaban casi el 75% del tamaño total de una página. Todos esos bytes desperdiciados tienen un costo. Por eso, en un estudio de millones de sesiones de usuarios reales, las páginas que generaron conversiones tenían un 38% menos de imágenes que las que no generaron conversiones. ¿Debes borrar todas tus imágenes? Por supuesto que no. Sin embargo, debes asegurarte de que las imágenes que envíes estén optimizadas para todos los usuarios, independientemente de los dispositivos que usen.
¿De qué se trata?
Publicar imágenes optimizadas implica más que hacer clic en "Guardar para la Web". Es por eso que images.tooling.report verifica una amplia variedad de funciones. Abordamos los conceptos básicos, como la cantidad de compresión que proporcionan las diferentes herramientas y servicios, y las optimizaciones de red, como los encabezados de caché de larga duración.
Pero no nos detendremos allí. Buscamos opciones más avanzadas, como la compatibilidad con Save-Data, ECT y otras sugerencias del cliente, para buscar un análisis psicovisual automatizado que pueda usar modelos de datos para comprimir imágenes de forma repetida y encontrar la versión que ocupa menos bytes sin cambiar la forma en que nuestros ojos la perciben. ¿Estás exprimiendo hasta el último bit no visual de tus imágenes antes de enviarlas por cable?
Por supuesto, cada sitio es único, y ninguna herramienta o servicio hacía todo lo que buscábamos. Es lo esperado. Por lo tanto, dividimos lo que probamos en diferentes categorías. Abordamos las redes de distribución de contenido (CDN), los proyectos alojados por el usuario, los complementos de sistemas de administración de contenido (CMS) y los creadores de sitios. Estas son definiciones bastante amplias que realmente están ahí para tratar de hacer que la comparación de diferentes opciones sea más relevante:
- Los complementos de CMS son paquetes que son una opción fácil para desarrollar en plataformas como WordPress.
- Los creadores de sitios comparan una serie de servicios diferentes que puedes usar para crear tu sitio web.
- Alojamiento propio: Se diseñó para desarrolladores que se sienten cómodos clonando un proyecto de git o ejecutando su propia imagen de Docker en producción.
- Las CDN son un poco más complicadas. Algunas de estas son CDN en el sentido tradicional, pero otras son servicios que alojan o proxy tus imágenes en el perímetro.
No puedes satisfacer a todos todo el tiempo, pero debes revisar las pruebas y las funciones que se están evaluando para ver cómo se compara tu optimizador de imágenes. ¿Qué sucede si aún no estás haciendo nada para optimizar las imágenes? Entonces, es un buen momento para revisar las herramientas de imágenes y ver qué beneficios puedes ofrecer a las personas que ya usan tu sitio.
Próximos pasos
¿Crees que nos falta una herramienta o un servicio de imágenes? Dinos si necesitas más ayuda. Tanto las herramientas y los servicios como las pruebas en sí son elementos vivos y en constante actualización. Cuando necesites un lugar rápido para consultar el estado de la técnica en el envío de imágenes, asegúrate de que tu primera parada sea images.tooling.report.
Imagen hero de Michael Maasen en Unsplash.