Imágenes responsivas para tu sitio web

Un tercio de las páginas utiliza el conjunto SRC, pero dos tercios no lo hacen. Primero, en 2014, los atributos del conjunto SRC, el atributo de tamaños y el elemento picture han permitido a la oficina simular recursos adaptables durante casi una década. El elemento picture se utiliza mucho menos que el conjunto SRC. A estas alturas, probablemente sepas que implementar la carga de imágenes no es un problema fácil. Surgieron muchas preguntas de inmediato, incluyendo algunas importantes como 1. ¿Dónde debo almacenar mis imágenes, localmente o de forma remota? 2. ¿En qué formato deben mantenerse las imágenes? 3. ¿Cómo manejo las transformaciones de imágenes y dónde guardo las diferentes versiones de la misma imagen? 4. ¿Cuántos tamaños de imagen debo proporcionar a los navegadores web? 5. ¿Cómo integro todo en mi aplicación existente? Ciertamente, hay una gran cantidad de soluciones listas para usar disponibles, por lo que puedes elegir una, pero más sobre ellas más adelante. Intentemos responder estas preguntas.

Primera pregunta. ¿Dónde debo almacenar mis imágenes, localmente o de forma remota? Depende de muchos factores, tanto técnicos como comerciales, por ejemplo, 1. el número de imágenes 2. facilidad de soporte 3. el número total de operaciones de transformación 4. el plan de imágenes, si estás utilizando IMAGE CDM 5. la frecuencia de cambios de diseño 6. y muchos otros ¿Qué operaciones de transformación podemos realizar? Por lo general, divido estas operaciones en dos grupos, principales y adicionales. El grupo principal incluye recortar, redimensionar, filtrar, optimizar y transformar. Y, por supuesto, debes recordar la protección. El grupo adicional incluye desenfoque, agregar texto, voltear, contornos y sombras, y muchos otros efectos especiales. Por lo tanto, debes pensar en tus objetivos y elegir el tipo de almacenamiento. Si solo necesitas recortar y redimensionar, puedes hacerlo en tu servidor. Te mostraré cómo hacerlo más adelante.

La segunda pregunta es, ¿en qué formato deben mantenerse las imágenes? Según el archivo HTTP, las posiciones principales están ocupadas por JIF, JPG y PNG, lo cual puede ayudar, pero me preocupa. A 0.22% una porción WWF de 3Py es tan pequeña que ni siquiera está etiquetada en el gráfico.

Y aunque el 0.22% puede no parecer mucho, en comparación con el año pasado, representa un progreso considerable. Lentamente, los formatos antiguos están dando paso a los nuevos, como deberían. Los nuevos formatos superan ampliamente a los antiguos. Pronto te darás cuenta de eso.

Este gráfico muestra bits por píxel por formato. Como puedes ver, un WWF está más comprimido que un WP o JPG. El WWF es un formato muy joven, cuyos codificadores han estado iterando rápidamente. Al responder a la pregunta de qué formato deben tener las imágenes, se incrementó el uso de formatos modernos como WWF y WP, y por supuesto JPG, donde sin él, se redujo el uso de formatos como JF y PNG.

La tercera pregunta es, ¿cómo manejo las transformaciones de imágenes y dónde guardo las diferentes versiones de la misma imagen? Hay muchas herramientas para la optimización y transformación de imágenes. Aquí tienes algunas de ellas. Este es un ejemplo de una etiqueta de imagen con los atributos src y sizes, la forma familiar de especificar la ubicación de tu imagen. Los navegadores que no admiten srcset y sizes usarán src como alternativa. Con sizes, especificas el tamaño de la imagen y en qué situación debe mostrarse. Esto se hace mediante una combinación de una consulta de medios y el ancho de una imagen. Con srcset, especificas una lista de imágenes y diferentes tamaños. Otro objetivo perfectamente legítimo con imágenes responsivas no es solo mostrar diferentes tamaños de la misma imagen, sino mostrar diferentes imágenes. La etiqueta picture tiene la misma lógica, pero tiene una etiqueta source.

La cuarta pregunta es cuántos tamaños de imagen proporcionar a los navegadores web. Esta es una pregunta interesante y todo depende de tu diseño. Por ejemplo, se proporcionan muchas imágenes en el sitio de monger. ¿Muchas, verdad?

La última pregunta es cómo subir todo a mi aplicación existente. La opción 1 es preparar varias versiones de la misma imagen de antemano y guardarlas en tu servidor. Es una buena opción si no tienes miles de imágenes y el diseño no cambia con mucha frecuencia. La opción 2 es la misma, pero puedes guardar las imágenes en tu CDN regular. La opción 3 es usar un servidor proxy para la optimización y transformación de tus imágenes. Si te sientes cómodo con Nginx y Docker, por ejemplo, puedes configurar un servidor proxy en un servidor remoto de inmediato. Hay muchos proyectos de código abierto diferentes para este propósito. Por ejemplo, Fumba, ImageProxy, PicFit y otros. También puedes escribir tu propio optimizador de imágenes, por ejemplo, he escrito uno en Nginx, puedes verlo en GitHub. La ventaja es que puedes crear tu propia estructura de URL y utilizar solo la operación que necesitas. Y, por supuesto, si la opción 3 no es lo tuyo, puedes usar ImageCDN. Por ejemplo, Codinary, Amazon, Netlify, nginx, ng-optim, Filestack, Cloudflare y muchos otros. Espero que disfrutes mucho en la conferencia JS Nation. Gracias por tu tiempo. ¡Adiós!