New Dimensions
--
File Size
--
Scale
--
Redimensionnez les images à des dimensions exactes avec verrouillage du ratio d'aspect et préréglages courants. Tout le traitement se fait dans votre navigateur – rien n’est téléchargé sur un serveur.
Des images correctement dimensionnées sont essentielles pour la vitesse de page et les Core Web Vitals. OneStepToRank surveille vos classements, suit vos concurrents et optimise automatiquement votre stratégie SEO locale.
CommencerChaque plateforme a des exigences spécifiques en matière de dimensions d'image. Utiliser la mauvaise taille signifie que vos visuels soigneusement conçus sont recadrés, étirés ou sous‑échantillonnés d’une manière qui porte atteinte à votre marque. Facebook recommande 1200 x 630 pour les aperçus de liens et 1080 x 1080 pour les publications du fil. Instagram utilise 1080 x 1080 pour les publications carrées, 1080 x 1350 pour le portrait et 1080 x 608 pour le paysage. Les images sur Twitter/X s’affichent au mieux à 1200 x 675 pixels. Obtenir ces dimensions correctement n’est pas optionnel – c’est la différence entre une présence professionnelle et une présence amateur.
Pour les sites web, le principe clé est de servir les images à la taille exacte à laquelle elles seront affichées. Une image affichée à 600 px de large en CSS ne doit pas être un original de 3000 px de large – le navigateur télécharge tout de même le fichier complet avant de le réduire, ce qui gaspille la bande passante et ralentit le chargement de la page. L’exception concerne les écrans Retina, où vous devez servir les images à 2 x la taille d’affichage CSS (soit 1200 px pour un emplacement de 600 px) afin de conserver la netteté sur les écrans à haute densité.
Le développement web moderne nécessite de servir différentes tailles d'image selon les appareils. Un utilisateur de bureau avec un moniteur de 1920 px de large a besoin d’une image différente de celle d’un utilisateur mobile avec un écran de 375 px. Les attributs HTML srcset et sizes vous permettent de définir plusieurs versions d’une image afin que le navigateur choisisse celle qui convient en fonction de la largeur de la fenêtre et du ratio de pixels de l’appareil. Cela implique de créer plusieurs versions de chaque image – généralement à 400 px, 800 px, 1200 px et 1600 px de largeur.
Les écrans Retina (densité de 2 x et 3 x) regroupent deux ou trois fois plus de pixels physiques dans la même surface d’écran. Sans images adaptées aux Retina, les photographies apparaissent floues et molles sur iPhone, iPad, MacBook et la plupart des appareils Android modernes. La solution est simple : redimensionnez vos images à 2 x la taille d’affichage et laissez le CSS les contraindre. Un emplacement d’image de 600 x 400 nécessite une image source de 1200 x 800. Utilisez cet outil pour créer chaque variante de taille, puis compressez‑les avec notre Compresseur d'images pour garder des tailles de fichier gérables.
L’image la plus rapide est la plus petite image qui reste de bonne qualité. Pour les sections hero, visez des images compressées de moins de 200 KB. Pour les images de contenu en ligne, gardez‑les sous 100 KB. Les miniatures doivent être inférieures à 30 KB. Ces objectifs supposent que vous utilisez des formats modernes comme WebP – si vous êtes limité à JPEG, les tailles seront 25‑35 % plus grandes pour une qualité équivalente. Redimensionnez toujours les images à leur taille d’affichage avant de les compresser. Une photographie de 4000 x 3000 compressée à 150 KB sera de moindre qualité qu’une version correctement redimensionnée à 1200 x 900 compressée à la même taille, car la compression doit travailler beaucoup plus fort pour loger plus de pixels dans le même budget de taille de fichier.
La réduction d'échelle préserve bien la qualité car vous consolidez les pixels. L'agrandissement (mise à l'échelle supérieure) réduit la qualité parce que le navigateur doit interpoler de nouveaux pixels qui n'existaient pas dans l'original, ce qui entraîne du flou. Pour de meilleurs résultats, commencez toujours avec la source à la plus haute résolution et réduisez l'échelle. N'agrandissez jamais une petite image en espérant des résultats nets.
Le ratio d’aspect est la relation proportionnelle entre la largeur et la hauteur. Les ratios courants incluent 16 : 9 (écran large), 4 : 3 (standard) et 1 : 1 (carré). Verrouiller le ratio d’aspect garantit que la modification d’une dimension ajuste automatiquement l’autre pour maintenir les proportions, évitant ainsi l’étirement ou le rétrécissement. Déverrouillez‑le uniquement lorsque vous souhaitez intentionnellement un redimensionnement non proportionnel.
Publications Facebook : 1200 x 630. Fil Instagram : 1080 x 1080 (carré) ou 1080 x 1350 (portrait). Twitter/X : 1200 x 675. LinkedIn : 1200 x 627. Pinterest : 1000 x 1500. Les photos de profil sur les plateformes sont généralement de 400 x 400 ou plus. Utiliser les bonnes dimensions garantit que vos images s’affichent sans recadrage inattendu ni perte de qualité.
Les écrans Retina et HiDPI ont une densité de pixels 2‑3 fois supérieure à celle des écrans standards. Une image affichée à 300 x 200 pixels CSS sur un écran Retina 2 x utilise en réalité 600 x 400 pixels physiques. Si votre image ne fait que 300 x 200, elle apparaît floue sur ces écrans. La solution consiste à fournir des images à 2 x la taille d’affichage prévue et à utiliser les attributs CSS width/height pour les contraindre.