Démarrer
Design

15. Modifier les images du site importé

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Foire aux questions - Images pour un site web

Attention, les photos, images et tout élément graphique peuvent être assortis de droits d’auteur. Il n’est donc pas légal d’utiliser une photo lorsque vous n’êtes pas en possession de ses droits d’utilisation.

Il est donc fortement déconseillé de copier les images depuis un site web ou depuis la page de résultats « Images » de Google.

Privilégiez plutôt vos propres photos, faites appel à un photographe ou utilisez les images des banques d’images prévues à cet effet (en respectant leurs conditions, certaines banques d’images demanderont à être citées dans les mentions légales).

Vous pouvez trouver des photos, des images, des illustrations de qualité, libres de droits et gratuites dans les banques d’images suivantes:

Vous souhaitez des illustrations un peu plus premium et un peu moins répandues, sans pour autant devoir faire appel à un photographe ou un illustrateur professionnel ? Essayez les banques d’images payantes qui vous proposeront des éléments moins « déjà vu »:

Il existe plusieurs formats d’image: .jpg, .png, .eps, .gif, .svg (etc)

  • .jpg: format classique d’une image/ photo. Privilégiez ce format pour vos visuels, images, photos
  • .png: format d’image/ photo avec transparence. N’utilisez ce format que lorsque votre visuel doit conserver un fond transparent
  • .gif: format pour les images animées. Uniquement lorsque vous voulez intégrer une image animée. Attention toutefois au poids car les gifs ont tendance à être assez lourds.
  • .svg: format idéal pour les logos et icônes, pour les éléments vectoriels. Si vous disposez de votre logo en format .svg vous pourrez l’utiliser. L’avantage du .svg est son poids très léger et il permet de pouvoir être redimensionné sans perte de qualité.
  • .eps, .ai, .psd … : malheureusement inexploitables dans l’affichage d’un site web puisqu’ils s’agit de formats spécifiques aux logiciels d’édition d’image (type Photoshop, Illustrator). Il faudra donc d’abord exporter au format .jpg ou .png s’il contient de la transparence.

Il n’y a pas de chiffre exact, car tout dépend de l’utilisation qui va être faite de l’image, de l’endroit où elle va être placée, de la complexité de l’image…

Mais pour donner un ordre d’idée:

  • Un maximum d’environ 200 Ko par image, sauf cas exceptionnel
  • L’image principale de la page peut être un peu plus lourde si elle est plus grande (par exemple l’image de fond qui occupe tout l’écran sera forcément plus lourde qu’une image de galerie secondaire). Dans tous les cas, essayer de ne pas dépasser 1Mo pour l’image principale.
  • Résolution: 72 ppp (inutile d’employer du 300 ppp qui est réservé à l’impression papier)
  • Pour les images en pleine largeur (qui occupent toute la surface de l’écran), essayez de vous limiter à la dimension d’un écran de 1980 px de large et/ou 1080 px de haut
  • Dans tous les cas, il est inutile d’insérer une image de 3000 px de large, la majorité des écrans ne dépassant pas les 2000 px de large, l’image sera donc automatiquement réduite et pèsera lourd… pour rien
  • Cas exceptionnel de nécessité d’images parfaites, par exemple pour montrer un travail de photographe, il faudra donc essayer de conserver au maximum la qualité des photographies mises en avant, et faire de temps en temps une concession pour ne pas trop alourdir le site.

Il existe de nombreux outils (en ligne ou à installer, gratuits ou payants) qui permettent de recadrer, recouper une image aux bonnes dimensions.

Si vous n’avez pas Photoshop, sachez qu’il existe des solutions alternatives, notamment une solution en ligne avec une version gratuite:

pixlr

Le programme est en anglais, mais il est assez facile à utiliser et permet de faire le nécessaire rapidement pour recadrer et redimensionner les images.

Rendez-vous sur le site de Pixlr et importez votre image (open image). On vous demande ensuite si vous voulez ajouter cette image à une composition existante ou en créer une nouvelle: sélectionnez « create new ». S’il vous est demandé le format standard à utiliser, cliquez sur « web », cela limitera la dimension de l’image.

L’image s’ouvre dans la zone de travail, et sur le côté gauche apparaît une colonne avec des symboles d’outils. Pour recadrer une image: choisissez « Crop », puis redécoupez l’image à votre convenance. Une fois terminé, appuyez sur « Apply ».

Pour enregistrer votre image, cliquez sur « Save », donnez un nom à l’image, spécifiez le format (.jpg ou .png uniquement si votre image n’a pas de fond, c’est à dire un fond transparent), vous pouvez également modifier la dimension totale de l’image (et contrôler le poids total de l’image). Validez et voilà ! L’image se téléchargera dans votre dossier de téléchargements.

Afin de réduire le poids d’une image, il faut donc veiller à optimiser les éléments suivants:

  • le type de fichier: choisir le bon type de fichier (et privilégier le .jpg lorsque c’est possible)
  • les dimensions de l’image: recouper l’image aux dimensions correctes afin qu’elle ne soit pas trop grande et qu’elle corresponde aux dimensions de l’espace dans lequel elle va être intégrée
  • la résolution: celle des écrans est de 72 ppp
  • la qualité: lors de l’enregistrement de l’image (dans pixlr, tout comme dans Photoshop), il est possible de régler la qualité de l’image. Parfois, abaisser la qualité de 10% ne change pas tellement le rendu et peut économiser beaucoup de poids. Donc au moment d’exporter/ sauvegarder l’image, baissez la qualité tant que vous le pouvez et sans que cela n’affecte trop le rendu désiré
  • Compression d’images: ce site fait bien l’affaire. Une fois l’image bien redimensionnée, à la bonne résolution, au bon format et tous les points précédents validés, vous pouvez terminer par une compression d’image sur l’un des sites de compression d’image. Ceci n’affectera pas la qualité de l’image.