Dans cette vidéo, Youdemus vous présente les bonnes pratiques à adopter lorsque vous manipulez des images, que vous vous lanciez dans la création d’un site ou que vous en gériez un au quotidien.
[Retranscription vidéo]
Un site présentant de grandes et belles images sera plus attractif qu’un site ne contenant que du texte. Ainsi, on peut avoir tendance à en ajouter beaucoup, en oubliant un élément primordial : lorsqu’on sélectionne une image on vérifie sa taille et son poids avant tout !
L’enjeu ? Ne pas ralentir votre site et donc faire fuir vos utilisateurs. Nous allons donc voir comment optimiser vos images.
Les formats de base les plus courants
Les formats de base les plus courants sont :
- Le JPEG, associé aux photos, avec un format de grande compression, plus léger que le PNG.
- Et le PNG qui, lui, est plus souvent associé à des images tels que les logos, les pictogrammes… Sa compression est moindre. Et contrairement au jpeg, il conserve la transparence.
De nouveaux formats font leur apparition tels que Web P promu par Google qui est encore plus léger !
La taille et le poids des images
Sur le Web, on parle en pixels et non en cm.
La largeur idéale d’une image est de 1920 px. En effet la résolution de la taille d’un écran de PC de bureau correspond à 1920 x 1080 px en 72 dpi (il s’agit de la résolution).
Ici, notre image de cactus est trop grande, elle fait en effet 6 000 X 4 000 pixels.
Cela la rend trop lourde ; la charger telle que sur la page d’un site ralentirait son chargement.
Comment redimensionner une image ?
Pour pouvoir redimensionner votre image vous allez devoir passer par un logiciel de retouche.
- Adobe Photoshop est le plus populaire, mais payant, peut-être que vous ne le possédez.
- Gimp, est un logiciel libre de droits et c'est une bonne alternative.
- Option entre les 2, Affinity Photo, qui propose un abonnement payable une seule fois, la licence vous appartient ensuite à vie.
Ouvrez votre fichier dans le logiciel. Nous allons seulement exporter notre image dans un nouveau format.
Exemple avec Affinity Photo
On va prendre l’exemple avec Affinity Photo mais le procédé est globalement le même quel que soit le logiciel.
On ouvre l’image avec le logiciel ; on clique sur FICHIER > EXPORTER.
On choisit l’extension JPEG ou PNG en fonction du besoin.
On ta pe 1 920 pour la largeur. On appuie sur Entrée et la hauteur s’est corrigée automatiquement : le cadenas est fermé, donc le ratio de l’image est conservé.
On exporte : Et voici la nouvelle image. On lui donne un autre nom pour ne pas écraser le fichier d’origine.
La compression des images
Enfin, l’étape de la compression, qui va grignoter derniers octets superflus et alléger considérablement l'image. Une étape très efficace et donc conseillée.
Il existe sur Mac un logiciel très facile à utiliser : Image Optim. Il s’agit-là tout simplement d’une moulinette : vous n’avez rien à faire, si ce n’est glisser le fichier concerné, le logiciel fait le reste ! Sur PC, vous avez « FileOptimize » par exemple.
D’une image de 3 Mo, on obtient alors une image beaucoup plus légère de 300 Ko
Si vous utilisez un CMS tel que WordPress, sachez qu’il existe des modules qui vont optimiser la taille de vos images à la volée, comme Imagify. Pour plus d’informations et si vous souhaitez un accompagnement spécifique sur ce sujet, n’hésitez pas à contacter notre agence WordPress.
