Choisir et optimiser ses images

Blog Applibox

Aujourd’hui, et de plus en plus, la course à l’optimisation de site est lancée. La cause ? Google, acteur principal de la recherche sur le web, est de plus en plus exigeant pour avoir un bon référencement.

Plusieurs facteurs entre en ligne de compte et l’un des principaux est la gestion des images. Et c’est sur ce point que nous allons nous attarder dans cet article. Toute la première partie sera compréhensible par tous. Le dernier point sera plus technique 😉

Pourquoi optimiser ?

Dans ce paragraphe, je parlerai plutôt d’optimisation des performances. Pour le référencement, nous verrons plus bas dans la partie plus technique. L’optimisation de ses images sur son site est importante. Si votre site ne comporte que du texte (ce qui est rare il faut bien l’avouer !), votre site aura des chances d’être assez rapide. En revanche, du moment que des images doivent se charger, la vitesse de chargement de votre site s’en ressentira. Et sur ce point, Google est très exigeant et votre référencement prendra du plomb dans l’aile. Alors attention, optimiser ses images ne voudra pas dire que vous aurez la première place sur Google ! Il y a tellement de facteurs à prendre en compte pour avoir un bon référencement 🙂

Où trouver ses images ?

Plusieurs possibilités s’offrent à vous. A votre disposition vous avez les sites Fotolia (http://fr.fotolia.com) et iStockPhoto (http://francais.istockphoto.com) qui sont les plus connus. A noter que ces sites sont payants (forfait avec des crédits à acheter). Mais vous avez aussi Gettyimages (http://www.gettyimages.fr) qui vous proposera des photos libres de droits mais attention de bien lire les licences d’utilisation car tout n’est pas libre de droit !

L’utilisation de ces sites est simple. Vous avez un moteur de recherche et vous saisissez votre ou vos termes de recherche. Exemple : vous avez besoin d’une photo “Chapeau melon”, et bien vous saisissez cela et vous aurez des résultats sur les chapeaux melons, mais possible que vous ayez aussi en résultat  des chapeaux… et des melons ! Vous voyez, pas difficile 🙂

Attention, règle de base : ne JAMAIS prendre une photo dans Google Images. Une photo prise sans permission ne vous appartient pas et vous risquez d’avoir des ennuis si l’auteur s’en aperçoit.

Quelle taille d’image ?

La taille d’image dépendra de ce que vous voulez faire. Les premières questions à vous poser sont “Où est-ce que je vais l’utiliser sur le site ?” et “Dois-je la retravailler (moi ou mon Webdesigner) ?”. Pour cette dernière question, si cette image doit être retravaillée, une version grand format est toujours préférable. Ensuite, si vous avez besoin d’une image dans un article, une version de grande taille ne vous sera pas utile ( sauf si, toujours, vous compter la retravailler ! ). En revanche, sur un site en Responsive Design, pour mettre l’image en fond ou dans un slider (diaporama d’images) responsive, une image de grande taille est importante.

Pour résumer, nous préconisons un minimum de 800 pixels de longueur pour les petites tailles et 1920 pixels de longueur pour les grandes tailles.

Attention, ces tailles ne sont là qu’à titre indicatif. Tout dépendra de votre projet. Dans ce cas, discutez en avec votre agence web ou votre Webdesigner 🙂

Quel Format ?

Les 3 formats les plus connus sont :

  • gif : Pour des images animées ou comportant peu de couleur. il est rare d’utiliser ce format.
  • png : Idéal si votre image comporte des éléments transparents. Mais il est rare d’acheter des images avec de la transparence.
  • jpg (ou jpeg) : Le format le plus couramment utilisé. C’est le format que l’on vous conseillera.

Plus techniquement, comment optimiser  ?

Nous entrons dans la partie la plus technique de cette article : comment optimiser ses images ? Non, poser votre clé de 12 et votre tournevis, vous n’en aurez pas besoin promis 😉

 

Dans un premier temps, il est important de bien nommer son image avant de la placer sur votre site. Si votre image “chapeau melon” s’appelle “img012345.jpg”, le référencement ne sera pas forcement optimisé vous serez d’accord 😉 Alors qu’un nom comme chapeau_melon.jpg aura plus d’impact ! Donc il est important de bien saisir le nom de ce que vous voulez représenter sur votre article avec cette image. Google s’en servira pour indexer votre image et donc, plus de chance d’avoir un bon référencement !

 

Ensuite le poids de l’image est également important. Si vous placer une image en résolution très grande ou une image bmp (what ??), je pense que vous aurez le temps d’aller vous servir un café et de le boire, le temps que votre page se charge !

Plusieurs techniques s’offrent à vous. Pour les plus courageux et téméraires d’entre vous, vous pourrez ouvrir votre logiciel de retouche photo comme Photoshop, Pixelmator ou The Gimp. Après, à vous de voir les bons réglages de taille et d’export. Le plus couramment utilisé est le format jpg et nous vous conseillons une qualité de 80% qui est largement suffisante et qui baisse déjà considérablement le poids de votre image.

Sinon, nous vous conseillons le site de Yahoo : Smushit (http://www.smushit.com/ysmush.it). Ce site est tout simplement la référence pour l’optimisation d’image pour le web. Son utilisation est simple :

  • vous cliquez sur l’onglet UPLOADER
  • vous allez chercher votre ou vos images.

 

Si votre image peut être optimisée, un résumé vous dira de combien de pourcent l’optimisation a été faite et un bouton “Download Smushed Images” vous demandera de télécharger votre image.

Facile, non ? :–)

A noter, rien ne vous empêche de passer par Smushit après avoir exporté votre image depuis votre logiciel de retouche photo. Au contraire même !

 

J’espère que cette article vous aura aidé dans votre choix. N’hésitez pas à venir en parler avec nous sur notre page Facebook : https://www.facebook.com/applibox/posts/10201659076971589 !

  Auteur : Stéphane
Experts réactifs à votre écoute
Amélioration continue
Agence Agile
Passez prendre un café
Applibox - Twitter Applibox - Facebook Applibox - Google Plus Applibox - Linkedin Applibox - Flux RSS
Inscrivez-vous
à notre newsletter
Si vous avez
un projet
Demander un devis
Applibox Groupe Wiphyse Lyon Agence web lyon

13, cours Verdun Gensoul

69002 Lyon

Applibox ©