Optimiser ses photos pour une publication web

Retouche photo

Pour publier des photos sur un site web, il est nécessaire de respecter certaines contraintes liées notamment aux débits des connexions (rapidité d’affichage) et au coût de l’hébergement (capacité de stockage et consommation de bande passante). Or les photos directement sorties de nos appareils photos numériques actuels ne se prêtent pas du tout à ce genre d’utilisation et nécessitent quelques retouches avant d’être publiées sur le web. Voici quelques astuces qui vous permettront d’optimiser vos photos pour un affichage plus rapide et une capacité de stockage préservée.

Pour retoucher nos images, nous allons nous intéresser à deux notions bien distinctes : d’une part, ses dimensions, et d’autre part, son poids.
Les dimensions de l’image correspondent à l’espace que la photo occupe graphiquement à l’écran. Elles sont exprimées en pixels (px) et devront généralement s’adapter à la taille du site. Inutile en effet d’utiliser une image de 4000px de large pour un site qui n’en propose que 1000px.
Le poids de l’image représente l’espace qu’occupe le fichier sur votre disque dur. Il est exprimé en Octets et même plus souvent en MégaOctets (Mo). Il sera directement lié aux dimensions de l’image et à sa qualité, ou plus précisément ses propriétés.

Prenons concrètement une image issue d’un appareil photo numérique standard et voyons comment nous allons passer d’une image de 4608px sur 3456px et un fichier de 5,90Mo à une image de 570px de large pour un poids de 14.6Ko, soit quasi quatre cents fois plus légère, donc bien plus rapide à afficher sur un site web.

Voici le résultat avec une image 376 fois plus légère que l’image originale!

Optimiser une image pour une publication web

Pour cela, nous allons utiliser un logiciel de Retouche Photo. Faites votre choix…

Si vous souhaitez recadrer votre image, c’est le moment!

Taille et résolution de l'imageSi non, nous commencerons d’emblée par régler la résolution de l’image à optimiser.
Les résolutions des écrans standards étant de 72dpi, inutile de conserver une résolution élevée comme on le ferait pour une impression de qualité. Ici, on se contentera de 72dpi en cliquant bien souvent sur l’intitulé « Image » dans le menu général du programme utilisé puis en choisissant « Taille de l’image ».
A la recherche du champ « Résolution », on choisira une valeur de 72. Ce qui aura déjà pour effet de diminuer considérablement le poids du fichier.
Profitez-en pour choisir au même endroit les dimensions de l’image et choisissez par exemple 800px de large pour une photo horizontale, tout en conservant les proportions.

 

Taux de compressionPassons maintenant à l’enregistrement. Là encore, nous allons perdre du poids en sélectionnant un taux de compression. Pour cela, choisissez le format .jpeg et optez pour une qualité (taux de compression) de 70. Certaines images permettent même de descendre à 65, au delà vous risquez de voir des dégradations de l’image.

 

SauvegardeAu moment de la sauvegarde, choisissez des noms de fichiers en utilisant des mots clés en rapport avec l’image (utile pour le référencement) mais veillez surtout à ne pas utiliser d’accents, ni de caractères spéciaux, et éviter les espaces en les remplaçant par le tiret « -« .

 

Voilà, c’est aussi simple que cela.
Bien entendu, il sera possible d’effectuer de nombreux autres traitements sur vos photos mais cette fois, davantage liés à un un souci d’esthétique plus qu’à une utilisation pour le web proprement dite. Les deux opérations n’étant pas incompatibles, cela va de soi.
Bons clichés!

Vous aimez cet article? Partagez-le sur les réseaux !

6 réflexions au sujet de « Optimiser ses photos pour une publication web »

  1. Le , Pierre Snaet a dit :

    Je débute avec WordPress et vos vidéos me sont très utiles. Merci. Quel logiciel utilisez-vous pour les réaliser ? Le mien (CamStudio) souffre de lenteurs et provoque des brouillages audios très désagréables, comme vous pourrez le constater si vous vous rendez sur le site d’entraînement mentionné dans ce formulaire.

  2. Le , Patrick Finot a dit :

    Ravi de voir que les tutos vous sont utiles.
    J’avais justement prévu d’écrire un article prochainement sur les logiciels de capture d’écran vidéo, je vais essayer d’accélérer le pas… 😉

  3. Le , Reda a dit :

    Bonjour,

    simplement pour compléter cet article intéressant en indiquant qu’il existe d’autres possibilités d’optimiser ses images pour le web à partir de services en ligne ou avec des extensions lorsqu’on utilise wordpress (à l’attention de Pierre). J’ai récemment posté un article à ce sujet, disponible à l’adresse suivante : http://www.araoo.fr/optimiser-son-referencement-en-optimisant-ses-images/

  4. Le , Patrick Finot a dit :

    Bonjour Reda et merci pour ce commentaire qui effectivement complète bien cet article.
    J’y découvre le plugin EWWW Image Optimizer pour WordPress; je ne connaissais pas, je le testerai probablement prochainement…

  5. Le , daniel gerbault a dit :

    ma question concernant a la taille de photos que je veux mettre en ligne sur mon site http://www.apsaraventure.com

    je les ai reduites d’abord sur Photoscape a 1024, puis sur l’admin de wordpress qui le permet aussi, mais quand je les envoie sur l’une des pages de mon site, elles sont toujours a la taille d’origine.
    elles prennent tout l’ecran de l’ordi alors que j’ai bien choisi reduit les pixels par ailleurs(voir dans proprietes de la photo) sur photoscape.

    dans Bibliotheque de WP il est egalement possible de reduire la taille des images ce que j’ai bien sur fait mais la encore, la photo une fois sur le site revient a sa taille d’origine
    je ne sais pas pour quelle raison. merci de vos conseils
    daniel

  6. Le , Patrick Finot a dit :

    Je pense que la réponse se trouve dans ce tuto qui traite de la gestion des images dans WordPress.
    Vers 6:30, la vidéo indique qu’il faut sélectionner la taille voulue dans la colonne de droite lors de l’intégration d’image.
    Désormais, il n’est plus nécessaire de retoucher ses photos au préalable pour l’intégration dans WordPress, du moins, en ce qui concerne la taille ou le recadrage.
    De plus, un plugin comme Imsanity permet de gérer la taille de l’image originale pour ne pas saturer l’hébergeur avec des photos trop lourdes…

    Ps: sympa votre site 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *