8 erreurs d'image à éviter sur votre site Web
Les grandes images, les galeries et les designs photo-lourds sont une grande tendance dans la conception web. Pour tirer le meilleur parti de cette esthétique, vous voulez vous assurer que chaque image de votre site Web correspond à l'affichage et représente bien votre marque.
Il y a beaucoup d'erreurs que les concepteurs font en cours de route, des problèmes techniques à la qualité de l'image. Mais vous n'avez pas à tomber dans l'un de ces pièges lorsque vous travaillez avec des images de site Web. Ici, nous allons examiner les erreurs d'image et comment les corriger ou les éviter complètement. (En bonus dans ce post, nous proposons une collection d'images amusantes et géniales de la mort à la récente collection d'objets de la Stock Photo.)
Erreur: téléchargement de fichiers volumineux
Les images en taille réelle sont belles (et nécessaires) en ce qui concerne les travaux d'impression, mais peuvent poser des problèmes en ce qui concerne le Web. Les grandes images se chargent lentement; les temps de chargement lents obligent les utilisateurs à abandonner votre site.
Malheureusement, c'est un piège facile à tomber. De nombreux programmes backend permettent le téléchargement de grandes images et à moins que vous n'y prêtiez attention, vous ne savez peut-être même pas que les fichiers sont téléchargés à des tailles incroyables. Différentes images dans différentes utilisations nécessitent des spécifications d'image différentes. Reportez-vous au guide de votre marque ou de votre site Web pour connaître les dimensions des zones d'image courantes sur votre site.
Lorsque vous pensez aux images, le type de fichier est également important. Veuillez ne pas utiliser de tiff pour le Web. Les formats de fichiers les plus courants et utilisables sont PNG (images générées par ordinateur comme des graphiques ou des logos ou lorsque la transparence est nécessaire), JPG (photos) ou GIF (animations).
Solution: La solution simple consiste à dimensionner les images en fonction de la dimension du cadre où elles apparaîtront à une résolution Web appropriée. Mais il y a un peu plus. Enregistrez chaque image pour une utilisation optimale sur votre site et pour le partage social. (La largeur d'une image Pinterest, par exemple, est de 600 pixels; si vous voulez que l'image soit partageable, elle doit être de cette taille.)
Erreur: Oublier de recadrer
L'utilisation de fichiers volumineux peut entraîner un blocage d'un site, tout comme l'utilisation d'images plein cadre masquées à l'écran. Le recadrage permet de mettre en valeur les visuels que vous voulez que les utilisateurs voient en créant un point focal défini qui pourrait ne pas être là avec une image plein format.
Le manque de recadrage d'image peut également créer une pile de visuels moins que dynamiques qui ont tous les mêmes formes et proportions. L'utilisation de plusieurs cultures et de formes intéressantes pour les images peut ajouter une intrigue visuelle à un site Web.
Solution: recadrez les images à la taille ou à la dimension appropriée avant de les télécharger afin que chaque image s'affiche comme vous le souhaitez.
Erreur: Oublier les vignettes
Il existe plusieurs façons de gérer le redimensionnement et le redimensionnement des miniatures. (Beaucoup d'entre eux dépendent de vos capacités backend, donc nous ne discuterons pas des mérites de chacun.) Mais vous devez vous rappeler de mettre à jour et de faire attention aux plus petites images de votre site.
Trop souvent, les concepteurs oublient que les vignettes, les aperçus d'images et les favicons devront être mis à jour avec les modifications apportées au contenu du site Web.
L'autre erreur majeure? Utiliser une image médiocre à la taille d'une vignette car elle est aussi grande que possible. Si l'image est mauvaise, ne l'utilisez pas. Aucune image n'est meilleure qu'une mauvaise image.
Solution: assurez-vous de supprimer les anciennes vignettes ou aperçus lorsque les images changent et que votre favicon est à jour.
Erreur: noms et métadonnées non consultables
Les appareils photo numériques enregistrent beaucoup d'informations dans divers champs méta qui ne se traduisent pas sur le Web. Supprimez ces informations des images et échangez-les contre des données utilisables. Les moteurs de recherche ne peuvent pas lire le contenu des images, donc pour les rendre consultables, les images doivent inclure des mots descriptifs dans le titre, les balises et le contenu environnant.
Exemples de mauvais noms d'image:
- picture1.jpg
- DSCN00023.jpg
- lunettes% et% watch.jpg
Un nom d'image bien meilleur comprend quelques mots descriptifs tels que lunettes-et-regarder-et-plant.jpg. L'étiquette de référence pour l'image doit inclure une description similaire, comme «des articles sur des verres de comptoir, une montre et une plante». (Et assurez-vous d'épeler correctement les mots.)
Solution: utilisez des conventions de dénomination strictes pour toutes les images de site Web et associez les images au contenu lié à chaque visuel. Les noms d'images doivent inclure des mots descriptifs séparés par des tirets.
Erreur: mise à l'échelle ou étirement incorrect
Rien de plus étrange qu'une personne avec un visage étiré ou une image mal mise à l'échelle. L'étirement ou la mise à l'échelle non proportionnelle des images (ce qui peut être particulièrement courant lorsqu'un changement de thème ou d'arrière-plan se produit) est un non-non. Chaque image doit être mise à l'échelle avec un rapport de 1 à 1, verticalement et horizontalement. Tout autre élément nuit à l'intégrité de la photo.
Solution: observez de près toutes les proportions de mise à l'échelle et auditez régulièrement votre site.
Erreur: pas de planification pour plusieurs tailles d'appareils
Les cadres de conception réactifs ont certaines implications pour les images. Le changement de forme ou de taille d'un appareil à l'autre ou par orientation rend important de dicter le rendu des images sur les appareils.
L'une des pratiques les plus courantes consiste à utiliser des requêtes multimédias pour planifier ces modifications par périphérique. Le CSS permet d'appliquer des styles spécifiques aux images en fonction des dimensions de l'écran et aide à rendre les images sans «casser» la conception.
Solution: utilisez des requêtes multimédias pour des cadres réactifs et testez le rendu d'image sur un certain nombre d'appareils.
Erreur: ignorer les écrans de la rétine
Il n'y a pas si longtemps, une image standard de 600 pixels de large à 72 ppp était tout ce dont vous aviez besoin pour un site Web. Mais les écrans s'améliorent à un rythme où ce n'est tout simplement plus le cas.
En fonction de votre cadre, chaque image peut en fait inclure plusieurs images enregistrées pour différentes tailles d'écran et résolutions, y compris des écrans rétine. (La résolution des écrans rétine peut varier selon l'appareil, mais ils sont nettement supérieurs aux écrans standard.)
Solution: incluez des fichiers et des requêtes multimédias spécifiquement destinés aux écrans Retina. (Les astuces CSS peuvent vous aider.)
Erreur: art surutilisé ou générique
La photographie de stock peut être une excellente solution rapide mais peut entraîner des conséquences inattendues. Les photos qui sont utilisées sur un trop grand nombre de sites Web ou qui ont simplement une apparence générique ne créeront pas un visuel qui établit une connexion avec les utilisateurs. (Vous ne voulez pas que votre site Web ressemble à tous les autres, n'est-ce pas?)
Si vous prévoyez d'utiliser la photographie d'archives, envisagez des images que vous pouvez modifier ou utiliser de manière intéressante. Évitez les images qui ressemblent à des choses que vous avez vues ailleurs (consultez les images de tous les concurrents ou des sites similaires).
Solution: envisagez d'embaucher un photographe pour créer un excellent fichier image spécifique à votre site Web. Incluez des visuels liés à votre entreprise ou à votre marque et reflétant votre site de la bonne manière.
Conclusion
La sélection et la création d'images pour un projet de site Web peuvent être l'une des parties les plus amusantes du processus de conception. Prenez soin de chaque image et pixel pour vous assurer que votre site fonctionne correctement et inclut des images qui intéresseront les utilisateurs.
Avez-vous des conseils ou des astuces concernant l'utilisation d'images pour des projets de site Web? Nous aimerions savoir de quoi il s'agit. Partagez-les dans les commentaires.
