Optimisation d'images pour le contenu généré par l'IA
Les images générées par l'IA posent un problème de performance unique. Vous ne connaissez ni la taille, ni le format, ni le contenu de l'image avant la fin de la génération. Vous devez tout de même éviter les chargements lents et les décalages de mise en page (layout shifts).
J'ai utilisé ces étapes lors de la création d'un générateur d'images par IA gratuit.
L'optimisation standard suppose que vous connaissez l'image à l'avance. Vous pouvez calculer les dimensions et optimiser lors de la phase de build. Les images générées rompent cette règle. L'image n'existe pas tant qu'un utilisateur ne la demande pas.
Comment gérer la diffusion :
- La sortie brute de l'IA est généralement au format PNG. Les fichiers PNG sont trop volumineux, souvent entre 800 Ko et 1,2 Mo.
- Convertissez les images en WebP. Les fichiers WebP sont 25 % à 35 % plus légers que le PNG à qualité égale.
- Utilisez une qualité de 85 pour le WebP. Les images d'IA présentent un bruit de texture naturel. Des réglages plus élevés augmentent la taille du fichier sans améliorer la qualité visuelle.
Comment éviter les décalages de mise en page :
Les utilisateurs choisissent un ratio d'aspect avant de cliquer sur générer. Profitez-en à votre avantage.
- Pré-dimensionnez le conteneur en fonction du ratio choisi (1:1, 16:9, etc.).
- Cela permet de maintenir le conteneur à la bonne taille avant l'arrivée de l'image.
- Cela élimine le décalage de mise en page cumulatif (CLS).
Comment améliorer la vitesse de chargement :
L'image générée est généralement l'élément LCP (Largest Contentful Paint).
- Marquez l'image comme prioritaire dans votre code.
- Utilisez un lien preconnect pour votre CDN. Cela permet de gérer les handshakes DNS et TLS plus tôt.
- Utilisez un skeleton loader qui occupe l'espace exact que l'image finale occupera.
Stratégie de mise en cache :
- Ne mettez pas en cache au niveau de la couche d'inférence. Chaque requête doit sembler nouvelle.
- Mettez en cache au niveau du CDN pour la vitesse de diffusion.
- Chaque image possède une URL unique, une mise en cache agressive est donc sans risque.
Résultats de ces changements :
- Taille moyenne : 900 Ko à 200 Ko.
- LCP : 4,1 s à 1,9 s.
- CLS : Éliminé.
Résumé des actions :
- Convertir en WebP avec une qualité de 85.
- Pré-dimensionner les conteneurs en utilisant le ratio d'aspect sélectionné.
- Définir l'image principale sur un chargement prioritaire.
- Mettre massivement en cache au niveau du CDN.
- Utiliser le lazy loading uniquement pour le contenu secondaire situé sous la ligne de flottaison (below the fold).
Communauté d'apprentissage optionnelle : https://t.me/GyaanSetuAi