Optimiseur d'images Retina pour écrans @2x et haute densité

Les écrans Retina et autres écrans haute densité placent deux ou trois pixels physiques dans chaque pixel CSS. Une image affichée sur 600 pixels de large a donc besoin de 1200 pixels (@2x) ou 1800 pixels (@3x) de vrais détails pour paraître nette ; en dessous, textes et contours semblent mous. Doubler les dimensions quadruple toutefois le nombre de pixels : les images haute densité doivent être compressées avec soin, sinon elles deviennent l'élément le plus lent de la page.

L'optimiseur Retina accepte des images jusqu'à 3840 × 2160 pixels, la résolution d'un écran 4K, et les compresse en qualité 85. Ce réglage plus élevé compte, car le détail est justement la raison d'être des images haute résolution. Les petites images ne sont pas agrandies par défaut : l'agrandissement n'ajoute aucun vrai détail, partez donc d'une source au moins aussi grande que la taille @2x visée.

Comment utiliser Optimiseur d'images Retina (@2x, @3x)

1. Déposez vos images dans la zone d'import, cliquez dessus pour choisir des fichiers ou collez une image avec Ctrl+V. Cette page accepte les fichiers JPG, PNG, WebP, GIF et BMP, plusieurs à la fois et jusqu'à 80 Mo chacun.
2. Calculez la largeur cible : largeur d'affichage × 2 pour @2x ou × 3 pour @3x. Ouvrez Resize, gardez Max et saisissez cette largeur, par exemple 1200 pour un emplacement de 600 pixels.
3. Sous More options, nommez les fichiers {name}@2x ou {name}-{w}w pour identifier chaque densité, puis traitez à nouveau les mêmes images avec la largeur @1x si vous voulez aussi les versions standard.
4. Contrôlez le résultat avec le curseur avant/après : faites glisser le séparateur sur l'aperçu et lisez en dessous les nouvelles dimensions, le poids, la qualité et le pourcentage gagné. Chaque modification des réglages retraite automatiquement toutes les images.
5. Téléchargez une image seule ou utilisez « Download all (ZIP) » pour tout le lot. Sous « More options », vous pouvez aussi fixer une valeur DPI et un modèle de nom de fichier avec {name}, {w} et {h}.

Bien utiliser les images haute densité

• Servez les deux densités. En HTML, listez les fichiers dans srcset avec des descripteurs 1x et 2x (ou de largeur) pour que les écrans standard téléchargent le fichier le plus léger.
• La compression se cache bien en @2x. Chaque pixel étant minuscule sur un écran Retina, une qualité de 75 à 80 paraît souvent identique ; le curseur avant/après montre si 85 est vraiment nécessaire.
• Choisissez des formats modernes. Le WebP ou l'AVIF gardent les gros fichiers @2x raisonnables ; l'optimiseur WebP est préréglé pour cela.
• Sachez quand ne pas passer en 2x. Pour les téléphones, l'optimiseur mobile tient déjà compte des écrans denses, et les images de page classiques relèvent de l'optimiseur pour site web.

Si une image source est plus petite que la taille @2x calculée, le résultat garde simplement la taille de la source. Dans ce cas, servez-la uniquement comme image standard ou créez d'abord une source plus grande.

Privé, gratuit et rapide

Tout se passe dans votre navigateur : les images sont décodées, redimensionnées et réencodées sur votre propre appareil, rien n'est envoyé sur un serveur. Pas d'inscription, pas de filigrane, pas de limite quotidienne, et les données de localisation et d'appareil photo (EXIF) sont retirées de chaque résultat.