Est-ce que vous vous demandez pourquoi votre site web n’est pas bien positionné sur Google ? Ou pourquoi vos clients n’utilisent pas et ne s’engagent pas avec votre site ? C'est peut-être à cause de la taille des images sur votre site. La taille de l’image a beaucoup d'influence sur la vitesse de chargement des pages et les stratégies SEO, ce qui détermine votre positionnement sur Google et l’attention que donnent les visiteurs de votre site.
Parfois, les gens ne voient pas l’importance d’optimiser les images sur un site web. Mais il est important de comprendre que les images lourdes (avec une taille de 5000 px sans optimisation) ont un effet sur la performance SEO de votre site et sur l'expérience utilisateur.
Dans cet article, on va discuter des principes à noter pour la taille de l’image.
Pourquoi la taille de l’image et la performance du site web sont importantes ?
Cela prend du temps pour un site web de se charger si tous les éléments de graphismes ne sont pas optimisés. Si votre site web se charge très lentement, l’expérience d’utilisateur ne sera pas satisfaisante. Ça vous conduit vers un positionnement plus bas sur les résultats de recherche sur Google et moins de gens vont trouver votre site web.
En optimisant les images sur votre site web, il peut vous aider avec les suivants :
∙ La vitesse de chargement
Selon une étude de Google, s’il fait plus de 5 secondes pour un site web de se charger, la probabilité qu’un visiteur sur mobile quitte votre page est augmentée par 90 %. Si vous optimisez et recadrez les photos, votre site web se charge plus rapidement.
∙ L’expérience d’utilisateur
Avec un site web qui montrent des photos de haute qualité, l’utilisateur qui navigue votre site aura une expérience plus engageante et satisfaisante. Vous vous assurez une bonne expérience utilisateur puisque les photos se chargent rapidement grâce à l’optimisation. Cela encourage les utilisateurs à découvrir plus votre site web et votre contenu.
∙ Le positionnement SEO
Le chargement rapide de votre site vous permet d’avoir un positionnement haut sur les résultats des moteurs de recherche. Soit si l’utilisateur utilise un ordinateur ou un smartphone pour ouvrir votre site web, les photos optimisées permettent le chargement rapide.
∙ Les ventes
Lorsque votre site web se charge rapidement, vous avez un bon positionnement. Ça vous permet d’être découvert par plus de visiteurs en ligne qui peuvent devenir vos clients.
Quelle est la taille de l’image appropriée pour les sites web ?
Sur Strikingly, vous pouvez travailler avec des différentes tailles d'images pour les différents écrans, sections, styles, et designs. Cela dit, il est toujours utile de connaître les dimensions recommandées.
Voici quelques principes sur la taille de l’image à savoir :
1. Les images pour l’arrière-plan
Les photos disponibles sur Strikingly sont conçues pour les différents écrans, quelle que soit la taille (ordinateur, tablette, smartphone, etc.). Pour s’assurer que votre arrière-plan apparaît bien sur n’importe quel écran, la taille de 1600 pixels de largeur sur 900 pixels de hauteur est recommandée.
Si vous allez montrer des photos de gens, de marques, ou des photos qui contiennent des informations sur d’autres sections de votre site web, faites toujours attention à la taille.
2. Les paramètres pour l’arrière-plan
Pour ajuster l’image que vous utilisez en tant qu’arrière-plan, vous avez ces options :
Image tirée de Strikingly
- Étirer : Cette option étire votre photo pour couvrir l’écran entier, en hauteur et en largeur. Puisque la photo s’adapte, selon la taille de l’écran, c’est normalement la meilleure option. Mais, si votre photo a de contenu sur les côtés, il est possible qu’il n’apparaît pas pour quelques écrans.
Image tirée de Strikingly
- Contenir : Cette option vous permet de montrer la photo entière et vous assure qu’aucune partie sera coupée. Toutefois, dans quelques écrans, il y aura des espaces blancs.
Image tirée de Strikingly
- Centrer : Avec cette option, votre image sera sur le centre de la page, sans changements sur la taille de l’image. Si vous avez mis une petite photo, il y aura des espaces blancs. Si la photo est grande, quelques parties seront coupées, particulièrement pour les écrans plus petits.
Image tirée de Strikingly
- Carreau : Cette option vous permet de centrer votre image et répéter l’image pour couvrir la page entière. C’est bien utile pour réaliser un motif.
Afin de mieux comprendre la taille des images appropriés, il faut être familier avec la terminologie et la taille de largeur de l’image associée :
- Image en arrière-plan : La taille de l’image idéale pour l’arrière-plan est 1600 px sur 900 px.
- Image en plein largeur : L’image doit avoir une taille de largeur d’au moins 1400 pixels.
- L’image en demi largeur : Pour ce type d’image, la taille de largeur doit être au moins 700 pixels.
- L’image en tiers largeur : L’image doit avoir une taille de largeur d’au moins 480 pixels.
- L’image en quart largeur : L’image doit avoir une taille de largeur d’au moins 360 pixels.
- Les icônes et les logos : La taille de largeur de ces images doit être au moins 100 pixels.
- Les images sur une galerie : Pour ces types d’images, il n’y a pas de taille exigée puisque les photos vont ouvrir une autre fenêtre sur votre site web.
Déterminer la taille de l’image pour votre site web
Afin de s'assurer de la performance et de la qualité de votre site web, vous devez maximiser l’espace dédié pour l’image. Par exemple :
- Les photos du diaporama sont normalement assez grandes
- Les images dans un blog sont de taille moyenne (avec une taille équivalente à la largeur de la page, sans barre latérale)
- Les vignettes sont plus petites
Pour déterminer la taille de l’image qui va bien avec votre site, vous pouvez utiliser un plugin qui détermine la largeur d’une page sur votre site. Vous pouvez également utiliser la fonctionnalité sur votre navigateur en suivant les étapes suivantes :
1. Faites un clic droit sur n’importe quel élément sur la page et cliquez sur « Inspecter ».
Image tirée de Strikingly
2. Une fenêtre va ouvrir avec du codage. Cliquez sur le bouton sur la partie supérieure gauche qui vous permet d’inspecter un élément spécifique.
Image tirée de Strikingly
3. Passez votre curseur sur l’élément pour voir la taille de largeur de la page.
Image tirée de Strikingly
Dans cet exemple, la taille de largeur de la page est de 870 pixels. Pour maximiser l’espace, vous devez montrer une image avec une taille de largeur d’au moins 870 pixels. Avec une telle image, vous conservez la qualité de l’image quel que soit l’appareil utilisé par les visiteurs.
Toutefois, il peut y avoir des exceptions : les nouveaux smartphones ont des écrans optimisés « retina » qui ont besoin des images de meilleure qualité pour apparaître très claires que possibles.
Voici des situations à considérer :
La taille de l’image pour un diaporama de plein largeur
Pour un diaporama de plein largeur, il faut avoir une largeur de 2560 pixels (la largeur entière du navigateur). Cette taille va bien avec les écrans de 27" et 30 ».
Quant à la hauteur de l’image, il n’y a pas de taille exigée, mais il est recommandé de conserver le rapport hauteur/largeur original de l’image. Vous pouvez normalement voir ce type de diaporama sur les sites web de photographes de mariage pour montrer leur portfolio.
Il est aussi possible de couper l’image pour avoir un rapport hauteur/largeur de 3:1. C’est à vous de déterminer la hauteur désirée, tant que la taille de largeur reste 2560 pixels (arrondi parfois à 2500 pixels).
Pour un diaporama, il n’y a pas besoin de montrer des images plus grandes pour adapter aux écrans de nouveaux smartphones. Vous n’avez pas besoin de montrer des images avec une taille de 5000 px puisqu’il ne sera pas une bonne idée quant au vol de l’image. Si la taille du diaporama est plus petite que la largeur de la page, vous pouvez ajuster la taille des images à 2000 px ou 1800 px.
La taille de l’image pour une galerie : les vignettes et les images plus grandes
Image tirée d’_utilisateur de Striki_ngly
En développant une galerie des photos, il est plus important de s’assurer qu’en cliquant sur les vignettes, les images plus grandes sont de la taille appropriée. Avec une galerie, les photos sont normalement regroupées ensemble et une fenêtre s'ouvre lorsque vous cliquez pour regarder les photos dans un diaporama.
Puisque les images sont montrées dans un diaporama, la taille de largeur approprié est au moins 1500 px pour bien apparaître sur l'écran de l’ordinateur ou de la tablette. Vous pouvez également ajuster la largeur jusqu’à 2000 px, si vous voulez. Quand l’utilisateur visite votre site sur mobile, avec cette taille de l’image, les photos peuvent s’adapter, même s’ils utilisent un nouveau smartphone avec un écran « retina ».
Vous pouvez également ajuster les images à la verticale afin d'avoir une taille plus petite de 800 px sur 1200 px (rapport de 2:3) ou 900 px sur 1200 px (rapport de 3:4).
Si vous avez beaucoup de photos sur la galerie et que vous avez ajouté la fonctionnalité de navigation des photos sur diaporama en glissant sur l’écran, cette taille de l’image conserve le chargement rapide de votre site web.
La taille de l’image pour un blog et d’autres pages du site web
Si vous n’avez pas besoin de montrer des versions plus grandes de vos photos, la taille pour ces images peut être déterminée selon la largeur de la colonne ou l’espace.
Vous pouvez suivre les étapes mentionnées ci-dessus et utiliser la fonctionnalité « Inspecter » sur votre navigateur. Sinon, vous pouvez essayer si le navigateur ajuste la taille de votre image automatiquement. Un plugin peut également vous aider dans cette étape.
Lorsque vous avez déterminé la taille de largeur, par exemple 825 px, vous devez multiplier ce nombre par deux (1650 px) pour les écrans « retina » de nouveaux smartphones. Selon la nature de votre site web et vos soucis concernant le vol de l’image, vous pouvez ajuster cette taille jusqu’à 1200 px, largeur ou hauteur.
Pour les photos plus petites, telles que les vignettes, vous pouvez suivre le même processus pour déterminer la taille.
Conclusion
Ces principes concernant la taille de l’image ne sont pas pour ceux qui offrent l’archivage des photos, tels que PhotoShelter ou SmugMug. Normalement, ces types de sites ont des mesures de sécurité et ne montrent pas d’images à haute résolution. Si vous vendez des images sur votre site web en tant qu’impressions ou téléchargements, vous n’avez pas aussi besoin de suivre ces règles.
Ces principes sont importants à suivre si vous avez un site web personnel ou professionnel qui montre des photos en ligne. En déterminant la taille de l’image la plus appropriée, vous vous assurez que votre site web est attrayant et utile.
Il peut prendre du temps pour être expert quant à cet aspect de développement d’un site web, mais lorsque vous l’avez appris, vous pouvez être plus efficace dans la création des sites web.
