mini-tutoriel : comment optimiser une image pour le web avec gimp ou microsoft office picture...

6
Comment optimiser une image Rappel La rapidité d'affichage d'une page Web est liée au poids des images qui la composent. Ce poids, exprimé en kilo-octets (Ko), dépend de la taille réelle des images, de leur résolution, de la palette de couleurs et du format des fichiers. La résolution d’une image pour internet : 72 dpi La résolution d'une image est déterminée par le rapport entre sa taille et le nombre de pixels qui la composent. Plus la résolution d'une image est grande, meilleure est sa qualité. Le type de format des images sur internet : GIF, JPG, PNG Il existe différents types de formats d'image. Actuellement, Internet n'en utilise en pratique que trois: GIF, JPEG et PNG. GIMP Lancez Gimp :

Upload: emencia

Post on 27-Jul-2015

804 views

Category:

Documents


2 download

DESCRIPTION

Ce tutoriel va vous permettre d'optimiser simplement un visuel pour le web.

TRANSCRIPT

Page 1: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Comment optimiser une image

Rappel

La rapidité d'affichage d'une page Web est liée au poids des images qui la composent. Ce poids, exprimé en kilo-octets (Ko), dépend de la taille réelle des images, de leur résolution, de la palette de couleurs et du format des fichiers. La résolution d’une image pour internet : 72 dpi La résolution d'une image est déterminée par le rapport entre sa taille et le nombre de pixels qui la composent. Plus la résolution d'une image est grande, meilleure est sa qualité. Le type de format des images sur internet : GIF, JPG, PNG

Il existe différents types de formats d'image. Actuellement, Internet n'en utilise en pratique que trois: GIF, JPEG et PNG.

GIMP

Lancez Gimp :

Page 2: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Ouvrez votre image puis cliquez sur fichier puis sur Ouvrir : vous devez sélectionner l’image sur votre disque dur.

Vous obtenez l’écran suivant :

Pour réduire la taille de l’image, vous devez cliquer sur Image puis Echelle et taille de l’image :

Page 3: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Une nouvelle fenêtre apparaît :

Vous devez indiquer ici les dimensions que vous souhaitez : Si vous renseignez la largeur, la hauteur sera automatiquement complétée de manière à respecter la proportionnalité de l’image d’origine. La résolution à indiquer pour une image web est 72. Une fois les différents champs complétés, cliquer sur Echelle. L’image est redimensionnée. Enregistrer l’image. Vous devez maintenant enregistrer votre image sur votre disque dur. Cliquer sur fichier puis enregistrer sous :

Page 4: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Vous obtenez l’écran suivant :

Vous devez indiquer le nom de votre image et ajouter l’extension désirée : .jpg Vous devez ensuite cliquer sur exporter :

Vous obtenez l’interface suivante :

Il s’agit ici de trouver le meilleur compromis entre le poids de votre image et son rendu. En cochant Afficher l’aperçu dans la fenêtre d’image, vous pouvez voir directement le rendu de votre image avec l’optimisation choisie.Lorsque l’optimisation est satisfaisante, vous pouvez cliquer sur valider. Votre image est enregistrée sur votre poste.

Page 5: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Microsoft Picture Manager Lancez Picture Manager

Sélectionnez l’image à modifier

Dans la colonne de droite, cliquez sur Modifier les images puis sur Redimensionner.

Page 6: Mini-tutoriel : Comment optimiser une image pour le web avec Gimp ou Microsoft Office Picture Manager

Vous pouvez :

- choisir un format prédéfini (zone rouge) - Préciser la taille précise que vous souhaitez appliquer à l’image. L’outil

adaptera automatiquement la taille pour que l’image reste toujours le même format. (zone jaune)

- Indiquer le pourcentage de réduction ou d’augmentation à appliquer à l’image d’origine. (zone verte)

Pour valider la modification, cliquez sur OK, puis enregistrez.