Photoshop est un outil incroyablement puissant, capable de créer des designs à couper le souffle, mais son rôle s'arrête là. Quand votre oeuvre est terminée, c'est souvent au tour du compagnon de Photoshop, Image Ready, de transformer votre création en une interface Web fonctionnelle et vivante. L'objectif de cet article est de vous fournir un aperçu de l'utilisation d'Image Ready, afin de produire des interfaces flexibles qui pénalisent le moins possible la bande passante de vos visiteurs. Le principe général peut également s'appliquer aux skins et aux interfaces générées par les CSS (feuille de style en cascade), mais par soucis de simplicité, nous expliquerons uniquement notre technique pour découper les interfaces sous forme de tableau. Toujours intéressés ? Lisez donc...
POURQUOI UTILISER IMAGE READY ?
Puisque Photoshop est si puissant, pourquoi utiliser Image Ready ? Et bien, contrairement à un travail de création graphique habituel (fonds d'écrans, skins, etc.), les interfaces Web sont très sensibles au poids. Si vous n'optimisez pas vos images correctement, vous allez vous retrouver avec un site qui met des heures à se charger. L'effet immédiat de ceci est que vous allez faire fuir la plupart de vos visiteurs, avec éventuellement à la clé une facture hallucinante de votre hébergeur pour la bande passante utilisée par le peu qui restent sur votre site... Alors que presque tous les formats de compression d'images imposent des pertes de qualité, la différence entre une image bien compressée et un original est souvent imperceptible et jamais remarquée. Avec Image Ready, le calvaire de l'optimisation devient un jeu d'enfant, permettant une totale flexibilité sans pour autant dégrader la qualité de votre .PSD original au passage.
En plus de l'optimisation de poids basique, Image Ready vous permet de découper l'interface en plusieurs morceaux. Ainsi, plutôt que de se charger en un seul bloc, votre interface se chargera de façon plus régulière et permettra à vos visiteurs de savoir s'ils vont arriver quelque part... De plus, vous pouvez isoler les parties répétitives ou d'une seule couleur, des parties plus complexes de votre interface. L'importance de tout ceci sera exposée au cours de cet article.
Enfin, Image Ready facilite la création d'animations et de rollovers pour vos designs. Il transforme même cette tâche ingrate en véritable balade, puisqu'il génère même automatiquement le code HTML ! Néanmoins, ce dossier pratique n'explorera pas cette possibilité, puisque tous les détails que vous souhaiteriez connaître sur le sujet se trouvent dans l'aide intégrée au logiciel (et nous ne voyons pas de raisons de réinventer la roue).
DÉCOUPEZ VOS IMAGES
Il est temps de se plonger dans le vif du sujet de ce dossier pratique. Chargez votre interface dans Image Ready et, en utilisant les outils "carte-image rectangulaire" et "sélection de carte-image", découpez votre design selon les parties qui le composent. Par exemple, voici une des interfaces préférées de biorust (NDT : forcément c'est celle du site d'où provient cette traduction ;) ), découpée de la sorte :
Croyez-le ou non, c'est en fait une interface plutôt facile à découper. Ne perdez pas courage cependant, car CE N'EST PAS SI COMPLIQUÉ - nous avons ici un grand nombre de découpes pour un besoin d'optimisation (vous allez bientôt comprendre...). Il y a un certain nombre de principes auxquels nous vous conseillons d'adhérer pendant vos découpages, les voici :
- Découpez l'interface en zones de contenu similaire. Par exemple, si vous avez une zone avec un dégradé assez large, découpez-le en une seule fois (zones 19 et 22 sur l'image). Ceci s'applique tout particulièrement aux zones uniformes (zone 51 ;) ). Ca rendra l'optimisation de vos images plus facile par la suite.
- Si vous avez des rollovers sur votre interface, soyez sûr qu'ils sont découpés aussi soigneusement que possible. Comme vous pouvez le deviner, chaque zone de rollover comprend une image différente pour les états "dessus" et "extérieur", et si vous incluez trop de pixels qui ne changent pas dans chacun de ces états, vous gaspillerez beaucoup de place.
- Essayez de découper l'arrière plan de votre interface à part. Vous devriez même essayer de programmer vos arrière-plans en HTML plutôt que de les inclure "directement" dans l'interface. L'explication derrière tout ceci sera exposée plus loin.
- Souvenez-vous que plusieurs petites images se chargent beaucoup plus vite (et occupent moins de bande passante) qu'une seule grosse image. N'ayez pas peur de découper des zones complexes en de nombreux petits morceaux, si cela vous permet d'isoler plus facilement de larges zones de couleur uniforme ou de dégradés.
Une fois que votre interface est correctement découpée, poursuivez…
OPTIMISATION DU DÉCOUPAGE
L'un des outils les plus importants dans Image Ready est, sans conteste, la fenêtre d'optimisation du découpage. Á l'aide du "carte-image rectangulaire", sélectionnez une découpe de votre choix et étudiez la fenêtre de dialogue de plus près. Vous disposez d'un grand nombre d'options, aussi n'ayez pas peur d'expérimenter. Voici mes suggestions pour chaque format de fichier :
- GIF - Bien qu'il ne soit pas le format le plus léger du monde, le GIF est relativement efficace et peut être finement paramétré. Ce format se charge également dans tous les navigateurs et possède un paramètre de transparence (même s'il s'agit ici d'un paramètre du type "tout ou rien" - seul le PNG peut gérer différents niveaux de transparence). Pendant l'optimisation, commencez avec une palette de 256 couleurs et réduisez le nombre jusqu'à ce que vous remarquiez un changement visible.
- JPG - Un format extrêmement compact, le JPG offre un bon rapport entre qualité et poids de fichier. Contrairement au GIF, qui impose une perte de couleurs pour l'optimisation, le JPG rend les images plus "troubles", ce qui peut s'avérer parfois gênant. Ce format ne gère pas la transparence. Les meilleures interfaces utilisent un mélange de JPG et de GIF. Lorsque vous utilisez du JPG, utilisez préférablement une qualité entre 60-80% pour de meilleurs résultats.
- WBMP - Format archaïque, le BMP n'utilise aucune compression. Attention au poids, donc. A éviter !
- PNG - L'utilisation du PNG est assez controversée. Créé à partir d'un nouveau standard, le PNG n'est pas supporté par tous les navigateurs, et a tendance à générer des poids de fichiers assez conséquents. C'est, malgré tout, un format très évolué qui gère plusieurs niveaux de transparence, ainsi que d'autres innovations bienvenues. Si vous voulez créer un "skin" pour Winamp 3, vous finirez probablement par utiliser ce format. Son utilisation pour des interfaces Web est moins clairement établie, et doit plutôt être considérée au cas par cas.
Au-dessus de votre interface, vous devriez voir les onglets montrés ci-dessus. Quand vous explorez les possibilités de l'optimisation de fichiers, vérifiez bien que vous le faites dans la partie "Optimisée", qui montre, comme vous le devinez, les effets de vos modifications pendant que vous les appliquez. Les onglets "2 vignettes" et "4 vignettes" sont utiles également et permettent de comparer simultanément plusieurs niveaux d'optimisation.
É videmment, vous devriez garder en tête l'objectif principal, qui est d'obtenir un poids de fichier minimal, sans trop sacrifier la qualité. L'outil de "Zoom" peut vous aider à repérer les changements à l'intérieur de petites zones, mais ne soyez pas trop exigeant sur la qualité lorsque vous zoomez beaucoup, car les différences de qualité sont souvent imperceptibles à la taille originale. N'hésitez pas à passer du temps dans cette partie du processus de design - la réduction des poids de fichiers peut être assez étonnante si vous prenez votre temps.
SAUVEGARDEZ VOTRE INTERFACE
Maintenant que vous avez fini le gros boulot, vous pouvez faire une petite sieste et laisser un peu Image Ready travailler pour vous. Vous n'avez qu'à sélectionner "Fichiers> Enregistrer une copie optimisée sous..." à partir du menu, choisissez un répertoire vide et regardez votre création prendre vie... Évidemment, votre travail n'est pas terminé - les fichiers d'interface qu'Image Ready génère sont statiques, non extensibles et peuvent encore être optimisés. Pour savoir comment, poursuivez…
OPTIMISER, OPTIMISER, TOUJOURS OPTIMISER...
Nous sommes dans la dernière ligne droite de notre création-marathon de site. Comme dans une vraie course, c'est le moment où le plus important se joue, en bien comme en mal. Maintenant que notre mise en page est contrôlée par code HTML, on peut encore tirer d'Image Ready, mais aussi de votre éditeur HTML, tout leur potentiel...
- Zones de couleur uniforme - Avez-vous des zones de couleur uniforme dans votre design ? Si c'est le cas, lancez votre éditeur HTML, supprimez les images à l'intérieur des cellules en question et définissez, pour chacune des cellules vides, un arrière plan de la couleur souhaitée. Le résultat final sera identique, mais peut alléger votre interface de quelques Kilo-octets.
- Zones de dégradés continus - Quand une image est définie en tant qu'arrière plan de cellule en HTML, elle se répète à l'infini dans toutes les directions (sauf si on en décide autrement en utilisant du code CSS). On peut utiliser ceci à notre avantage. Observez l'exemple ci-dessous - la première cellule utilise une image, le poids final étant d'environ 0.61 Ko. Un petit redécoupage dans Image Ready génère une image bien plus légère (0.35 Ko), qui peut être définie en tant qu'arrière plan de cellule. La troisième cellule place cette image dans un arrière plan de cellule, qui se répète indéfiniment. Cela nous donne un résultat identique visuellement, pour un coût de bande passante bien moindre. Et, bien entendu, on peut modifier la hauteur de la troisième cellule à volonté, sans modifier l'utilisation de la bande passante. Nul besoin de préciser que vous devriez vous assurer que vos images se répètent sans accrocs avant ce genre de manip, sinon vous obtiendriez un résultat pas très flatteur !
 |
 |
|
- Découpage d'arrière-plan - Il reste quelques zones d'arrière plan découpées dans votre interface ? Supprimez-les de votre code HTML, et remplacez-les par des cellules avec l'arrière plan approprié.
- Recyclez les images - N'hésitez pas à réutiliser des images dans différentes parties identiques ou très ressemblantes de votre interface. Il y a de fortes chances que vos visiteurs ne remarquent aucune différence de toute manière !
Avec un peu de soin et d'attention aux petits détails, il est souvent étonnant de voir à quel point on peut réduire dramatiquement le poids d'une interface. L'interface Biorust v2, par exemple, est un monstre de 286 Ko en tant qu'image toute bête. Une fois complètement optimisée, elle ne pèse plus que 80 Ko - un gain plutôt représentatif, vous en conviendrez !
EXTENSIONS DE DESIGN..
Á présent, pour la touche finale, essayez d'ajouter plein de "faux" contenu dans votre design, pour voir comment il se comporte. Si tout se passe bien, vous ne DEVRIEZ pas avoir de problèmes, ou plutôt il vous restera juste à remplacer quelques zones par des cellules avec arrière plan, pour les faire se répéter. Une chose est certaine malgré tout - maîtrisez Image Ready et vous aurez bientôt le monde du WebDesign à vos pieds. Bonne chance !
