Chargement de la page

Nous suivre

Picto fleur
Le blog

Préparer ses images pour le web

Web
Attention, ce qui va suivre est supra-méga important, chez Mona, on ne rigole pas avec ça 🤓 !

Bien souvent, les webmasters peinent à ajouter des images convenablement préparées sur leur site. Voici un petit récap des bases à connaître 🙂 On va tout bien vous expliquer, vous allez devenir des pros 💪🏻

Quelques notions

Format JPEG (.jpg ou .jpeg)

  • Le plus utilisé sur le web (bonne qualité, faible poids)
  • Ne gère pas la transparence
  • Gère 16 millions de couleurs
  • Idéal pour les photos 🖼️

Format GIF (.gif)

  • Gère la transparence
  • Gère seulement 256 couleurs 🎨
  • Peut être animé
  • Idéal pour les pubs ou les animations simples

Format PNG (.png)

  • Gère la transparence
  • Optimisation accrue par rapport au GIF
  • Idéal pour les images issues de vecteurs (logos, pictos)

Format PDF (.pdf)

Idéal pour les documents mêlant textes, images et/ou tableaux que vous souhaitez mettre à disposition sans qu’ils puissent être modifiés (sauf si la personne possède un logiciel professionnel).

Autres formats

📚 Si vous souhaitez mettre à disposition des tableaux, des textes, que les utilisateurs du site pourront télécharger et modifier, privilégiez des formats .doc, .txt, .xls qui seront compatibles avec la plupart des logiciels de gestion de textes et tableaux.

Préparer une image

Outils

  • Photoshop : c’est clairement l’idéal, mais bien souvent réservé aux professionnels du graphisme 😇. Le logiciel a un coût et est très complet, mieux vaut savoir s’y prendre avant de se lancer.
  • GIMP : ça nous fait un peu mal de l’écrire mais certains réussissent à se débrouiller avec cette alternative gratuite, respect !
  • Tout autre outil en ligne : Canva ou encore Iloveimg, l’important est d’avoir la main sur le recadrage, les dimensions, le format et la résolution. Choisissez l’outil avec lequel vous êtes à l’aise !

Caractéristiques

  • On ne le dira jamais assez, sur le web, vos images doivent être en 72 dpi. C’est la norme et cela permet surtout de maintenir des performances convenables. Un site, ce sont des ressources : plus vous demandez au navigateur d’en charger, plus cela prend de temps 😉
  • L’espace colorimétrique pour l’utilisation sur écran est RVB (rouge, vert, bleu).
  • Suivant l’exploitation faite de l’image, déterminez la taille adéquate 📏 : si c’est une bannière qui doit occuper toute la largeur disponible sur l’écran, optez pour une largeur d’au moins 1280 pixels sans quoi le rendu pourrait être pixelisé. En revanche, si votre image est intégrée dans le contenu de votre page, elle n’aura pas besoin d’excéder 800 pixels de large.
  • Pour un rendu harmonieux, vous pouvez déterminer des gabarits : toutes les images orientées en paysage peuvent mesurer la même taille (800×440 pixels) et inversement pour les images orientées en portrait (440×800 pixels).

Un peu d’organisation

  • Nommez vos images avec précision, il vous sera plus facile de savoir laquelle ira où ☝️. Attention, pas d’accents ou de caractères spéciaux. Remplacez les espaces par des tirets ou underscores, pour que cela reste lisible. Si vous apportez des modifications à une image déjà existante, utilisez le versioning (v1, v2, v3 à la fin du nom).
  • Triez-les dans des dossiers 📂, par page ou par article. Plus vous serez rigoureux, moins vous perdrez du temps lorsqu’il vous faudra vous y replonger… ou confier le suivi à un collègue !

C’est bon, vous vous sentez d’attaque ? Alors go !

On en parle ?

Print

Les Sables
d'Olonne

Candice Naudin


06 66 38 64 47
Site web, photo, vidéo, logo et supports imprimés

Web

Angers

Laura Hauët


07 82 63 23 49
Site web, photo, vidéo, logo et supports imprimés

MonaGraphic

Communication
graphisme - édition
web - multimédia

picto fleur

à proximité d'Angers
et des Sables d'Olonne