¿Por qué molestarse en optimizar imágenes? Las imágenes a menudo representan la mayor parte de los bytes descargados en una página web. Como resultado, optimizar imágenes puede generar mejoras significativas en el rendimiento de tu sitio web.
Video Summary and Transcription
La charla aborda varios aspectos de servir imágenes en sitios web, incluyendo dónde almacenar imágenes, opciones de transformación de imágenes y formatos de imágenes. También explora diferentes enfoques para manejar versiones y tamaños de imágenes, como prepararlas de antemano o usar un servidor proxy. El orador destaca la importancia de optimizar imágenes para el rendimiento y menciona el progreso realizado en la adopción de nuevos formatos de imagen. En general, la charla brinda información sobre las mejores prácticas para administrar y servir imágenes dinámicas responsivas.
Available in English
1. Introducción a las imágenes dinámicas y responsivas
Short description:
Hola a todos, mi nombre es Sergei Bucharov y estoy muy emocionado de hablar hoy sobre imágenes dinámicas y responsivas en la conferencia JS Nation. Soy de Fullstack Sber y hoy hablaré sobre diferentes formas de servir imágenes en tu sitio. Recientemente leí un informe sobre el estado de la web y me di cuenta de cuánto más se necesita hacer en este tema. Intentemos responder estas preguntas. Primera pregunta. ¿Dónde debo almacenar mis imágenes, localmente o de forma remota? ¿Qué operaciones de transformación podemos realizar? 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.
dinámicas y responsivas en la conferencia JS Nation. Soy de Fullstack Sber y hoy hablaré sobre diferentes formas de servir imágenes en tu sitio. Recientemente leí un informe sobre el estado de la web y me di cuenta de cuánto más se necesita hacer en este tema.
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.
2. Manejo de Transformaciones de Imágenes y Opciones de Carga
Short description:
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. Este gráfico muestra bits por píxel por formato. 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. 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. 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. 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. Espero que disfrutes mucho en la conferencia JS Nation. Gracias por tu tiempo.
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!
