IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
 [Tuto] Optimiser une image pour le web, Photoshop et autres
Fredolefou
posté Jan 19 2011, 23:36
Message #1


Mouahahaha !!!
Icône de groupe
Groupe : Modération Section Forge
Messages : 522
Lieu : quelque part entre + et - l'infini

Gamertag : Fredolefou



Avant d'aborder le sujet, que les connaisseurs passent leur chemin, je m'adresse aux novices du web ;)

Il est important de savoir que les images sont affichées sur le web avec une résolution de 72ppp (points ou pixels par pouces), et qu'il est préférable qu'elles soient en jpeg, png ou gif pour une meilleure compression et compatibilité avec les navigateurs.


Tout d'abord, qu'entend-t-on par optimiser une image pour le web ?

Le but de cette manoeuvre est d'avoir une image de qualité qui fasse le minimum de "poids", en effet il serait dommage d'avoir une image de 2mo a afficher sur un site web, celle-ci mettrais beaucoup trop de temps à s'afficher, il est donc important de réduire ce "poids" au maximum tout en gardant une qualité d'image respectable.


Les différents formats :

3 formats sont a privilégier pour cette optimisation:

-le format jpeg (.jpg), format de compression, 16 millions de couleurs, surtout adapté pour les photos et images avec beaucoup de couleurs différentes, il peut s'avérer destructeur si le taux de compression est trop fort.
-le format gif (.gif), 256 couleurs, très utilisé pour les icones, il supporte la transparence et peut être utilisé pour des images sans trop de dégradés de couleurs, son principal atout est qu'il peut être animé.
-le format png (.png), 256 couleurs également, il supporte la transparence, mais peut supporter les dégradés de transparence, souvent plus léger que le gif pour les icones, il peut être utile dans de nombreux cas, notamment en remplacement du gif mais ne peut être animé.


Comment s'y prendre ?

Nombreux outils peuvent vous permettre d'optimiser vos images :

Avec Photoshop :
-Faites Image > Taille de l'image
-Mettez la résolution à 72 pixels/pouces
-Validez
-Faites Fichier > Enregistrer pour le web et les périphériques
-Choisissez le format approprié:
-JPEG: photos
-GIF: icones ou images destinées a être animées
-PNG8: icones
-PNG24: icones ou images avec dégradés de transparence (celà peut aussi servir a dé-pixeliser les contours d'une images si elle l'est trop)
-Paramétrez pour que l'image soit la plus fidèle et la moins lourde possible (taille apparaissant en dessous de l'aperçu)
-Pour le JPEG, une compression entre 60 et 80% est généralement le mieux
-Pour le GIF et PNG8, si votre image ne possède pas de dégradé choisissez sans tramage, modifiez les paramètre jusqu'a avoir le rendu que vous voulez
-Pour le PNG24, l'entrelacement permet de faire apparaitre l'image progressivement
-Enregistrez

Avec Paint.net :
-Faites Image > Redimmensionner
-Changez la résolution en 72 pixels/pouces
-Faites Fichier > Enregistrer sous
-Choisissez quel format vous voulez
-Paramétrez
-Faites OK

Avec d'autres outils :
Changez toujours la résolution en 72ppp, cela ne sert à rien qu'elle soit plus grande et c'est déjà une grande source de "perte de poids"
Essayez ensuite de voir si il existe une fonction conçue pour l'optimisation web, sinon enregistrez au mieux votre image.


Et voilà, vos images sont optimisées et prêtes a être uploadées.



--------------------


-||-
-||-

Vyve l'aurtograffe !!!
Go to the top of the page
 
+Quote Post
Futur Life
posté Jan 20 2011, 00:01
Message #2


Juan // The Futur Life
Icône de groupe
Groupe : Équipe Rédaction
Messages : 1,487
Lieu : Paris--Bayonne




Bon tuto, mais je me permets de te corriger sur un point, le .png n'est pas limité à 256 couleurs comme le .gif, car c'est là son avantage, le "débit de donnée" est réglable, et permet de monter à plus de 200.000 couleurs.

Aussi, pour le .jpg, pensez à cocher (sous Photoshop) la case "progressif" afin que l'image se charge au fur et à mesure lorsqu'un lecteur doit l'observer sur son écran.

Mais en tout cas, très bon tuto, merci à toi de ce partage, et bienvenue. aww.gif


--------------------


Sorry I can't hear you over the sound of how Awesome I am.
Go to the top of the page
 
+Quote Post
Fredolefou
posté Jan 20 2011, 00:53
Message #3


Mouahahaha !!!
Icône de groupe
Groupe : Modération Section Forge
Messages : 522
Lieu : quelque part entre + et - l'infini

Gamertag : Fredolefou



Citation (Futur Life @ Jan 20 2011, 12:01 AM) *
Bon tuto, mais je me permets de te corriger sur un point, le .png n'est pas limité à 256 couleurs comme le .gif, car c'est là son avantage, le "débit de donnée" est réglable, et permet de monter à plus de 200.000 couleurs.

