Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Optimiser les images pour le web

 

Dreamweaver comprend 6 options pour éditer vos images à l'intérieur même de Dreamweaver ou la connexion à un éditeur externe pour les modifier. Cela le rend beaucoup plus facile de travailler avec vos images. Vous pouvez importer une image directement à partir d'un appareil photo numérique dans votre page Web, puis redimensionner, recadrer, et ajuster le contraste, la luminosité et la netteté tout sans quitter votre outil favori. De plus, si vous avez besoin de faire plus, comme l'optimisation de votre image ou apporter des modifications supplémentaires, Dreamweaver se relie à votre programme de retouche d'image préféré: Photoshop (Dreamweaver CS3) ou Fireworks (Dreamweaver 8 et Dreamweaver MX 2004).

Moins de poids plus de rapidité d'affichage

L'une des contraintes les plus courantes est le poids des images qu'on veut mettre dans un site et qui font en sorte que le chargement d'une page soit plus lent. Cette lenteur due au nombre excessif des images et graphiques et à leurs poids peut rendre la navigation gênante surtout avec des connexions lentes d'origine. En plus, les moteurs de recherche jugent de la qualité d'un site, parmi d'autres critères, du temps nécessaire à l'affichage complet de la page.

Il est donc indéniable que le poids excessif d'une image constitue une entrave à la bonne expérience d'utilisation d'un site.

En paradoxe, des images de bonnes qualités pour illustrer uen page de site sont souvent de grand poids.

Que faire alors pour mettre en ligne des images de bonnes qualités sans nuire à la vitesse de chargement de la page?

Voici, dans ce tutoriel, le comment et les outils nécessaires pour optimiser les images pour le web.

Optimiser les images avec Dreamweaver

Lors de l'insertion d'une image dans une page avec Dreamweaver, le panneau d'inspecteur des images apparaît en bas. Comme ceci:

Modifier les paramètres de l'image

 

- Vous avez en haut dans "Modifier", deux options pour modifier l'image:

1- Modifier l'image dans Firewoks si vous l'avez installé (l'icône Fw). L'image va s'ouvrir dans Firewoks pour ajuster les couleurs, la luminosité, la taille etc mais ce n'est pas ce qui nous intéresse maintenant.

2- Modifier l'image directement dans Dreamweaver (l'icône des roues dentées).

En choisissant modifier l'image dans Dreamweaver (l'icône des roues dentées), après avoir cliqué bien sûr sur l'image à modifier et se rendre au panneau de Propriétés de l'image, une nouvelle fenêtre s'ouvre:

Fenêtre propriétés image

Dans cette fenêtre, les modifications à effectuer sont:

1- Compresser l'image pour réduire son poids en cliquant sur l'icône "Compresser" Icône compresser image.

Vous aurez une petite fenêtre pour régler manuellement le poids de l'image. Ne pas trop réduire le poids pour ne pas affecter la qualité.

Optimiser la taille de l'image avec Dreamweaver

Vou spouvez observer le résultat avant de le valider.

2- Réduire la qualité de l'image selon un pourcentage en agissant sur un curseur montant/descendant:

Réduire qualité de l'image

3- Changer l'extension de l'image. Par exemple, les images .png sont connues pour leur qualité supérieure mais sont lourdes. Le mieux optimisé pour le web sont les images: .JPG et .GIF.

Changer extension d'image avec Dreamweaver

4- Changer les paramètres enregistrés. Là, vous pouvez mettre en JPG réduit mais comparez la qualité.

Fichier réduit avec Dreamweaver

Voilà, vous pouvez toujours comparer les deux images; celle d'origine et celle optimisé au niveau de la qualité et du poids et faites un compromis entre les deux. Donc, une image pas trop lourde mais sans perte de qualité.

Des modifications peuvent être aussi effectuées sur la taille et les couleurs. Pour changer les dimensions hauteur/largeur, cliquez dans la même fenêtre d'optimisation des images sur l'onglet: Fichier et vous y serez.

Notez bien qu'une fois la qualité d'une est optimisé et qu'elle ait été modifiée, les modifications seront enregistrées sur l'image originale et vous ne pourrez pas restituer celle-ci. Il faut garder une copie de l'image originale.

Un exemple:

Image exempleUne image qui pèse 14 Ko

sans optimisation

 

 

 

 

 

Image exemple optimiséeLa même image après optimisation et qui pèse maintenant moins de

7 Ko. Le poids a été réduit de la moitié!

 

 

 

 

 

 

La qualité a été un peu réduite mais il s'agit de la diminution de la moitié du poids! Vous, vous réduisez le poids selon vous besoin. Par exemple, si vous avez une seule image dans la page, vous pouvez réduire le poids de l'image de quelques octets seulement, mais si vous en avez plusieurs dans, il faut impérativement les rendre plus légères à l'affichage. Un internaute avec une connexion lente n'aura que rarement la patience d'attendre le chargement de tous les graphiques. En plus, si vous payez l'hébergement de votre site, mettre trop d'images lourdes dans la page consomme la bande passante et Google n'aime pas trop une page trop lourde! Gardez ça à l'esprit pour optimiser vos images.

A noter aussi que réduire la taille de l'image dans la page ne réduit pas son poids d'origine. Par exemple, vous avez une image de 1200x800 avec un poids de 80 Ko, vous l'avez insérer dans la page et vou sla trouvez plus grandre pour qu'elle soit contenue dans cette page. Vous avez réduit les dimensions de cette image: hauteur et largeur par exemple en agissant sur le code en glissant les bords directement dans Création. L'image est maintenant de 600x400 donc vous avez réduit sa hauteur et sa largeur de moitié mais le poids de cette image va rester le même 80 Ko. Donc, il faut agir sur le poids de l'image et non sur la taille.

Suivre les tutos sur l'optimisation des images dans ces pages ci-dessous à cause de la longueur de cette page et du besoin d'optimiser son poids!

Optimiser les images avec Fireworks

Optimiser les images avec Photoshop

Optimiser les images avec Photofiltre

Haut de page

 

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter