Comment redimensionner correctement ses images

Redimensionnez à la taille d’affichage

La règle de base : ne servez jamais plus grand que ce qui est affiché. Une photo de 4000 px dans un emplacement de 600 px gaspille plus de 80 % des octets. Partez de l’original et réduisez.

Redimensionnez et recadrez avec le redimensionneur et le recadreur gratuits.

Dimensions et retina

Les écrans modernes ont une densité de 2× (parfois 3×). Prévoyez :

• 1× — la taille d’affichage CSS.
• 2× — le double, pour la netteté retina.

Un affichage de 600 px de large nécessite un fichier de 1200 px pour un rendu retina net.

Conservez le ratio d’aspect

Déformer une image pour la faire tenir étire les visages et les logos. Recadrez au ratio cible plutôt que d’écraser. Ratios courants : 16:9, 4:3, 1:1, 3:2.

Images responsives avec srcset

Laissez le navigateur choisir :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="..."
>

Les petits écrans téléchargent le petit fichier ; les grands obtiennent le net.

Redimensionner sans perte

1. Partez du plus grand original.
2. Réduisez, n’agrandissez jamais.
3. Utilisez un bon sous-échantillonnage.
4. Redimensionnez avant la compression finale.
5. Évitez les cycles enregistrer/redimensionner répétés.

Recadrer ou redimensionner

• Redimensionner change les dimensions en conservant tout.
• Recadrer change les dimensions en retirant du contenu — souvent mieux pour des vignettes cohérentes.

Erreurs fréquentes

1. Servir les originaux pleine résolution.
2. Agrandir des petites images (flou).
3. Déformer le ratio.
4. Oublier le retina.
5. Réexporter le même JPEG en boucle.

Faites-le dans votre navigateur

Le redimensionneur gère dimensions et exports retina, et le compresseur termine le travail — localement, rien n’est uploadé.