[Intermédiaire] Découper une maquette et optimiser ses images pour le web

Bonjour à tous !

Ce tuto s'inscrit dans la série de création de site web, je vais donc utiliser en exemple le site créé lors du tutoriel Créer sa maquette pour le web  .
C'est pour cela que le contexte est la création de site et l'optimisation des images.

MAIS il a également un intérêt en lui-même hors du contexte de la création de site. Vous pourrez directement passer à la partie 3 si vous souhaitez optimiser une image entière.
Toute personne qui utilise ses images sur internet y trouvera un intérêt que ce soit pour son site ou pour les images que vous postez sur ce forum.

L'optimisation d'image pour le web va permettre d'alléger le poids de ces images.
Pour vous donner un exemple concret : une photo d'un poids de 14Mo une fois enregistré pour le web pèsera 2Mo et cela sans que l'on ait altéré sa qualité.

L'intérêt est donc que votre page web pèse moins lourd et se charge donc beaucoup plus rapidement.
et dans le cadre particulier du web, cela signifie que votre site est également mieux référencé. Google prend en effet en compte le temps de téléchargement des sites pour les noter.

Je vous rappelle que les raccourcis vous sont indiquez en vert.

1. Au début, la maquette :

Voici la maquette en question :


A - Analyser la maquette :

Ce qui nous intéresse ici c'est de repérer les images dont nous avons besoin pour notre site. Ces images ce sont les éléments qui vont constituer le contenu mais également qui vont habiller le site.

Nous avons donc ici plusieurs types d'images :
- images de contenu : éléments qui seront dans le slider
- images d'illustration : qui habillent le texte
- logo : image qui sera dans l'en tête
- texte : le web ne supporte que peu de police. Toute autre police utilisée devra être une image. Idem si c'est du texte orienté.
- fond : une image qui va habiller l'arrière plan ou qui sera répétez sur l'axe des x et des y
- effet : image qui permettra de simuler une ombre par exemple

J'ai entouré en vert sur la maquette toutes les images que nous allons devoir récupérer et optimiser


Comme vous pouvez le voir il y a un paquet d'image à récupérer.

B - CSS2 & CSS3 :

Ceux qui sont intéressé par les possibilité du web, ont eu vent des possibilités offerte par le CSS3 qui permet de créer des ombres, dégradés ou texte orienté sans que l'on passe par des images.
Cependant la réalisation d'un ite doit être faite pour tous, ce qui freine l'utilisation des nouveaux moyens. En effet le CSS3 n'est pas supporté par tous les navigateurs. Si l'on rajoute à cela les multiples versions de chaque navigateurs et leurs spécificités d'interprétation du code... En gros c'est le boxon.
Donc dans le cadre de ce tuto on est dans la perspective du pour tous donc du CSS2 que l'on couple à des images.

C - Choix de découpe en vue de l'intégration:

Comme vous pouvez le constater j'ai décidé de distinguer l'image du bambin et l'image qui correspond au nom de la boutique.
Cela va me permettre une plus grande souplesse dans mon intégration. Le bambin sera une image d'arrière plan (dans la feuille css) et l'on aura au niveau du code l'image du nom de la boutique ainsi que du texte correspondant à l'accroche.

