Les images constituent le facteur de séduction incontournable de ton site. Il ne faut surtout pas les négliger.
Tu vas découvrir comment créer de belles images pour ton site même si tu es un parfait débutant.
Ce que tu vas apprendre :
Débutant
Où les trouver ?
Tu as 2 options pour tes sources d’illustration : les photos personnelles et celles disponibles sur internet.
Les photos et vidéos personnelles
Le vrai plus de tes photos c’est qu’elles sont uniques. Tu ne les retrouveras pas sur le site de ton voisin.
Tes clients potentiels voudront voir tes réalisations, ton espace de travail, ta tête voire ton hamster qui est si mignon… Cela permet de casser la distance imposée par l’écran et d’humaniser la communication.
Malheureusement, nous sommes loin d’être tous des virtuoses de la photographie. Cela peut être une bonne idée de réaliser les photos dont tu as besoin au fur et à mesure et de demander de l’aide dans un second temps. Cela évite de faire revenir la personne car il manque un portrait.
Met à contribution ton voisin Hervé-Jacky, grand passionné devant l’éternel, qui te soule littéralement depuis des mois avec son Canon EOS 5D Mark IV.
Les photos et vidéos sur internet
Il existe de nombreuses sources gratuites pour trouver de belles photos sur internet. Cependant, il est indispensable de respecter le droit d’auteur et de ne pas emprunter sans autorisation.
Les 4 sources que je te donne fournissent des photos et vidéos CC0. Il s’agit d’une convention qui précise que les visuels sont réutilisables gratuitement et modifiables y compris pour des usages commerciaux sans obligation de citer la source.
Pixabay (photos et vidéos)
Pour moi, ce site se révèle incontournable avec une recherche en français sur un stock de 930 000 images et illustrations. Tu peux filtrer par catégorie, couleur, taille et orientation. Tu dois t’inscrire pour télécharger les très grands formats.
Des vidéos sont disponibles. Tu les retrouves dans le menu déroulant :
Flickr – rubrique CCO
La recherche en français sur Flickr est intuitive avec la possibilité de filtrer facilement par couleur, taille et orientation. Le choix est impressionnant. Sans inscription.
Tu peux également regarder la rubrique domaine public pour trouver d’anciennes photos tombées dans le domaine public.
Pexels agrège les photos de nombreux sites. S’il ne vise pas la quantité, la qualité est souvent bien supérieure. Sans inscription. Son seul défaut : la recherche est en anglais.
Pexels propose également un site spécialisé dans les vidéos :
Unsplash propose des photos de qualité professionnelle. Pinterest recommande ce site comme source d’illustrations. Un incontournable même si la recherche s’effectue en anglais.
Adapter les dimensions des images
Redimensionner des images à la bonne largeur
Pourquoi charger une photo de la largeur d’un panneau d’affichage quand tu l’utilises sur ton site. Cela le ralentit inutilement.
Tu vas dimensionner toutes les images utilisées sur tes pages et articles à la bonne largeur.
Les images avec des dimensions spécifiques (largeur et hauteur) comme les visuels de couverture sont abordées dans le prochain paragraphe.
- Lancer Bulk Resize Photos
- Trier les images par ordre décroissant de taille
- Faire glisser toutes celles qui sont plus grandes que la taille optimale dans l’outil (480 px de large pour moi)
- Sélectionner Width
- Indiquer la largeur maximale en pixels
- Bouton Start Resizing
- Supprimer les anciennes images et les remplacer par les nouvelles
Créer une image avec des dimensions spécifiques
Nous allons utiliser le logiciel en ligne Canva.
Pourquoi Canva ?
- intuitif pour une prise en main très rapide
- la possibilité d’ajouter facilement du texte et des illustrations
- multi-usage : il nous permettra de réaliser également les visuels utilisés sur les réseaux sociaux
- bonus : il est gratuit pour l’usage que nous allons en faire
Je vais prendre comme exemple la création de l’image d’en-tête de la page d’accueil.
- Se connecter à Canva
- S’enregistrer avec Google (autres options Facebook ou e-mail)
- Autoriser
- Choisir professionnel
- Bouton Créer votre propre design
- Réaliser le tutoriel (environ 10 minutes) ou aller directement en bas
- Bouton Tutoriel terminé !
- Bouton Utiliser des dimensions spécifiques
- Rentrer les dimensions : 2 000 en largeur et 1 200 en hauteur
- Bouton Créez
- Cliquer sur images, en bas à gauche
- Bouton Télécharger vos propres images
Méthode alternative : tu glisses directement le fichier dans Canva
- Ton image se charge avec une barre verte pour indiquer la progression
- Cliquer sur l’image, elle apparaît désormais à droite
- Redimensionner l’image en utilisant les points au coin de l’image pour recouvrir intégralement l’espace
- Déplacer l’image pour la positionner comme tu le souhaites en laissant appuyé le bouton gauche de la souris
- Bouton Télécharger du menu pour enregistrer sur ton ordinateur
- Conserver PNG
- Bouton Télécharger une deuxième fois
- Une barre de chargement apparaît
- Bouton OK
L’image est enregistrée dans le dossier téléchargement de ton ordinateur (sous Windows).
Réduire le poids des images
Les fichiers sont souvent très lourds et ralentissent le chargement du site. Nous allons optimiser leur poids avec Tinypng qui est d’une simplicité enfantine.
- Glisser les images à optimiser directement sur le site
- Les images apparaissent avec l’avancement du chargement
Pour télécharger, tu as 2 options :
- une par une avec le lien Download
- l’ensemble en fichier Zippé avec le bouton Download all
Conclusion
Tu as désormais tous les outils pour personnaliser ton thème. Tu vas enfin pouvoir commencer la partie visible du travail.
N’hésites pas à réaliser plusieurs essais directement sur le site pour affiner les visuels. Les premiers visuels sont un peu long à trouver mais, après quelques allers et retours, tu te prendras vite au jeu.
Les articles qui peuvent t’intéresser
- Réalise des visuels personnalisés en 3 minutes avec un générateur de mockups
- Personnalise le thème Twenty Seventeen
- Le contenu de ta page d’accueil
Retrouve tous les articles pour Créer seul ton site
Ressources
Vidéos libres de droits : 3 sites pour télécharger des vidéos gratuitement par le blog du modérateur.
David Dudouet a réalisé un superbe travail en classant et analysant 85 sites de photos libres de droit gratuites et utilisables pour un usage commercial.
Un très bon article de Tom Breton qui recense 61 sites pour trouver des images gratuites.
Quelques éléments que je ne connaissais et qui vont m’aider à préférer Canva.
Merci beaucoup.
Bonjour,
J’utilise énormément Canva. Dans l’article de la semaine prochaine je montre pas à pas comment réaliser une bannière.
A bientôt,
Jean