¿Que set de herramientas elegirias de todas las que has comentado?

[ivanbtrujillo]

@nucliweb en el post Optimización de imágenes comentas varias formas de optimizar las imágenes (aplicaciones, servicios, herramientas de CLI...). De todas las que has comentado, con que set de herramientas te quedarías para tu día a día y cuál seria el proceso que seguirías (ya que algunas se complementan)?

[nucliweb]

Es una pregunta muy interesante @ivanbtrujillo

¿Te imaginas una charla en una conferencia chula explicando todo eso? 🤪

En el artículo hablo de herramientas para varios perfiles, así que voy ha hacer una lista del set que creo que puede funcionar según el rol de cada persona o equipo.

Diseño (UI, UX)

1. Photoshop, Affinity, Pixelmator, etc...
2. ImageOptim para Mac o alternativa⁽¹⁾

Desarrollo

1. ImageOptim para Mac o alternativa⁽¹⁾
2. Script npm con Imagemin para automatizar la optimización⁽²⁾

DevOps (pase a producción)

1. Definición de Performance Budgets para las imágenes y script como linter.

QA, Producto o Performance Engineer

1. Utilizar Measure para comprobar si Lighthouse sugiere mejoras en las imágenes.
2. Website Speed Test Image Analysis Tool o Imagekit Website Analyzer para un análisis específico de las imágenes.

Freelance

Todo lo anterior 🤪

Notas

• (1) Hace mucho años que trabajo con Mac, si alguien quiere compartir alguna herramienta para Windows o Linux, por favor que deje un comentario.
• (2) Escribiré un post hablando de esto, con un "starter kit" según mi criterio.

---

Tengo intención de escribir sobre este tipo de flujo para la optimización de imágenes, ya que cada herramienta tiene su peculiaridad, y al final es como todo, hay que conocer las bases de los que estemos haciendo (en este caso la compresión de las imágenes) y ha herramienta que estemos utilizando.

Espero que te haya podido ayudar con la duda.

[nucliweb]

Image Performance Review 🏞🧐

Como un auténtico apasionado de las PerfReviews no he podido resistir echar un vistazo a la web de vuestro evento @ivanbtrujillo 🤪

Así que aprovecho esta consulta para mostrar un caso de uso de la herramienta Website Speed Test Image Analysis Tool de Cloudinary.

Web a analizar

La web que he analizado es la de las y los ponentes, que es donde hay varias imágenes. Web: https://jsdaycanarias.com/speakers

Análisis previo

Lo primero que suelo hacer es inspeccionar los recursos con Chrome DevTools, como lo que me interesa es comprobar las imágenes, voy a la pestaña network y filtro pos images.

Lo primero que podemos ver es que hay 72 peticiones de imágenes (una de ellas es de Google Analytics), y aparte del logo que está en formato SVG, el resto son en formato WebP.

OMG ¿Entregan las imágenes con el formato optimizado según el dispositivo? 👏🏼

Vamos a probar con Safari

Pues sí, están entregando el formato de imagen optimizado según el cliente 🤘🏼, como Safari no soporta WebP, está cargando el formato de imagen PNG.

¿Están utilizando <picture> para los diferentes formatos?

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.png" alt="spaker-foto">
</picture>

Al analizarlo con el inspector de elementos, la sorpresa es que no, están entregando un sólo tag img.

<img src="/img/speakers/jennifer-torres.png" 
  width="65%" class="m-8 mb-2" alt="speaker-photo-jennifer-torres">

No sé que backend tienen, pero lo que está haciendo es comprobar el soporte y enviándolo con el formato soportado.

Eso me gusta, reduce el código HTML 😊

Análisis con Website Speed Test Image Analysis Tool

Veamos qué nos dice Cloudinary:

😱 Podríamos reducir de 1.6 MB a 322 KB, es decir reducir casi un 80% el peso de las imágenes.

Veamos dónde nos sugiere Cloudinary que podemos optimizar las imágenes.

La "potencial optimización" la tenemos en servir la imagen al tamaño que se está representando en el HTML. La imagen de fondo es correcta, su tamaño de 1200x800 es el tamaño al que se está representando en el HTML, pero el resto de las imágenes, como la de Marina o Jon tienen un tamaño muy superior al que se está representado en nuestro navegador.

Si entregamos las imágenes al tamaño que se representan, ocuparían un 10,2% y 6,9% respectivamente de su peso actual.

Deep Image Performance Review 🔬

Antes de dar un diagnóstico definitivo, vamos a profundizar más en esta review.

El en informe de Cloudinary, que podéis ver aquí, vemos que "sospechosamente" casi todas la imágenes tienen una resolución de 400x400 y 450x450. Eps! eso seguro que es por algún motivo, sé que la gente de Canarias JS son unos profesionales.

Y... ahí está! En la versión mobile el layout pasa a una columna, así que las imágenes de l@s ponentes son más grandes, por eso han optado por entregar una imagen de mayor tamaño.

Result Review

Enhorabuena equipo por la implementación de la funcionalidad de entregar el formato soportado por el cliente.

Puntos de mejora

• Optimizar el logo SVG, lo podéis hacer con SVGO o con un Drag&Drop en SVGOMG, reduciendo más de una 35%.
• La imagen de fondo se está entregando en formato PNG a Safari, seguro que en JPG ocuparía menos.
• Para optimizar el tamaño de la imágenes según la media query habría que utilizar lo que se conoce como Responsive Images, implica generar diferentes tamaños de la misma imagen, pero con un script o con Responsive Image Breakpoints Generator .

[ivanbtrujillo]

Muchisimas gracias por la review Joan. Me pongo manos a la obra!

[nucliweb]

Para cualquier duda o ayuda que necesites, aquí estoy 😊

Por cierto @ivanbtrujillo , la carga de la página mejoraría con lazy load de las imágenes lazy-loading