C'est ce type de choses auquel il faut penser avant de commencer à découper sa maquette.
On pourrait prendre d'un bloc le logo et le nom de la boutique et tout mettre en arrière plan.
On n'aurait alors que l'approche dans l'en tête.
Là encore la question du référencement influe mon choix. les images qui sont mises dans le css ne sont pas lu par les robots, donc elles ne sont pas référencées. Quand on met une image dans le code, on va lui donner un titre et un nom par défaut (en cas de soucis d'affichage). Ces deux éléments sont eux lu par les robots.
Pour compenser le fait que le titre de ma boutique est une image, j'ai intérêt à la mettre dans le code pour écrire en tant qu'élément le nom de ma boutique et être référencé sur ce point.

2. L'outil tranche :

C'est la première étape lorsque l'on a différents éléments que l'on souhaite récupérer sur une même image ou en l'occurrence sur une maquette.
Le raccourci pour cet outil est C.
Elle se trouve dans le même sous-menu que recadrage. Si c'est l'outil que vous avez par défaut restez appuyé sur l'icône afin qu'apparaisse le menu contextuel

On a deux outils pour Tranche.
Le premier va permettre de trancher votre support et faire apparaitre différentes parties de votre découpe. Quand vous effectuez une tranche vous pouvez modifier sa taille en jouant sur les balises.
Le second outil a son utilité lorsque l'on a plusieurs tranches. il permet de sélectionner la tranche qui nous intéresse et de modifier ses dimensions en jouant avec les balises.

Ici j'ai effectué une tranche qui correspond au titre de ma boutique. Je fais bien attention a ne faire une tranche qui ne contient QUE cet élément. Ma tranche a en haut à gauche un cadre bleu qui comprend son numéro.
L'ordinateur va créer des tranches de lui-même celles ci ont un cadre gris.
Pour ma tranche je vais effectuer un cadre au plus prêt de l'élément qui m'intéresse.

Comme me disait ma camarade de formation: "Zoom c'est pas plus cher !"
C'est ce que nous allons faire car le but du jeu est d'avoir l'image la moins lourde possible. Et chaque pixel même vide, ce sont des octets donc du poids.
Je vais donc utiliser les balises pour coller à mon élément. En faisant attention aux pixels semi transparent bien sûr.

On va effectuer ce travail sur chaque image. Donc au départ faites une tranche au plus prêt puis vous zommez à fond (PC : CTRL + Molette de la souris / Mac : Cmd + Molette de la souris )

Bien j'ai effectué toutes mes tranches.
Comme vous pouvez le constater Photoshop crée des tranches pour que l'ensemble corresponde à la totalité de l'image. on voit aussi des traits qui sont comme des repères.
Ceux ci peuvent être utiles lors de votre découpe. Notamment lorsque vous souhaitez avoir une taille standard d'image. Cela vous permettra d'avoir une hauteur ou largeur identique en vous servant des traits.


Je ne sais pas si vous l'avez remarqué mais dans mes tranches, il n'y en a aucune qui concerne l'arrière plan.
La raison est que je souhaite avoir mes images optimisées sans arrière plan. j'aurai plus de liberté pour les positionner mais à long terme je pourrai changer l'arrière plan si ça me chante sans avoir à tout recommencer.
Donc au niveau de mes claques je vais masquer (en cliquant sur l'icône de l'oeil) tout ce que je ne compte pas récupérer, ce qui donne ceci


Dans un second temps, nous nous occuperons donc de la tranche pour l'arrière plan.

Au préalable j'ai effacé les tranches antérieures : Affichage > Effacer les tranches


Le système est le même. on va zoomer de manière à ne récupérer qu'un seul pixel. On n'en a pas besoin de plus quand on a un fond en dégradé comme ici.

3. Optimisation des images :

On passe au vif du sujet.
Donc au niveau des menus Fichier > Enregistrer pour le web et les périphériques...
(Raccourci Mac : Maj + Alt + Cmd +S, raccourci PC : Maj + Alt + CTRL +S)



Pour que cela soit plus visible sur le forum, je vais vous présenter dans un premier temps l'aperçu global, puis les éléments qui la constituent afin que l'aperçu soit efficace.

A - La fenêtre de commande :

Le cadre rouge correspond au menu, il va vous permettre d'agir sur l'aperçu.
Le cadre vert correspond à l'aperçu? je vous conseille d'opter pour 2 vignettes. cela vous permet de voir le rendu de l'original et le rendu de ce que cela donnera en fonction des options choisies.
Le cadre bleu correspond aux options ou plutôt configuration que vous allez appliquer pour votre image optimisée.


B - Menu et visualisation :

Cadre rouge : ce sont les 3 icônes qui vont nous être utiles.
-> Outil main (H) : permet de faire bouger l'aperçu et donc de vous déplacer dans la fenêtre
-> Outil sélection de tranche (C) : va permettre de sélectionner la tranche qui nous intéresse pour agir dessus. En effet on va devoir configurer chaque tranche une par une. cela permet ainsi dans une image mixte de décider quel sera le format de chaque éléments.
-> Outil zoom (Z) : permet de zoomer et de dé-zoomer. C'est un outil important pour vérifier la qualité du rendu de l'image ou de la photo afin de configurer correctement l'optimisation.
Par défaut on va zoomer pour dé-zoomer, maintenez la touche Alt enfoncée.


Selon la taille de votre écran les fenêtres seront l'une en dessous de l'autre ou l'une à coté de l'autre. La fenêtre présentant l'image originale est donc au dessus ou à gauche.
La selection de l'image à configurer se fait dans la fenêtre de visualisation du rendu donc en dessous ou à droite.

Cadre Vert qui se situe au niveau de la fenêtre de visualisation de l'original vous indique le poids de l'image.

Cadre Bleu qui se situe au niveau de la fenêtre de visualisation du rendu, vous indique :
-> le type de format choisi (gif, png-8, png-24, jpeg)
-> le poids de l'image une fois optimisée
-> le temps de téléchargement de celle-ci. En cliquant sur l'icône vous pouvez choisir la vitesse de téléchargement.

B - Configurer l'optimisation :

Avant de commencer la présentation, je dois vous parler des différents formats d'image. car vous allez devoir faire un choix.
Pour les photos, la question ne se pose pas on opte pour le format jpeg ! Tout simplement parce que les formats gif et png sont limités à 256 couleurs. Pour modifier le poids de la photo, vous devrez jouer sur la qualité

Pour les images, on va se tourner vers les autres formats : gif, png-8 et png-24.
Votre choix sera fonction de la qualité du rendu et du poids.
Sachez également que ce seul ces 3 formats permettent d'avoir un arrière plan transparent.


1 : Choix du format de l'image
2 : Choix des couleurs ou de la qualité. C'est en agisant sur le nombre de couleur ou sur la qualité que vous allez alléger l'image. A vous de trouver le bon compromis !
3 : Vérifier que cela est coché si vous voulez de la transparence pour l'arrière plan
4 : A cette étape, vous pouvez choisir de redimensionner votre image.

Attention cela s'appliquera à l'ensemble de votre document, on ne peut agir apparemment sur la taille des images. Cela vaut donc le coup si vous avez seulement une seule tranche (votre image entière est la tranche)

C - Un aperçu pour mieux se rendre compte :

J'ai sélectionné l'image de mon logo et j'ai zoomé à fond dessus.
Voici un aperçu du rendu et du poids de chaque image selon le format choisi.


D - Poids total :

En sélectionnant toutes les images, vous aurez un aperçu de poids total que cela représente.
pour se faire utiliser l'outil sélection de tranche et maintenez la touche Majuscule enfoncée.

Les tranches sélectionnées ont alors leur contour qui devient orange

4. Enregistrement :

Maintenant que vous avez bossé sur chacune de vos images, nous allons passer à leur enregistrement.
Pensez donc à cliquer sur le bouton Enregistrer

Vous allez choisir dans quel répertoire s'effectue l'enregistrement. Par défaut, le logiciel va mettre toutes vos images dans un répertoire appelé images, qu'il créera à l'emplacement choisi par vos soins.

Afin d'éviter de se retrouver avec les images des tranches crées automatiquement par l'ordinateur, nos allons spécifier au niveau du menu déroulant Tranche ce qui nous intéresse.
-> Toutes les tranches
-> Tranches utilisateurs : toutes les tranches que vous avez créé (icône de la tranche bleu)
-> Tranche sélectionnées : uniquement les tranches sélectionnées dans l'aperçu du rendu de l'optimisation

Et voilà, j'ai mes images dans mon dossier, il ne me restera plus qu'à les renommer comme je le souhaite.


Si vous avez des questions, ou autre n'hésitez pas.
J'espère que le tuto vous servira.