Taille d'image d'arrière-plan correcte pour le web

Lors de la création d'un site Web, il est important de comprendre comment chaque image, zone de texte et hyperlien interagit les uns avec les autres pour créer un ensemble fonctionnel. Ceci est particulièrement vrai pour les images d'arrière-plan qui peuvent ajouter de la couleur et du style à une mise en page minimaliste. Mais, si vous n'optimisez pas cette image avec les bonnes dimensions et la bonne taille de fichier, cela peut ralentir votre site Web ou étirer l'image de manière peu attrayante. Nous présentons ci-après quelques conseils essentiels pour sélectionner et redimensionner les images d'arrière-plan pour le Web.


Vous avez besoin d'images pour votre projet ? La collection impressionnante de plus de 70 millions d'images de Shutterstock peut vous aider ! Découvrez ce que notre bibliothèque peut vous offrir.


La taille fait tout
Les images d'arrière-plan sont idéales pour rendre un site attrayant mais plus vos pages sont basées sur ces images, plus votre site Web sera lent. Pour éviter que votre site ne bugge en cas d'une trop grande quantité de données, vous devez trouver le juste équilibre entre la qualité et la taille de l'image. Cela aide à penser aux normes de résolution actuelles, qui vous indiquent le nombre de pixels affichés à l'écran. 

Actuellement, les résolutions de bureau et de tablettes les plus populaires sont 1280 x 800, 1366 x 768 et 1920 x 1080. D'autre part, les smartphones afficheront votre site Web avec une résolution inférieure, comme 320 x 480 ou 800 x 480. Finalement, la dernière gamme d'ordinateurs avec Retina affichent des images à la demande qui sont deux fois plus grandes que le moniteur moyen. 

Trouver un compromis
Comment êtes-vous supposé créer une image d'arrière-plan qui répond à toutes ces exigences ? Si vous cherchez à utiliser une image d'arrière-plan très détaillée, il est préférable de garder une taille de fichier inférieure à 1Mo (et si possible, inférieure à 100Ko). 

Une image d'arrière-plan de 1Mo peut dépasser les limites de vitesse Internet d'un utilisateur type, mais cela ne ruinera pas son expérience du Web, c'est donc une bonne règle de base. De même, si le même arrière-plan est utilisé sur tout votre site, vous pouvez augmenter légèrement la résolution car l'image sera enregistrée dans le cache de l'utilisateur après son premier chargement. Nous recommandons de redimensionner votre image d'arrière-plan pour obtenir un rapport de 1.777 sur 1, ce qui est optimal pour les écrans avec une résolution 1920 x 1080. 

  • Cet article vous a-t-il été utile ?

Vous ne trouvez pas ce que vous cherchez ?