Vous ne savez pas pourquoi votre site ne se classe pas bien sur Google ou pourquoi les consommateurs ne s’y intéressent pas? La taille des images pour les sites Web et la vitesse du site Web et les problèmes de référencement affectent souvent les taux de rebond et les classements.
Pour beaucoup de gens, enregistrer des images pour le Web a toujours été un mystère. Les images lourdes (tailles d’images originales à une largeur de 5000px, images non optimisées) dégraderont non seulement l’expérience utilisateur sur votre site mais auront également un impact négatif sur votre stratégie de référencement (vitesse de chargement, taux de rebond, classement, etc.).
Décomposons la liste des directives de taille d’image du site Web.
Pourquoi la Taille des images et les Performances du Site Web sont-elles importantes ?
Le chargement des sites Web prend plus de temps lorsque les graphiques ne sont pas optimisés. La lenteur des sites Web entraîne une mauvaise expérience utilisateur, une probabilité moindre de classement dans les recherches Google et, par conséquent, moins de requêtes et de consommateurs.
Les directives de taille d’image du site Web mentionnent que l’enregistrement de vos photos dans les bonnes proportions et leur optimisation pour le Web peuvent aider à diverses choses, notamment:
• Vitesse
Selon les recherches de Google, si le chargement d’une page Web prend plus de 5 secondes, la probabilité qu’un visiteur mobile abandonne la page augmente de 90%. Vous pouvez accélérer les pages de votre site Web en réduisant et en réduisant la taille des images.
• Expérience utilisateur
Les visiteurs auront une expérience plus attrayante lors de la navigation sur votre site Web si vous utilisez des images de haute qualité et convaincantes. Vous offrez une expérience fluide et fluide à vos visiteurs en optimisant ces photos et en les chargeant rapidement, ce qui les encourage à passer plus de temps sur votre site et à explorer votre contenu.
• Classement SEO
Plus votre site se charge tôt, plus vous pouvez vous classer. Sur les ordinateurs de bureau et les appareils mobiles, les pages Web avec des graphiques optimisés se chargent beaucoup plus rapidement.
• Ventes
Des vitesses de chargement plus rapides et un référencement amélioré peuvent aider à attirer plus de visiteurs sur votre site, augmentant ainsi vos chances d’être contacté et réservé.
Quelles sont les tailles d’image les plus appropriées pour les sites Web?
Strikingly est conçu pour fonctionner avec une large gamme de tailles d’image pour différentes tailles d’écran, sections, styles et conceptions. Cependant, il est parfois utile d’avoir un concept approximatif des dimensions à télécharger.
Voici quelques directives générales sur la taille de l’image du site Web à suivre!
L’image est tirée de
1. Images pour l’arrière-plan
Les photos de toile de fond de Strikingly sont conçues pour s’adapter à une large gamme de tailles d’écran, du moniteur à la tablette en passant par le téléphone. Pour que votre toile de fond soit excellente sur tous les écrans, nous recommandons une taille de 1600 pixels de large par 900 pixels de hauteur. Incluez des photos sans arrière-plan de personnes, de marques et d’autres informations avec prudence!
2. Paramètres de l’arrière-plan
Pour dimensionner / aligner votre arrière-plan, vous avez quelques alternatives.
Stretch/Cover par défaut: Cette option étire votre image pour remplir tout l’écran, en hauteur et en largeur. Parce que l’image fonctionnera comme arrière-plan sur n’importe quelle taille d’écran, c’est généralement la meilleure solution. Cependant, si votre image a du contenu sur les côtés (en particulier à gauche et à droite), elle peut ne pas être visible sur les téléphones mobiles.
Contenir : Contient affiche l’image complète, en veillant à ce qu’aucune partie de celle-ci ne soit coupée. Sur certains appareils, cependant, cela peut entraîner des espaces blancs.
Centre: L’image sera affichée au centre de la section et ne sera pas mise à l’échelle si vous choisissez le centre. D’autre part, l’arrière-plan montrera que l’espace blanc sur les bords de l’image est trop petit. Certains éléments de l’image peuvent être coupés s’ils sont trop grands, en particulier sur les écrans plus petits.
Tuile: La tuile se centrera puis répétera une image, ce qui est pratique pour créer des motifs.
Pour commencer les directives de taille d’image du site Web, notez la largeur de l’image sur la page.
L’image est prise de manière frappante
La taille idéale des images d’arrière-plan est de 1600x900px
• Images pleine largeur
Elles doivent avoir au moins 1400 pixels de large pour les meilleurs résultats. Selon les directives de taille d’image du site Web
Les images demi-largeur doivent avoir une largeur d’au moins 700 pixels pour une qualité optimale.
• widthimages de largeur
Les images doivent avoir une largeur d’au moins 480 pixels pour des images de 1/3 de largeur de meilleure qualité.
• Images ¼ de largeur
Pour des images 1/4 de largeur de meilleure qualité, elles doivent avoir une largeur d’au moins 360 pixels.
• Petites icônes et logos
Ils doivent avoir une largeur d’au moins 100 pixels.
• Images de galerie
N’importe quelle taille convient aux images de galerie! Les images de la galerie s’ouvriront dans une lightbox au-dessus de votre site Web.
Quelle Taille d’image est Requise pour Votre Site Web?
Les images doivent être aussi grandes que nécessaire pour s’adapter à leurs « conteneurs » pour des performances maximales du site Web, en fonction de la mise en page de votre page. Les photos de diaporama, par exemple, sont souvent plus grandes; les images de blog sont de taille moyenne (à une largeur égale à la largeur de la page moins la barre latérale); les vignettes sont plus petites, etc.
Selon les directives de taille d’image du site Web, il est essentiel de vérifier d’abord les dimensions de l’image afin de calculer la largeur de la zone de contenu de votre site. Vous pouvez utiliser un plugin de navigateur « règle de page » pour vous aider à prendre les mesures, ou vous pouvez utiliser les outils de développement intégrés à votre navigateur Web si vous avez de l’expérience: Cliquez avec le bouton droit sur un élément de page et sélectionnez « Inspecter » dans le menu déroulant.
L’image est prise de manière frappante
Puis, dans la barre d’outils, utilisez l’outil de sélection d’éléments pour survoler la section d’image ou de contenu qui vous intéresse:
L’image est tirée de Strikingly
L’image est tirée de Strikingly
Dans ce cas, la colonne ci-dessus nécessite une image d’une largeur d’au moins 525 pixels.
Nous disons « au moins » parce que les images des nouveaux smartphones dotés d’écrans « retina » à haute densité doivent être plus grandes que cela pour être aussi nettes que possible.
Considérez les scénarios suivants:
A. Diaporama en pleine largeur Taille de l’image Web
Les directives sur la taille de l’image du site Web recommandent une largeur de 2560 pixels pour les diaporamas en pleine largeur (qui s’étendent automatiquement à la pleine taille du navigateur). Il s’agit de la largeur de résolution habituelle pour les moniteurs 27″ et 30″.
Les images peuvent être aussi hautes que vous le souhaitez pour atteindre le rapport d’aspect que vous choisissez. Les diaporamas pleine page, par exemple, qui sont courants sur les sites Web de photographie de mariage, conservent le rapport d’aspect original des photographies. D’autres sites Web utilisent un diaporama qui couvre toute la largeur de la page mais qui est moins en hauteur (ce qui conduit à un rapport d’aspect d’environ 3: 1).
Voici un exemple de diaporamas « panoramiques » de sites Web photographiques:
L’image est tirée du site Web de Strikingly usre
Les images doivent avoir une largeur de 2560 pixels (arrondir à 2500 pixels) et la hauteur que vous choisissez pour les images qui couvrent toute la largeur du navigateur (selon que vous souhaitez conserver le rapport d’aspect natif de vos images ou opter pour une coupe plus panoramique).
Ce n’est pas un cas où nous devons doubler la taille de l’image pour les écrans retina car cela entraînerait des images massives de 5000 pixels (pour ne pas ajouter les dangers du vol d’image, avec de grandes tailles de fichiers).
Ajustez la taille d’image requise pour les diaporamas plus petits qui n’occupent pas toute la largeur de la page, mais seulement une partie de celle-ci (peut-être 2000px, ou 1800px, etc.)
L’image est tirée du site Web de Strikingly usre
B. Tailles d’image dans les galeries (et les vignettes qui s’Agrandissent dans une vue Lightbox)
Les galeries de vignettes sont des situations uniques dans lesquelles la taille de vos vignettes est ignorée pour garantir que les photos sont suffisamment grandes lorsqu’elles sont agrandies.
Une grille de photos miniatures qui, lorsqu’on clique dessus, s’ouvre dans un diaporama en plein écran (généralement avec une superposition semi-transparente en dessous) est appelée « vue lightbox »:
Parce que ces photographies s’ouvrent en mode plein écran, les directives de taille d’image du site Web recommandent de les faire au moins 1500 pixels de large (sur le bord le plus long) pour les rendre bien sur les ordinateurs de bureau et les tablettes.
Vous pouvez même aller jusqu’à 2000 pixels si vous souhaitez ajouter un « facteur wow » supplémentaire, bien que ce ne soit généralement pas le cas.
Les images sont de toute façon ajustées par le navigateur sur les appareils mobiles, et 1500 pixels est suffisamment grand pour être net sur les smartphones dotés d’écrans « retina » à PPI élevé.
Les images verticales / portrait d’une hauteur maximale de 1200 pixels (par exemple 800×1200 pixels pour une image verticale 2: 3 ou 900×1200 pixels pour une image verticale 3: 4) peuvent être encore plus petites.
Si le diaporama permet de naviguer entre les photos à l’aide de flèches latérales, de puces, de glisser sur un mobile ou de flèches du clavier sur un bureau, la limitation des dimensions de l’image gardera la taille du fichier raisonnable, ce qui accélérera le chargement des images:
C. Tailles d’image recommandées pour les articles de blog et autres Images statiques dans les mises en page
Si les photos de votre blog ne nécessitent pas de fonction de clic pour agrandir (ou « lightbox »), elles doivent être dimensionnées en fonction de la colonne ou la largeur de la zone de contenu.
Prenez l’exemple suivant d’un seul article de blog:
L’image est tirée du site Web de Strikingly usre
Vous pouvez déterminer la largeur réelle de la zone de contenu en mesurant n’importe quel paragraphe de texte en utilisant les méthodes décrites ci-dessus, par exemple:
L’image est tirée du site Web de Strikingly usre
Alternativement, si vous avez déjà des images, vous pouvez voir à quelle taille le navigateur les redimensionne.
Pour acquérir les mêmes informations, vous pouvez utiliser un plugin de navigateur comme View Image Info (propriétés).
Avec ces informations (825 pixels par exemple), vous pouvez maintenant doubler la taille pour tenir compte des écrans retina (donc 1650 pixels de largeur).
En fonction du thème de votre site et de votre tolérance au risque de vol d’image, vous pouvez réduire cette quantité à 1200 pixels plus sensibles sur le bord le plus long (les images horizontales doivent donc avoir une largeur de 1200 pixels et les images verticales doivent avoir une hauteur de 1200 pixels, tout en conservant leur format d’origine).
Les photos plus petites utilisées comme vignettes (qui n’ont pas besoin d’être étendues) sont soumises au même processus de prise de décision.
Conclusion
Ces directives de taille d’image de site Web ne s’appliquent pas vraiment aux services d’archivage de photos tels que PhotoShelter ou SmugMug (qui ont des mesures de sécurité intégrées et génèrent des vignettes basse résolution à partir de vos fichiers haute résolution originaux selon les besoins du site), ou lorsque vous vendez ces images en téléchargement ou en impression, comme mentionné au début.
Suivre ces pratiques de directives de taille d’image de site Web est un must si vous avez un site auto-hébergé et que vous n’avez qu’à présenter vos photographies sur le Web.
Choisir les images appropriées est un aspect important de la création d’un site Web visuellement attrayant et à chargement rapide. Il y a, sans aucun doute, une courbe d’apprentissage. Cependant, il y a d’autres avantages à avoir, et cela fait partie de l’excitation de la création et de la maintenance d’un site Web!