Déposez vos photos et graphismes pour obtenir des copies WebP, AVIF et JPG aux largeurs dont vos pages ont besoin, sans données d'appareil photo. Voyez de combien chacune est plus légère, téléchargez-les toutes dans un .zip, et collez le code srcset. Vos images ne quittent jamais cet appareil. C'est gratuit.
Comment optimiser des images pour un site web, étape par étape
- Choisissez des images ou déposez-les sur la page. Les fichiers JPG, PNG, WebP, AVIF et GIF fonctionnent.
- Cochez les Largeurs voulues, de 480 à 2560. Les images ne sont jamais agrandies au-delà de l'original.
- Choisissez les Formats : AVIF, WebP, un JPG de secours, et PNG pour les images transparentes.
- Réglez la Qualité, l'attribut sizes et le Dossier d'images sur votre site, et appuyez sur Refaire avec ces réglages si vous les changez.
- Comparez Avant et Après, puis appuyez sur Tout télécharger (.zip).
- Copiez le code picture de chaque image et collez-le dans votre page.
Pourquoi plusieurs largeurs ?
Un téléphone n'a pas besoin de la même photo de 2000 pixels qu'un grand écran. Avec srcset, vous listez plusieurs largeurs et le navigateur choisit la plus petite qui reste nette sur cet écran. L'attribut sizes lui indique la largeur à laquelle l'image sera affichée, pour qu'il puisse choisir avant que la page ait fini sa mise en page.
AVIF, WebP ou JPG ?
L'AVIF est généralement le plus léger, le WebP est juste derrière et fonctionne dans tous les navigateurs actuels, et le JPG est le repli sûr. Le code picture les propose dans cet ordre : chaque navigateur prend donc le meilleur qu'il comprend. Les images transparentes reçoivent un repli PNG au lieu du JPG pour garder la transparence. Si un format est grisé, ce navigateur ne peut pas le créer ; les autres formats fonctionnent quand même.
Ce qui est supprimé
Chaque image est redessinée et enregistrée à neuf : les détails de l'appareil photo, la position GPS, l'historique de retouche et les profils colorimétriques intégrés sont donc omis. Les photos prises à l'horizontale sont d'abord redressées. Une qualité d'environ 75 à 82 est un bon équilibre pour les photos ; les graphismes aux bords nets rendent parfois mieux un peu plus haut.
Pourquoi c'est important
- Des images plus petites font charger les pages plus vite, surtout sur téléphone.
- Les pages plus rapides sont plus faciles à utiliser et ont tendance à mieux se classer dans la recherche.
- Retirer les données de localisation protège la vie privée des personnes et des lieux de vos photos.
- Des images à la bonne taille économisent de la bande passante pour vous et vos visiteurs.
Qui l'utilise
Blogueurs, commerçants, photographes et développeurs qui veulent des images nettes et rapides à charger. Pour une seule image à une taille de fichier donnée, utilisez le compresseur d'images, et pour changer de type de fichier, le convertisseur d'images.
Questions
Quelle qualité choisir ?
Environ 75 à 82 est un bon équilibre pour les photos. Augmentez un peu pour les graphismes aux bords nets.
Ai-je besoin de l'AVIF si j'ai du WebP ?
L'AVIF est généralement plus léger, et le code picture bascule sur WebP et JPG pour les navigateurs qui ne peuvent pas l'afficher.
Mes images sont-elles envoyées ?
Non. Elles sont traitées dans votre navigateur.