Images Desktop
- Bien nommer ses fichiers, c-à-d de manière consistante et logique, en utilisant le nom du projet, puis un numéro. ATTENTION AUX CARACTÈRES SPÉCIAUX (pas de caractères spéciaux, caractères spéciaux, dont espaces, interdits).
- Trier ses images dans deux dossiers : portrait et paysage. En se basant sur les ratios les plus courants, une image est considérée comme portrait si sa hauteur multipliée par 16 est supérieure à sa largeur multipliée par 9 (ratio 16 / 9).
- Créer deux scripts (dits "actions") dans photoshop. Window > Actions.
- Un pour les images portrait : le script pour les images verticales doit contraindre la hauteur de l'image, et pas sa largeur. Pour une image pleine écran desktop qui soit rendue sans être pixellisée sur de très grands formats, on peut choisir une hauteur de 1440px.
- Un pour les images paysage : le script pour les images horizontales doit contraindre la largeur de l'image et pas sa hauteur. Pour une image pleine écran desktop qui soit rendue sans être pixellisée sur de très grands formats, on peut choisir une largeur de 2560px.
Ces valeurs sont basées sur la taille d'une image pleine écran vue dans navigateur depuis un écran 5K, avec une résolution effective de 2560 par 1440px. Elles garantissent que l'image ne sera pas pixellisée sur la plupart des appareils.
L'arbitrage entre la taille et le poids des images dépend des contextes (taille à laquelle est vue l'image), et des nécessités. Si la rapidité de chargement prime sur la précision, on peut envisager de générer des images de tailles inférieures, et laisser le navigateur les étirer un peu (si c'est léger, ce sera quasi invisible).
4. Dans le script, exporter ces images dans les deux formats majoritairement utilisés sur le web, le jpg et le webp. Pour les images necessitant de la tarnsperence, on utilisera le png au cas par cas. Attention ! Le dossier indiqué comme destination dans le script reste le même (alors que le dossier source peut varier).
- Lancer les scripts > File / Automate / Batch.
Images tablette + mobiles
Lorsque l'on travail sur un site statique, il est important de générer également une série d'image destinées à être rendues sur les appareils mobiles, plus petites et donc plus légères (car les appareils mobiles ne sont pas tout le temps connectés en wifi à un rooter fixe). Idéalement, on créera également deux scripts Photoshop supplémentaires, destinés à générer les images mobiles.
- Images portrait : hauteure maximale de 950px (tablette standard / grand mobile)
- Images paysage : largeur maximale de 810px (tablette standard)
C'est également l'occasion de potentiellement resizer ses images paysages afin que le rendu mobile soit meilleur. Le deisgn d'un site statique permet de gérer chaque image au cas par cas. Autant en profiter !
Note sur les formats d'images web
Les formats webs universellement supportés et majoritairement utilisés de nos jours sont le jpg (images sans transparence) et le png (image avec transparence). Un nouveau format d'image web, basé sur un nouvel algorithme de compression, le webp, est arrivé en 2010. Celui-ci est beaucoup plus léger que les précédents, mais peut ne pas être supportés sur de vieux appareils. Afin de gagner en performance, il est possible d'utiliser le webp avec la balise picture, qui permet d'adjoindre un fichier dit de "fallabck", au cas où le navigateur récepteur ne pourrait le lire. Le webp est néanmoins supporté à 96.59%, donc potentiellement, vous pouvez prendre le risque de ne pas adjoindre de fichiers fallabcks ! (Si vous êtes d'aventureuses personnes).