📸Formats des images
Bienvenue dans ce tutoriel approfondi sur le format des images pour garantir la performance et la qualité visuelle de votre site. Suivez ces conseils pour optimiser les images selon les différentes sections de votre site.
Formats des images en Haute Définition HD
Événement : Format carré, ratio 1:1, dimensions 1080x1080 px (.webp)
Actualités : Format paysage, ratio 2.05:1, dimensions 1200x585px (.webp)
Bannière de page (header) : Format 1920x930 px (.webp) Veuillez choisir une image appropriée et centrer les éléments importants pour garantir leur lisibilité, sans qu'ils soient masqués par le titre, le fil d'Ariane, ou le header.
Formats et nomenclature
mairie-choisy-le-roi-votre-image.webp
Format d'Image : WEBP pour une Meilleure Performance
Utilisez le format WEBP pour vos images afin d'optimiser la performance de votre site. Le format WEBP offre une excellente qualité d'image tout en réduisant la taille des fichiers, ce qui permet un chargement plus rapide des pages.
Convertir une image au format WEBP à partir d'un outil en ligne gratuit
Pour convertir une image au format WEBP en utilisant un outil en ligne gratuit, veuillez suivre les étapes suivantes :
Accéder à un outil en ligne gratuit Ouvrez votre navigateur web et allez sur un site de conversion d'images en ligne tel que Convertio, Online-Convert, ou tout autre site de votre choix.
Téléverser votre image Cliquez sur le bouton Choisir des fichiers ou Sélectionner des fichiers pour téléverser l'image que vous souhaitez convertir. Vous pouvez aussi glisser-déposer votre image dans la zone prévue à cet effet.
Sélectionner le format de sortie Choisissez le format de sortie WEBP si ce n'est pas déjà sélectionné par défaut.
Convertir l'image Cliquez sur le bouton Convertir ou Démarrer la conversion. Le processus de conversion commencera et peut prendre quelques secondes.
Télécharger l'image convertie Une fois la conversion terminée, cliquez sur le bouton Télécharger ou Download pour sauvegarder votre image convertie au format WEBP sur votre ordinateur.
Taille des Images : Inférieure à 300 Ko
Assurez-vous que la taille de vos images est inférieure à 300 Ko pour éviter de surcharger le site et garantir des temps de chargement rapides, améliorant ainsi l'expérience utilisateur.
Dimensions Spécifiques pour Chaque Section :
Images en Général (Non Croppées, Qualité Optimale) :
Veillez à ce que les images ne soient pas rognées.
Assurez-vous qu'elles conservent leurs dimensions d'origine pour garantir une présentation fidèle. De préférence, une image ayant pour dimension de 1620 x 1080
Optez toujours pour une qualité d'image optimale, sans pixélisation, pour offrir un contenu visuel de haute qualité.
Vérification de la Qualité et de la Taille :
Avant de publier vos images, vérifiez la qualité visuelle et la taille du fichier. Assurez-vous que chaque image répond aux critères définis dans ce guide pour garantir une expérience utilisateur optimale.
Nommez Vos Fichiers Correctement :
Utilisez des noms de fichiers descriptifs pour vos images. Cela facilite la gestion et la recherche ultérieure. Évitez les noms génériques comme "image001.jpg".
Utilisez des Textes Alternatifs (Alt Text) :
Ajoutez des textes alternatifs à vos images pour améliorer l'accessibilité et l'indexation par les moteurs de recherche. Ces descriptions textuelles sont utiles pour les utilisateurs malvoyants et contribuent au référencement.
Testez la Compatibilité Multiplateforme :
Assurez-vous que vos images s'affichent correctement sur différentes plates-formes (ordinateurs, tablettes, mobiles). Les tests de compatibilité vous permettent de garantir une expérience utilisateur cohérente.
Révisez Régulièrement Votre Bibliothèque d'Images :
Faites des révisions périodiques de votre bibliothèque d'images. Supprimez les images inutilisées et optimisez celles qui nécessitent des ajustements pour maintenir la performance du site.
En suivant ces conseils supplémentaires, vous créerez une expérience visuelle optimale et améliorerez les performances de votre site web. Restez attentif à l'évolution des besoins de votre site et ajustez vos images en conséquence.
Mis à jour