Optimizar al máximo la carga de imágenes para la web en 2021

La lista de Malta Ubl para:

8 técnicas de optimización de carga de imágenes para minimizar tanto el ancho de banda utilizado para cargar imágenes en la web como el uso de CPU para mostrar imágenes.

1. Imágenes de ancho fluido en CSS, sin olvidar los atributos heighty widthen HTML para obtener la relación de aspecto adecuada en el primer renderizado.
2. usarcontent-visibility: auto;
3. Envía AVIF cuando puedas.
4. Utilice sintaxis de imágenes receptivas.
5. Establezca encabezados de caducidad lejana en las imágenes y tenga una estrategia de eliminación de caché (como cambiar el nombre del archivo).
6. usarloading="lazy"
7. usardecoding="async"
8. Utilice CSS/SVG en línea para un marcador de posición borroso.

Aparentemente, sólo hay una herramienta que lo hace todo: once-alto-rendimiento-blog.

Mis pensamientos:

• Si estás lazycargando, ¿realmente necesitas hacerlo content-visibiltytambién? Parecen muy relacionados.
• Servir AVIF suele ser bueno, pero parece menos sencillo que WebP. Debe asegurarse de que su versión AVIF sea mejor y más pequeña, lo que en este momento parece un proceso manual. Actualización : me han dicho que AVIF es en realidad más pequeño y confiable (al menos que JPG) que WebP en general. Sigo pensando que vale la pena tener cuidado. Esto me hace querer subcontratar aún más la elección del formato a proveedores de nube que sirven en el formato más pequeño que puedan producir.
• Lo de la decodificación parece raro. Lo usaré totalmente si se trata de una ganancia de rendimiento gratuita, pero si siempre es una buena idea, ¿no debería hacerlo siempre el navegador?
• No estoy muy convencido de que los marcadores de posición borrosos estén en la misma categoría de necesarios que el resto de estas cosas. Se siente como una tendencia.