In Processus

Vous êtes un(e) concepteur graphique et vous vous demandez comment monter vos documents pour le web? Voici quelques bonnes pratiques que nous aimons toujours observer:

Logiciel préféré: Adobe Photoshop (ou Adobe XD)

Dimension largeur: 1200px
Resolution: 72ppi
Mode de couleur: RGB

PNG vs JPG quoi utiliser quand?

Lorsque vous créez des images dans photoshop, soyez conscient de ce à quoi cette image ressemblera sur le Web. Il y a 2 types de fichiers principaux à utiliser.

1) PNG
Il est préférable de laisser l’extension .png aux images nécessitant de la transparence, telle que des logos ou des icônes. Les PNG sont plus lourds et ne devraient être utilisés qu’en cas d’absolue nécessité.

Ceci est un exemple de fichier qui devrait être un fichier .jpg et identique à celui qui aurait été exporté sous forme de fichier .png. La différence est significative au niveau de la taille du fichier alors soyez prudent. La taille d’un fichier fait en sorte que le temps de chargement d’une page web prend plus ou moins de temps à charger. À noter que la vitesse de chargement d’une page est un des critères importants que Google regarde dans son classement.

banner(png).PNG
banner(jpg).PNG

2) JPG
Les images avec l’extension .jpg sont normalement de taille plus petite et doivent être priorisé. Des éléments tels que des bannières et des images statiques sont des candidats parfaits pour un format .jpg. Si vos images comportent des calques, par exemple, une image d’en-tête avec une superposition. Aucun problème! Ajoutez simplement toutes les pièces nécessaires dans un dossier et renommez-le en conséquence: accueil_banner.jpg. Toutes les images doivent être nommées avec un nom décrivant ce qu’elles sont.

folder.PNG

N’ajoutez pas de texte ni de boutons dans ce dossier, nous ne voulons pas que le texte soit directement sur notre image.

Sensible aux majuscules et minuscules:

Veuillez ne pas utiliser de lettres majuscules lorsque vous nommez des images. Tout devrait être en minuscule et sans espace, s’il vous plaît. Cela comprend l’extension. Non accueil_banner.JPG ou accueil_banner.PNG. C’est une bonne pratique en matière de Web. Si vous souhaitez ajouter un espace, utilisez plutôt l’un des caractères suivants: _ ou –

Suivre les règles ci-dessus et donner aux images des noms pertinents aidera à garder les choses propres et organisées lors de l’intégration, créant ainsi un processus de conception plus fluide, transparent et surtout plus rapide.