Aujourd’hui Romuald a créé un superbe image de fond pour préparer les Soldes… elle fait 10Mo !

Romuald prépare avec détermination les soldes 2012. Chaque année, cette période est très importante pour son petit commerce de tong. La session 2011 avait connu un grand succès dans sa petite boutique de la Grande Motte mais avait été un véritable fiasco sur Internet.

Cette année il se prépare avec plein d’allant, prêt à faire pleins de ventes ! Un ami lui a conseillé de créer une image de fond. Comme son ami a bien marché l’année dernière, il l’écoute sans hésiter et crée une superbe image de fond avec pleins d’effets de style et tout… Superbe rendu, ses amis adorent la nouvelle image ! Il enregistre, uploade l’image de 10Mo et attends impatiemment les soldes. S’il seulement il savait qu’il se prépare à commettre une grosse #eboulette

Pourquoi utiliser une image de fond ?

Mercredi prochain les soldes commencent… Pour les e-commerçants, ces soldes d’été s’annoncent plus que jamais prolifiques.Cependant, la concurrence a bien augmenté en 1 an. Se démarquer est de plus en plus important.

Utiliser une image de fond est une excellent moyen de :

  • prévenir les visiteurs que la boutique est en Solde
  • séduire les visiteurs avec une belle image
  • surprendre ses clients fidèles avec un nouveau style (c’est comme quand on se fait une nouvelle coupe de cheveux)

2 contraintes quand vous créez une image de fond pour votre site !

Créer une image de fond pour donner du style et communiquer, l’idée est excellente de la part de Romuald. Le problème, c’est qu’il n’a pas pris en compte les contraintes technique d’intégration :

  • Le poids de l’image : en uploadant une image de 10Mo, Romuald va rendre son site très long à charger. Son taux de rebond va décoller et, pire encore, son référencement naturel va chuter.
  • La taille de l’image : une erreur qui est souvent commise c’est de ne pas penser aux résolutions d’écran des autres. On crée sa petite image bien calée sur son ordinateur et on oublie que les internautes ont des écrans plus petits ou plus grands.
L’image de fond de Cdiscount d’aujourd’hui illustre bien ce qu’il ne faut pas faire au niveau de la taille des images. L’image de fond fait 1500px de large et je vois un horrible fond jaune sur mon écran de 2000px.
Sentimancho n’aurait jamais fait ça !

Quelle poids idéal pour mon image de fond ?

La taille de votre image ne doit absolument pas dépasser les 150Ko. Cela concerne autant votre image de fond que toute image de votre site.

Pour réduire le poids de votre image, il est conseillé d’enregistrer votre image en .JPEG 80%. Cela permet d’alléger le poids de votre image sans perdre en qualité.

Si vous enregistrez vos images en .PNG, préférez le PNG 8 au PNG 24. Le PNG 24 est principalement utile si vous avez besoin d’une image avec de la transparence.

 Quelle taille pour mon image ?

Lorsque c’est possible, il est préférable d’éviter de proposer des images de 2000px de large.

Pour créer les images les plus légères possibles, la technique consiste à créer une petite image qui sera répétée horizontalement (repeat-x en CSS). Mais ça n’est pas toujours possible !

Si vous n’utilisez pas la répétition horizontale, la taille de votre image de fond dépend de la structure de votre site.

Exemple concret de taille d’image de fond : l’exemple CDiscount

Reprenons l’exemple de Cdiscount, le corps de la page fait 1000px. Pour que l’image dépasse, elle doit dépasser de 250px de chaque côté. L’image de fond doit mesurer de 1500px minimum pour pouvoir voir les ballons de football.

Cependant, si votre écran fait 2000px de large et que l’image mesure de 1500px, une marge de 250px sera créée de chaque côté de l’écran. 2 solutions se dégagent :

  • Vous faites une image de 2000px. Avec 2000px vous êtes sur de passer sur la plupart des écrans
  • Vous gardez votre image de 1500px et vous vous arrangez pour que la couleur de fond s’accorde avec l’image. Par exemple, Cdiscount aurait pu colorer ses marges en vert plutôt qu’en jaune.

Ce qu’aurez du faire Cdiscount !

C’est quand même plus joli en vert non ?

Articles sur le même thème

Cet article vous a intéressé ? Partagez-le :)

5 réflexions au sujet de « Aujourd’hui Romuald a créé un superbe image de fond pour préparer les Soldes… elle fait 10Mo ! »

  1. Ok mais il faut quel poid max alors?  et la taille?
    excuse d’avance mais (je ne peux plus poster de ticket pour l’aide sur le back office,bouton disparu!!)

    • @facebook-100002043323186:disqus : j’ai oublié de répondre à ces questions là ! je vais faire un edit dans l’article pour y répondre. 😉
      Pour écrire un ticket, veuillez passer par la rubrique « Aide » de
      votre interface d’administration et effectuer une recherche si
      nécessaire, la plupart des questions y sont traitées. Dans le cas où
      il n’y aurait pas de réponse satisfaisante, un lien pour écrire au
      support vous sera proposé. Le support weezbe est accessible en passant au
      préalable par la rubrique Aide uniquement.

    • @facebook-100002043323186:disqus Voilà, j’ai édité l’article qui est désormais plus complet. J’espère avoir répondu à vos interrogations. N’hésitez pas si vous avez d’autres questions.

  2. Ping : Créer une image de fond optimisée pour un site internet - Ingenieweb -

Laisser un commentaire

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