Comment produire des photos idéales pour votre site internet
Temps de lecture : 5 minutes
L’optimisation des images est cruciale pour la performance de votre site web. Des photos trop lourdes ralentissent le chargement des pages, pénalisent votre référencement et frustrent vos visiteurs. Voici comment créer des images parfaitement adaptées au web.
Choisir le bon format : JPG ou AVIF ?
Le format JPG : la valeur sûre
Le JPG reste le format le plus utilisé sur le web pour les photographies. Ses avantages :
- Compatibilité universelle : supporté par tous les navigateurs
- Bon compromis qualité/poids : compression efficace pour les photos
- Idéal pour : photos, images avec beaucoup de couleurs et dégradés
Le format AVIF : l’avenir de l’image web
L’AVIF est un format moderne qui offre une compression supérieure :
- Poids réduit de 50% par rapport au JPG à qualité équivalente
- Meilleure qualité visuelle avec moins de données
- Parfait pour : tous types d’images, surtout si vous visez les meilleures performances
Attention : l’AVIF n’est pas encore supporté par tous les navigateurs anciens. L’idéal est de proposer l’AVIF avec un JPG en fallback.
Les dimensions idéales selon l’usage
Image en pleine largeur (hero, bannière, slider)
- Desktop : 1920 × 1080 px maximum
- Poids cible : 150-300 Ko
Image de contenu (dans une page ou un article)
- Largeur : 1200 px maximum
- Poids cible : 100-200 Ko
Vignettes et miniatures
- Dimensions : 300 × 300 px à 600 × 400 px
- Poids cible : 30-80 Ko
Images de produits (e-commerce)
- Principal : 1000 × 1000 px
- Vignettes : 300 × 300 px
- Poids cible : 80-150 Ko (principale), 20-40 Ko (vignette)
Redimensionner facilement vos images
Avant de convertir, il est essentiel de redimensionner vos images aux bonnes dimensions. Voici plusieurs méthodes simples et gratuites.
Méthode 1 : Avec Convertio (le plus simple)
Convertio permet aussi de redimensionner vos images en même temps que la conversion :
- Uploadez votre image sur convertio.co/fr/
- Cliquez sur l’icône paramètres (roue dentée) à côté du format de sortie
- Sélectionnez « Redimensionner »
- Choisissez votre méthode :
- Par largeur : entrez la largeur souhaitée (ex: 1200 px), la hauteur s’ajuste automatiquement
- Par hauteur : entrez la hauteur, la largeur s’adapte
- Dimensions exactes : définissez largeur ET hauteur (attention aux déformations)
- Pourcentage : réduisez de 50%, 75%, etc.
- Convertissez : le redimensionnement se fait automatiquement
Méthode 2 : Avec Windows
Paint (ultra simple) :
- Ouvrez votre image avec Paint
- Cliquez sur « Redimensionner » dans le ruban
- Cochez « Pixels » et décochez « Conserver les proportions » si besoin
- Entrez les nouvelles dimensions
- Enregistrez sous le format souhaité
Photos (Windows 10/11) :
- Ouvrez l’image dans l’application Photos
- Cliquez sur les trois points (…) > « Redimensionner »
- Choisissez parmi les tailles prédéfinies ou définissez une taille personnalisée
- Enregistrez une copie
Méthode 3 : Avec Mac
Aperçu (Preview) :
- Ouvrez l’image avec Aperçu
- Menu « Outils » > « Ajuster la taille »
- Décochez « Mise à l’échelle proportionnelle » si besoin
- Entrez les nouvelles dimensions
- Enregistrez
Méthode 4 : En ligne (sans installation)
ILoveIMG (gratuit) :
- Accédez à iloveimg.com/fr/redimensionner-image
- Uploadez votre image
- Choisissez les dimensions en pixels ou en pourcentage
- Téléchargez le résultat
Pixlr (éditeur plus avancé) :
- Rendez-vous sur pixlr.com/fr/x/
- Ouvrez votre image
- Image > Taille de l’image
- Ajustez les dimensions
- Exportez
Conseil pro : La règle du ratio
Pour éviter les déformations, conservez toujours le ratio d’origine de votre image. Si votre photo fait 4000 × 3000 px (ratio 4:3), redimensionnez proportionnellement : 1200 × 900 px, 800 × 600 px, etc.
Convertir gratuitement avec Convertio
Convertio est un outil en ligne gratuit et simple pour convertir vos images.
Étapes de conversion
- Accédez au site : rendez-vous sur convertio.co/fr/
- Sélectionnez vos fichiers : cliquez sur « Choisir les fichiers » ou glissez-déposez vos images
- Choisissez le format de sortie :
- Cliquez sur le menu déroulant à droite
- Sélectionnez « Image » puis « JPG » ou « AVIF »
- Lancez la conversion : cliquez sur « Convertir »
- Téléchargez : récupérez vos images converties
Avantages de Convertio
- Gratuit jusqu’à 100 Mo par jour
- Aucune installation requise
- Conversion par lot : traitez plusieurs images simultanément
- Nombreux formats supportés
- Préservation de la qualité : options de compression ajustables
Bonnes pratiques pour des images optimales
Avant le chargement de vos images dans la médiathèque
- Redimensionnez en amont : ne comptez pas sur le CSS pour réduire vos images
- Compressez intelligemment : visez une qualité de 80-85% pour le JPG
- Recadrez : supprimez les zones inutiles de l’image
- Nommez correctement : utilisez des noms descriptifs (ex: « canape-salon-moderne.jpg »)
Optimisation avancée
- Utilisez des outils de compression : TinyPNG, ImageOptim, Squoosh
- Activez le lazy loading : chargez les images seulement quand nécessaire
- Proposez plusieurs résolutions : utilisez l’attribut srcset pour le responsive
- Pensez au format WebP : compromis intéressant entre JPG et AVIF
- Renseignez le texte alternatif avec du texte permettant un bon référencement
Checklist finale
✓ Format adapté (JPG pour la compatibilité, AVIF pour la performance)
✓ Dimensions appropriées à l’usage
✓ Poids inférieur à 200 Ko (sauf hero images)
✓ Nom de fichier descriptif
✓ Attributs alt renseignés pour l’accessibilité (texte alternatif)
✓ Compression appliquée sans perte visible de qualité
Conclusion
Des images bien optimisées améliorent considérablement l’expérience utilisateur de votre site. En choisissant les bons formats, les dimensions adaptées et en utilisant des outils gratuits comme Convertio, vous garantissez des temps de chargement rapides tout en préservant la qualité visuelle. N’oubliez pas : une image optimisée, c’est un visiteur satisfait et un meilleur référencement !
Conseil pro : Automatisez votre workflow en créant des presets dans vos outils de retouche photo avec les dimensions et niveaux de compression que vous utilisez régulièrement. Vous gagnerez un temps précieux !
Article rédigé par START IT – Expert en création de sites web pour artistes et artisans, basé à Besançon
