Comment optimiser les photos pour mon site Web?

Optimiser une photo

Une image vaut mille mots et c’est bien pour cela que les propriétaires de site Internet les utilisent. Mais trop souvent, les photos utilisées ne sont pas optimisées. Elles sont soit trop grandes, déformées ou encore trop lourdes.

Le principal coupable? Votre appareil photo numérique. Celui-ci ne prend pas des photos pour le web. Elles sont destinées à être imprimées. L’impression nécessite plus de détails que l’affichage sur un écran d’ordinateur. Un fichier avec plus de détails (donc plus de données) a une taille plus grande et est souvent trop lourd sur une page Web.

Une photo optimisée pour le web aura :

  • le bon profil colorimétrique
    Les images enregistrées pour le web seront en RGB. Le CMYK est destiné à l’impression.
  • une résolution suffisante
    Le détail, la définition ou la quantité de pixels 72 ou 96 dpi seront suffisants pour le web et l’image se chargera plus rapidement.
  • les bonnes dimensions (taille de l’image)
    La largeur et la hauteur de votre image seront exprimées en pixels. Les dimensions vont dépendent de l’emplacement souhaité pour l’image sur votre site. (bandeau, galerie, photo d’article, arrière-plan, etc.) Notez que la largeur totale d’un site Web dépasse rarement les 1000 pixels.
  • le bon format
    Les principaux formats pour le web sont : le JPEG, le GIF et le PNG.
    JPEG ou JPG : Choisissez ce format pour vos photographies. Il leur offrira une très bonne qualité versus poids.
    PNG : Privilégiez le PNG pour les images contenant du texte, les icônes, les graphiques, des logos ou des images avec de la transparence.
    GIF : À utiliser pour les dessins et images simples, avec peu de couleurs en transparence ou non. Il est le seul à supporter les animations.
  • un bon rapport poids et qualité (vérifier le terme taille du fichier)
    La compression d’une photo vise à rendre cette dernière la plus légère possible sans trop perdre en qualité (surtout pour le JPEG)
  • un bon nom de fichier
    Nommer votre image en utilisant des mots-clés décrivant cette dernière au lieu d’une série de chiffres sans signification. N’utilisez pas d’espace et de caractères spéciaux. Privilégiez les minuscules et les « – » ou « _ » pour séparer les mots. Vos images seront mieux lues par les moteurs de recherche et pourront être trouvées plus facilement dans les recherches d’images.

Les étapes pour optimiser une photo

  1. Ouvrir votre photo dans un éditeur d’images
  2. Redimensionnez ou recadrez proportionnellement votre photo selon les dimensions souhaitées
  3. Enregistrez ou exportez la photo (selon l’outil)
    1. Choisissez le bon format (JPEG, PNG ou GIF)
    2. Sélectionnez le taux de compression
    3. Inscrivez un nom pour votre fichier

Voici une liste d’éditeurs pour vos photos. La plupart convertiront automatiquement les photos enregistrées dans des formats web en RGB et en 72 dpi.

Éditeurs d’images en ligne gratuits

  • Pixlr (gratuit et sans création de compte)
  • BeFunky (gratuit et sans création de compte)
  • Photoshop en ligne (gratuit et sans création de compte)
  • PicMonkey (gratuit et sans création de compte)
  • Editor (gratuit, en français et sans création de compte)
  • Splashup (gratuit et sans création de compte)
  • Sumo (gratuit et sans création de compte)
  • Lunapic (gratuit et sans création de compte)
  • Fotoflexer (gratuit et sans création de compte)
  • Drpic (gratuit et sans création de compte)
  • Free online photo editor (gratuit et sans création de compte)
  • Picadilo
  • Ipiccy (gratuit et sans création de compte)
  • Canva (gratuit)

Les logiciels gratuits

  • Photofiltre
  • Gimp – Mac et Windows
  • Paint.Net
  • Photo Pos Pro
  • PhotoScape – Windows
  • Chasys Draw IES
  • Acorn (version gratuite et payante) – Mac

Les logiciels payants

  • Photoshop – Mac et Windows
  • Paintshop Pro
  • Photoshop Elements
  • Serif Photo Plus
  • Lightroom
  • Acorn (version gratuite et payante) – Mac
  • Corel PaintShop Photo Pro – Windows
  • Pixelmator – Mac

Astuce

Vous souhaitez connaître les dimensions et le poids d’une photo?

  • Sur votre ordinateur : Cliquez sur le fichier de la photo avec le bouton droit de votre souris et sélectionner « Propriétés de l’image » ou « Informations sur l’image ».
  • Affichée sur un site : Cliquer directement sur l’image avec le bouton droit de votre souris et sélectionner « Propriétés de l’image » ou « Informations sur l’image ».

Et voilà, vous êtes maintenant mieux outillé pour optimiser vos photos avant de les intégrer sur votre site Web.

 

Infolettre
Recevez gratuitement nos articles par email. Abonnez-vous à l’infolettre de l’agence!

Je m’abonne

Vous avez aimé cet article ? Partagez-le avec vos amis en cliquant sur les boutons ci-dessous :

Commentaires (5)

  1. Joel Répondre

    Le tout est de trouver l »équilibre entre optimisation de la photo car dès fois en réduisant trop le poids d’une photo, on gagne certes en rapidité mais le rendu n’est plus top !

    Je pense que le meilleur conseil de Mélanie sur cet article est déjà de bien choisir le format adapté entre PNG et JPG puis d’optimiser en fonction :)

    Excellent article sinon !

    25 février 2016 à 11:05
  2. Ping : 4 solutions pour illustrer votre site Web avec des photos à usage commercial | Simplifiez-vous le Web

  3. Mélanie Imbeault Répondre

    Merci Julien de partager cette information avec nous.

    26 février 2014 à 13:00
  4. Julien Répondre

    J’ai créé un petit logiciel gratuit qui permet de réduire les photos de masse
    http://www.emjysoft.com/logiciel-photo-reducteur/
    Que pensez-vous?

    26 février 2014 à 07:07
  5. Mélanie Imbeault Répondre

    Un ami Facebook m’a suggéré un outil pour les images. Je le cite : « Une excellente solution pour diminuer la taille de vos images de 40% a 60% et plus sans perde de qualité est de passer vos images dans l’application gratuite « ImageOptim v1.4.5″ qui est en plus super super facile d’utilisation. »

    ImageOptim est disponible en téléchargement pour Mac. Voici le lien : http://imageoptim.com/fr.html

    25 novembre 2013 à 23:04

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>