En fait oui je me suis mal exprimé vu que je n'ai pas plus précisé que "256 couleurs" (qui est en fait le png8) mais le format png peut en effet aller jusqu'a plus de 200 000 Milliards de couleurs (48bits)

Maintenant les 3 (sous-)formats les plus courants utilisés sont le png8 (256 couleurs), le png24 (16 millions de couleurs ou 65 000 plus 256 niveau de transparence) et png32 (beaucoup beaucoup)

Et Grace au formats MNG et APNG, l'animation des images png est possible, mais à l'heure actuelle très peu supportée par les différents navigateurs.


--------------------


-||-
-||-

Vyve l'aurtograffe !!!
Go to the top of the page
 
+Quote Post
OtaK_
posté Jan 23 2011, 16:47
Message #4


Mec de l'ombre qui code les trucs compliqués
Icône de groupe
Groupe : VIP
Messages : 736
Lieu : Paris, France

Gamertag : OtaK27 Fr



Citation (Futur Life @ Jan 20 2011, 12:01 AM) *
Bon tuto, mais je me permets de te corriger sur un point, le .png n'est pas limité à 256 couleurs comme le .gif, car c'est là son avantage, le "débit de donnée" est réglable, et permet de monter à plus de 200.000 couleurs.

Aussi, pour le .jpg, pensez à cocher (sous Photoshop) la case "progressif" afin que l'image se charge au fur et à mesure lorsqu'un lecteur doit l'observer sur son écran.

Mais en tout cas, très bon tuto, merci à toi de ce partage, et bienvenue. aww.gif


En effet l'avantage principal du png sur le gif c'est que même si les deux partageant un canal alpha sur 8bits, le png a des canaux RVB de 8 bits chacun contrairement au gif qui lui totalise 8 bits sur le RVB. (tout ceci en prenant la base du png24, le seul vraiment intéressant à mon sens, en termes d'avantages par rapport au poids)

Et pour finir, la seule utilisation concrète du png32 est dans l'imprimerie à mon sens, vu qu'il y a 4 canaux (CMJN) contre 3 en web (RVB). :)

Et je plussoie Juan, très bon tuto, ça fait plaisir de voir des gens qui savent de quoi ils parlent ici :)


--------------------




Go to the top of the page
 
+Quote Post
Fredolefou
posté Jan 23 2011, 20:35
Message #5


Mouahahaha !!!
Icône de groupe
Groupe : Modération Section Forge
Messages : 522
Lieu : quelque part entre + et - l'infini

Gamertag : Fredolefou



Tout d'abord : merci pour ces compliments =D.gif

Je voudrais juste dire que le png8 peut être très utile en remplacement du gif (non-animé) car plus léger pour la même qualité, le png24 étant un poil plus lourd quand même.

...et on est d'accord sur le png32, il n'est d'ailleurs pas utilisé sur le web a ce que je sache (il y serait inutile de toutes façon)


--------------------


-||-
-||-

Vyve l'aurtograffe !!!
Go to the top of the page
 
+Quote Post
CourageC775
posté Jan 24 2011, 12:11
Message #6


The Spartan Inquisition
Icône de groupe
Groupe : Membre
Messages : 567
Lieu : Bourges

Gamertag : CourageC775



reçu, merci pour le tuto, je suis ignorant dans ces domaines là.


--------------------
"Personne n'est parfait mais je ne suis personne..."




Go to the top of the page
 
+Quote Post
OtaK_
posté Feb 9 2011, 23:12
Message #7


Mec de l'ombre qui code les trucs compliqués
Icône de groupe
Groupe : VIP
Messages : 736
Lieu : Paris, France

Gamertag : OtaK27 Fr



Citation (Fredolefou @ Jan 23 2011, 08:35 PM) *
Tout d'abord : merci pour ces compliments =D.gif

Je voudrais juste dire que le png8 peut être très utile en remplacement du gif (non-animé) car plus léger pour la même qualité, le png24 étant un poil plus lourd quand même.

...et on est d'accord sur le png32, il n'est d'ailleurs pas utilisé sur le web a ce que je sache (il y serait inutile de toutes façon)


Bon après on est plus à ça près au niveau du poids, 90% des foyers sont en ADSL, donc bon, reste les téléphones en EDGE pour lesquels c'est un peu chiant, mais y'a les technos (Opera Mini) ou les sites optimisés mobiles pour ça :)


--------------------




Go to the top of the page
 
+Quote Post
LuciferX
posté Dec 28 2012, 23:57
Message #8


Sergent Grade 2
Icône de groupe
Groupe : Membre
Messages : 119
Lieu : Liège - Belgique




Pour complèter cet article, on peut aussi encore grapiller un peu de poid en utilisant des programmes en ligne comme par exemple http://www.jpegmini.com et http://tinypng.org ou en local comme ImageOptim (MAC) et RIOT (PC).

Sinon, dans le cas de la réalisation d'un site par exemple j'aurais tendance à utiliser le png/gif (sans compression) pour le design de l'interface et le jpg (avec compression) pour les photos.


--------------------

 
 
 
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



- Version bas débit Nous sommes le : 30th August 2014 - 15:11