Optimisation des images sur mon site WordPress (photographie)

[anthony carrel]

Bonjour,

Je cherche à optimiser mon site de photographie sous WordPress (hébergé chez Hostinger), qui contient plus de 1 500 images. Une partie des images est en WebP et aux dimensions recommandées, mais pas toutes. (Le lazyload est activé.)

Le site : anthonycarrel.com

Mon problème :

• Les images déjà optimisées restent lourdes également, car en allégeant trop leur poids, la qualité devient médiocre.

• Les fichiers RAW comportants les retouches sont perdus, donc je ne peux pas réexporter nativement en WebP et aux bonnes dimensions sans perte de qualité.

• Les images lourdes sont surtout sur les pages portfolio, tandis que celles sur la page d’accueil, les articles et autres sections sont bien optimisées.

• Mon objectif est d’améliorer la vitesse du site et d’éviter toute pénalité SEO.

Mes questions :

1. Quelle solution recommandez-vous pour optimiser mes images sans plugin ?

2. CDN : L’utilisation d’un CDN (Hostinger, Cloudflare) peut-elle aider ? Comment l’implémenter efficacement ?

3. Stockage externe : Stocker les images sur un cloud externe peut-il améliorer la performance ? Si oui, comment procéder ?

4. Plugins : Sont-ils réellement efficaces ? Une version gratuite suffirait-elle vu le volume d’images ?

Merci pour vos conseils

 

[site-voyance]

Bonjour,

1. Optimisation sans plugin​

Voici quelques solutions manuelles pour optimiser vos images :

• Servir des tailles d'images appropriées : Assurez-vous que WordPress génère et sert la bonne taille d'image pour chaque contexte d'affichage (via srcset).
• Compression par lot : Utilisez des outils comme ImageOptim (Mac) ou FileOptimizer (Windows) pour compresser en masse vos images déjà hébergées.
• Regenerate Thumbnails : Utilisez ce plugin une seule fois pour régénérer toutes vos miniatures, puis désactivez-le.

2. Utilisation d'un CDN​

Oui, un CDN peut significativement améliorer la vitesse de chargement :

• Cloudflareest une excellente option gratuite. La mise en place est simple :
  • Créez un compte Cloudflare
  • Ajoutez votre domaine
  • Modifiez vos serveurs DNS pour pointer vers ceux de Cloudflare
  • Activez la mise en cache automatique des images
• Hostinger CDN est déjà intégré à votre hébergement et pourrait être plus facile à configurer via leur panneau de contrôle.

3. Stockage externe​

Oui, cela peut aider, surtout pour les portfolios :

• Amazon S3 avec CloudFront : Idéal pour les photographes, avec une bonne mise en cache et distribution mondiale
• Bunny.net : Excellent rapport qualité/prix avec optimisation d'images intégrée
• Mise en œuvre:
  • Utilisez un plugin comme "WP Offload Media Lite" pour connecter votre site à S3
  • Configurez votre CDN pour servir depuis ce stockage

4. Plugins d'optimisation​

Pour 1500 images, certaines solutions gratuites ou à coût modéré peuvent suffire :

• Optimole (gratuit jusqu'à 5 Go/mois) : Redimensionne et compresse à la volée
• EWWW Image Optimizer (version gratuite) : Bon compromis entre fonctionnalités et performance
• ShortPixel (gratuit pour 100 images/mois, environ 10€ pour 10 000 images) : Excellent pour les photographes car il préserve bien la qualité

Recommandation personnalisée​

Vu votre situation et le volume d'images, je vous suggère la combinaison suivante :

1. Utilisez Cloudflare comme CDN (gratuit)
2. Compressez manuellement vos images les plus importantes avec un outil comme ImageOptim
3. Utilisez ShortPixel (version payante unique) pour traiter l'ensemble de votre bibliothèque
4. Pour les nouveaux ajouts, développez un workflow où vous exportez directement en WebP optimisé

Cela vous permettrait d'améliorer la vitesse sans compromettre la qualité de vos photographies.

 

[emualliug]

Je ne suis pas convaincu que le temps de chargement des images soit un gros problème dans ton cas.

Je suis allé voir ton site, et j'ai ressenti une lenteur dans le chargement de la page d'accueil : les éléments se mettent en place petit à petit, des décalages, etc. et pourtant, aucune image au dessus du pli si ce n'est un SVG de 1,2 Ko.

Quand j'analyse la page sur pagespeed, il m'indique une lourdeur du DOM et plus de 2 secondes pour le traitement du thread principal.

Il y a, à mon sens, d'autres pistes d'amélioration de la vitesse que le chargement des images.

Par ailleurs, plusieurs images ne se chargent pas : celle de l'affiche du concert de Billie Eillish sur la front, et celles des portfolios : /portfolio-professionnel-anthony-carrel/la-cabane-de-perols/ (aucune image) /portfolio-professionnel-anthony-carrel/pleiade-production/ (idem) /portfolio-professionnel-anthony-carrel/play-two/ (seule la première image se charge) /portfolio-professionnel-anthony-carrel/totem-production/ (seule la deuxième se charge).

 

[anthony carrel]

Bonjour,

1. Optimisation sans plugin​

Voici quelques solutions manuelles pour optimiser vos images :

• Servir des tailles d'images appropriées : Assurez-vous que WordPress génère et sert la bonne taille d'image pour chaque contexte d'affichage (via srcset).
• Compression par lot : Utilisez des outils comme ImageOptim (Mac) ou FileOptimizer (Windows) pour compresser en masse vos images déjà hébergées.
• Regenerate Thumbnails : Utilisez ce plugin une seule fois pour régénérer toutes vos miniatures, puis désactivez-le.

2. Utilisation d'un CDN​

Oui, un CDN peut significativement améliorer la vitesse de chargement :

• Cloudflareest une excellente option gratuite. La mise en place est simple :
  • Créez un compte Cloudflare
  • Ajoutez votre domaine
  • Modifiez vos serveurs DNS pour pointer vers ceux de Cloudflare
  • Activez la mise en cache automatique des images
• Hostinger CDN est déjà intégré à votre hébergement et pourrait être plus facile à configurer via leur panneau de contrôle.

3. Stockage externe​

Oui, cela peut aider, surtout pour les portfolios :

• Amazon S3 avec CloudFront : Idéal pour les photographes, avec une bonne mise en cache et distribution mondiale
• Bunny.net : Excellent rapport qualité/prix avec optimisation d'images intégrée
• Mise en œuvre:
  • Utilisez un plugin comme "WP Offload Media Lite" pour connecter votre site à S3
  • Configurez votre CDN pour servir depuis ce stockage

4. Plugins d'optimisation​

Pour 1500 images, certaines solutions gratuites ou à coût modéré peuvent suffire :

• Optimole (gratuit jusqu'à 5 Go/mois) : Redimensionne et compresse à la volée
• EWWW Image Optimizer (version gratuite) : Bon compromis entre fonctionnalités et performance
• ShortPixel (gratuit pour 100 images/mois, environ 10€ pour 10 000 images) : Excellent pour les photographes car il préserve bien la qualité

Recommandation personnalisée​

Vu votre situation et le volume d'images, je vous suggère la combinaison suivante :

1. Utilisez Cloudflare comme CDN (gratuit)
2. Compressez manuellement vos images les plus importantes avec un outil comme ImageOptim
3. Utilisez ShortPixel (version payante unique) pour traiter l'ensemble de votre bibliothèque
4. Pour les nouveaux ajouts, développez un workflow où vous exportez directement en WebP optimisé

Cela vous permettrait d'améliorer la vitesse sans compromettre la qualité de vos photographies.

Bonjour,

Je te remercie pour l'ensemble des solutions apportées.

Je vais m'y pencher.

merci d'avoir pris le temps,

 

[anthony carrel]

Je ne suis pas convaincu que le temps de chargement des images soit un gros problème dans ton cas.

Je suis allé voir ton site, et j'ai ressenti une lenteur dans le chargement de la page d'accueil : les éléments se mettent en place petit à petit, des décalages, etc. et pourtant, aucune image au dessus du pli si ce n'est un SVG de 1,2 Ko.

Quand j'analyse la page sur pagespeed, il m'indique une lourdeur du DOM et plus de 2 secondes pour le traitement du thread principal.

Il y a, à mon sens, d'autres pistes d'amélioration de la vitesse que le chargement des images.

Par ailleurs, plusieurs images ne se chargent pas : celle de l'affiche du concert de Billie Eillish sur la front, et celles des portfolios : /portfolio-professionnel-anthony-carrel/la-cabane-de-perols/ (aucune image) /portfolio-professionnel-anthony-carrel/pleiade-production/ (idem) /portfolio-professionnel-anthony-carrel/play-two/ (seule la première image se charge) /portfolio-professionnel-anthony-carrel/totem-production/ (seule la deuxième se charge).

Bonjour,

Merci pour votre commentaire !

Concernant les erreurs, j’ai trouvé hier soir une solution grâce à un développeur web américain assez connu qui crée du contenu sur le sujet. Il propose un code permettant de convertir les images en WebP tout en les redimensionnant à une taille maximale (j’ai défini 1920 px).

Cela fonctionne bien, mais une mise à jour est prévue pour demain. Il a précisé que les images plus petites seront mieux prises en charge et que certains bugs seront corrigés.

J’ai intégré ce code via le plugin “Snippet”. Qu’en pensez-vous ? Beaucoup de commentaires sont très positifs sur les résultats. Une personne m’a d’ailleurs envoyé la vidéo comme solution à mon problème où il explique tout en détail. En réalité, ce code agit un peu comme un plugin de compression.

Concernant PageSpeed Insights, j’ai aussi remarqué une baisse du score, et je pense que cela vient de ce code. La version 2 devrait normalement améliorer la situation. D’ailleurs, ce créateur de contenu a un groupe Facebook, je vais y poster un message pour confirmer si le problème vient bien de là.

Si cela vous intéresse, je peux vous partager le code (il est assez long).

Bonne journée !