Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Optimiser une image pour le web avec Photoshop

Optimiser une image pour le web avec Photoshop

J'aimerais bien vous apprendre comment optimiser une image pour le Web avec Photoshop. Je vais me mettre dans la peau d'un professeur Optimiser (on dit aussi optimaliser) veut dire "tirer le meilleur parti de quelque chose". C'est-à-dire ajuster les caractéristiques de l'image pour une meilleur restitution et insertion tout en assurant un bon compromis taille/qualité.

Juste à titre de rappel :

Optimiser une image JPEG pour le Web sous Photoshop

Pour optimiser un format d'images pour le web, vous devez tout d'abord choisir l'option "enregistrer pour le web" qui se trouve dans le menu "Fichier" ou bien utilisez le raccourci "ALT + MAJ (Shift) + CTRL + S". Une fenêtre va s'ouvrir qui comporte entre autre la rubrique suivante : optimiser un JPEG sous Photoshop pour le web

Choisissez ensuite de préférence le mode de vue "2 vignettes" : optimsation d'images pour le web avec Photoshop Ceci va vous permettre d'afficher en même temps l'image originale à gauche créée dans l'atelier Photoshop ainsi que l'image optimisée à droite, ce mode de vue va vous permettre de faire une comparaison en temps réel entre les deux images en terme de consommation d'espace disque, dégradation de la qualité etc.

Optimiser une image PNG-8 ou GIF pour le web sous Photoshop

PNG-8

optimisation d'une image PNG-8 avec Photoshop pour le Web

GIF

optimisation d'une image GIF sous Photoshop pour le Web

Le menu N°1 permet de comprimer l'image (compresser) en procédant à une suppression de détails plus ou moins sensible en fonction du pourcentage choisi. Pour ne pas dégrader tangiblement l'image appliquez un taux de 5 à 10%.

Pour que le menu "Perte" soit accessible vous devez éviter de cocher la case "entrelacé" ainsi que de choisir les deux options bruit et motif dans le menu "algorithme de tramage". Dans notre exemple le menu "perte" est désactivé car la case "entrelacé" est cochée.

Optimiser une image PNG-24 pour le web sous Photoshop

optimiser PNG-24 sous Photoshop pour le web

Contrairement à tous les autres formats d'images supportés par le Web, le PNG-24 se distingue largement par son support d'une transparence graduelle (transparence graduelle à 256 niveaux du PNG-24). En fait le canal alpha peut recevoir des valeurs qui varient dans la fourchette de 0 à 255 selon la valeur de l'opacité spécifiée dans Photoshop.

Comme vous pouvez le constater le PNG-24 supporte aussi l'entrelacement.
Si vous n'avez pas coché la case "Transparence" vous pouvez spécifier la couleur avec laquelle vous pouvez mélanger les pixels transparents.

Le chapitre que vous attendez tous impatiemment : la syntaxe XHTML des images.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau