Les grandes images, les galeries et les conceptions photo-lourdes 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'écran et représente bien votre marque.
Les concepteurs commettent de nombreuses erreurs, allant des problèmes techniques à la qualité des images. Mais vous ne devez pas tomber dans l'un de ces pièges lorsque vous travaillez avec des images de sites Web. Ici, nous allons examiner les erreurs d’image et comment les corriger ou les éviter complètement. (En bonus, nous présentons une collection de photos amusantes et amusantes de la collection d'objets récents de Death to Stock Stock.)
Erreur: téléchargement de gros fichiers
Les images en taille réelle sont belles (et nécessaires) pour les tâches d'impression, mais peuvent poser problème en cas de problèmes liés au Web. Les grandes images se chargent lentement; Les temps de chargement lents amènent les utilisateurs à quitter votre site.
Malheureusement, il est facile de tomber dans ce piège. De nombreux programmes de base autorisent le téléchargement de grandes images et, à moins que vous ne prêtiez attention, vous pourriez même ne pas savoir que les fichiers sont téléchargés dans des tailles incroyables. Différentes images dans différentes utilisations nécessitent différentes spécifications d'image. Reportez-vous au guide de votre marque ou de votre site Web pour connaître les dimensions des zones d’image communes de votre site.
En ce qui concerne les images, le type de fichier est également important. S'il vous plaît ne pas utiliser un tiff pour le Web. Les formats de fichiers les plus courants et les plus utilisables sont les fichiers PNG (images générées par ordinateur, telles que les graphiques ou les logos, 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, afin que celui-ci apparaisse à une résolution Web appropriée. Mais il y a un peu plus que ça. 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 souhaitez que l'image puisse être partagée, sa taille devrait être la même.)
Erreur: oublier de recadrer
L'utilisation de gros fichiers peut gêner un site, de même que l'utilisation d'images en plein écran masquées à l'écran. Le recadrage permet de mettre en valeur les éléments visuels que vous souhaitez que les utilisateurs voient en créant un point focal défini qui pourrait ne pas figurer dans une image plein écran.
L'absence de recadrage des images peut également créer une pile de visuels moins que dynamiques qui ont tous les mêmes formes et les mêmes rapports d'aspect. 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 aux dimensions appropriées avant de les télécharger afin que chaque image soit rendue comme vous le souhaitez.
Erreur: oublier les miniatures
Il existe plusieurs façons de gérer le dimensionnement et le redimensionnement des vignettes. (Beaucoup d'entre eux dépendent de vos capacités de base, nous ne discuterons donc pas de leurs mérites respectifs.) Mais vous devez vous rappeler de mettre à jour et de prêter attention aux plus petites images de votre site.
Trop souvent, les concepteurs oublient que les vignettes, les prévisualisations d’images et les favicons doivent être mis à jour en fonction des modifications apportées au contenu du site Web.
L'autre erreur majeure? Utiliser une image médiocre à la taille de la 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 non consultables et métadonnées
Les appareils photo numériques enregistrent de nombreuses informations dans différents champs méta qui ne sont pas traduites sur le Web. Supprimez ces informations des images et échangez-les contre des données exploitables. Les moteurs de recherche ne peuvent pas lire le contenu des images. Par conséquent, pour les rendre consultables, vous devez inclure des mots descriptifs dans le titre, les balises alt et le contenu environnant.
Exemples de noms d'image médiocres:
- photo1.jpg
- DSCN00023.jpg
- lunettes% et% watch.jpg
Un nom d'image bien meilleur comprend quelques mots descriptifs tels que lunettes-et-montre-et-plante.jpg. La référence de la balise alt pour l'image doit inclure une description similaire, telle que "des éléments sur un comptoir de lunettes, une montre et une plante". (Et assurez-vous d’épeler les mots correctement.)
Solution: Utilisez des conventions de dénomination strictes pour toutes les images de sites Web et associez des images à un contenu en rapport avec chaque visuel. Les noms d'images doivent inclure des mots descriptifs séparés par des traits d'union.
Erreur: mise à l'échelle ou étirement incorrects
Rien n’a l’air plus étrange qu’une personne au visage tendu ou à une image mise à l’échelle de manière incorrecte. 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 de fond se produit) est un non-non. Chaque image doit être mise à l'échelle avec un rapport de 1 à 1, verticalement et horizontalement. Tout le reste nuit à l'intégrité de la photo.
Solution: Observez de près toutes les proportions de redimensionnement et auditez votre site périodiquement.
Erreur: Pas de planification pour plusieurs tailles de périphérique
Les cadres de conception réactifs ont des implications pour les images. Le changement de forme ou de taille d'un périphérique à l'autre ou selon l'orientation rend important de dicter le rendu des images sur tous les périphériques.
L'une des pratiques les plus courantes consiste à utiliser des requêtes de support 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 les images à restituer un rendu optimal sans "casser". la conception.
Solution: Utilisez des requêtes multimédia pour les frameworks responsive et testez le rendu des images sur plusieurs périphériques.
Erreur: Ignorer les écrans Retina
Il n'y a pas si longtemps, une image standard de 600 pixels de large à 72 ppp suffisait pour un site Web. Mais les écrans s’améliorent à un rythme tel que ce n’est plus le cas.
En fonction de votre structure, chaque image peut en réalité inclure plusieurs images enregistrées pour différentes tailles d'écran et résolutions, y compris des écrans Retina. (La résolution des écrans Retina peut varier d’un appareil à l’autre, mais elle est nettement supérieure à celle des écrans standard.)
Solution: Inclure les requêtes de fichiers et de supports spécifiquement destinées aux écrans Retina. (CSS-Tricks peut aider.)
Erreur: Art surutilisé ou générique
La photographie de stock peut être une solution rapide mais peut entraîner des conséquences inattendues. Les photos utilisées sur un trop grand nombre de sites Web ou ayant simplement un aspect générique ne créeront pas un visuel établissant une connexion avec les utilisateurs. (Vous ne voulez pas que votre site Web ressemble à tous les autres?)
Si vous envisagez d'utiliser des photographies d'archives, considérez les 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 de sites similaires).
Solution: Envisagez de faire appel à un photographe pour créer un superbe fichier image spécifique à votre site Web. Incluez des éléments visuels liés à votre entreprise ou à votre marque et reflétant correctement votre site.
Conclusion
La sélection et la création d'images pour un projet de site Web peuvent constituer 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 bien et qu'il inclut des images qui intéresseront les utilisateurs.
Avez-vous des conseils ou des astuces pour utiliser des images dans le cadre de projets de sites Web? Nous aimerions savoir ce qu'ils sont. Partagez-les dans les commentaires.