Comprueba el estado de las herramientas de imagen.
Una cosa es poner una imagen en la Web, pero hacerlo bien es difícil. Elegir el formato correcto, la compresión, los puntos por pulgada (DPI) y cientos de otras configuraciones puede olvidarse fácilmente cuando hacemos todo esto nosotros mismos.
La buena noticia es que hoy en día contamos con una gran cantidad de herramientas y servicios que pueden hacer todo eso por nosotros. Pero la noticia no es tan buena es que, bueno, hay abundancia. Puede ser difícil elegir qué herramienta o servicio es el adecuado para ti. Por este motivo, lanzamos images.tooling.report, un sitio en el que enumeramos lo que consideramos más importante a la hora de enviar imágenes en producción y para comparar algunos de los software y servicios más populares, ya sean pagos o gratuitos, alojados o autoalojados.
¿A qué se debe?
Las imágenes constituyen una gran parte de los bytes transferidos de un sitio, y esos bytes se acumulan. 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 lo hicieron. Entonces, ¿deberías 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.
¿Qué es?
Publicar imágenes optimizadas es más que hacer clic en "Guardar para la Web". Por eso, images.tooling.report busca una amplia variedad de funciones. Abordaremos los conceptos básicos, como cuánta compresión proporcionan las diferentes herramientas y servicios, y optimizaciones de red, como los encabezados de caché de larga duración.
Sin embargo, esto no es todo. Buscamos opciones más avanzadas, como la compatibilidad con Save-Data
, ECT
y otras sugerencias de clientes, para buscar un análisis psicovisual automatizado que pueda usar modelos de datos para comprimir imágenes repetidamente y encontrar la versión que requiera la menor cantidad de bytes sin cambiar la forma en que nuestros ojos la perciben. ¿Estás exprimiendo hasta el último fragmento no visual de tus imágenes antes de enviar el cable?
Por supuesto, cada sitio es un copo de nieve: ninguna herramienta o servicio hizo exactamente todo lo que buscábamos. Es normal. Dividimos lo que probamos en diferentes categorías. Abarcamos las redes de distribución de contenidos (CDN), los proyectos autoalojados, los complementos del sistema de administración de contenido (CMS) y los creadores de sitios. Estas son definiciones bastante flexibles que están ahí para intentar 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 contenido en plataformas como WordPress.
- Los creadores de sitios comparan varios servicios diferentes que puedes usar para diseñar tu sitio web.
- El alojado autoalojado se diseñó para los desarrolladores que se sientan 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, mientras que otras son servicios que alojan las imágenes en proxy o en el perímetro.
No puede ser todo para los usuarios todo el tiempo, pero debe revisar las pruebas y las funciones que se están evaluando, y ver cómo se destaca su optimizador de imágenes. ¿Qué sucede si todavía no estás haciendo algo para optimizar las imágenes? Entonces es un buen momento para probar las herramientas de imágenes y ver los beneficios que puedes ofrecer a las personas que ya usan tu sitio.
Próximos pasos
¿Crees que nos falta una herramienta o servicio de imagen? Dinos si necesitas más ayuda. Tanto las herramientas como los servicios, así como las pruebas en sí, son un objeto vivo que se actualiza. Siempre que necesites un lugar rápido para echar un vistazo a la tecnología de vanguardia en relación con el envío de imágenes, asegúrate de que lo primero que visites sea images.tooling.report.
Hero image de Michael Maasen en Unsplash.