Redimensionner les images en ligne : le piège de la rétine et ce que la toile jette tranquillement

Pendant environ six mois, chaque vignette de ce blog était légèrement douce. Pas cassé. Pas évidemment mal. Juste… flou, de la façon dont vous remarquez du coin de l'œil, puis vous dissuadez de vous en rendre compte.

La mise en page indiquait que la sous-femme était de 600 pixels de large. J'ai donc exporté des vignettes à 600 pixels de large. C'est exactement la mauvaise chose à faire, et il m'a fallu un temps embarrassant pour comprendre pourquoi, car sur mon moniteur, il avait l'air bien et sur mon téléphone, cela ressemblait à une photocopie d'une photocopie.

La raison en est qu'un pixel CSS n'est pas un pixel de l'appareil. Un téléphone moderne ou un ordinateur portable Retina contient deux ou trois pixels physiques dans chaque pixel CSS - c'est ce que window.devicePixelRatio rapports. Ainsi, mon image de 600 pixels était étendue sur 1 200 pixels de verre, et le navigateur inventait la différence. Vous ne pouvez pas inventer des détails qui ne figurent pas dans le fichier. Le correctif était d'exporter à 1 200 ans et de laisser CSS l'afficher à 600 ans.

C'est l'erreur autour de ce guide, ainsi que les trois ou quatre autres qui rendent les images redimensionnées pires qu'elles ne le devraient. le Outil de redimensionnement d'image Sur Toolz.dev effectue le travail dans votre navigateur - le fichier ne quitte jamais votre machine - mais l'outil est la partie la plus facile. Savoir quels nombres taper est la partie qui compte réellement.

tl;dr : exporter à 2× la taille de l'écran Pour les écrans Retina (un emplacement de 600 pixels nécessite un fichier 1 200 px) et ne jamais évoluer. en l'air — Vous ne pouvez pas ajouter de détails qui n'ont jamais été capturés. Verrouillez le rapport d'aspect, sauf si vous voulez vraiment déformer l'image. redimensionner avant Vous compressez, pas après. Utilisez le Outil de redimensionnement d'image Pour définir des dimensions, le Calculateur de rapport d'aspect Pour travailler sur le côté manquant, et le Compresseur d'images pour réduire la taille du fichier par la suite. Tout fonctionne côté client. Une mise en garde à connaître à l'avance : le redimensionnement redimensionne l'image, donc Toutes les métadonnées EXIF sont supprimées - Idéal pour la vie privée, parfois surprenant.

Pourquoi mes images semblent-elles floues après le redimensionnement ?

Neuf fois sur dix, c'est l'une des trois choses, et elles sont toutes réparables.

Vous avez mis à l'échelle. L'agrandissement d'une photo 400 × 300 à 1600 × 1200 demande au logiciel de produire douze pixels d'informations pour chacun d'eux. Il le fait en interpolant - en faisant la moyenne des voisins pour deviner ce qui appartient entre les deux - et le résultat est doux, car le détail n'existe vraiment pas. Rien de moins qu'un modèle génératif ne l'invente en retour. Commencez toujours à partir du plus grand original que vous avez et réduisez la réduction. Le duvet est presque sans perte; vers le haut est une supposition.

Vous avez ignoré le rapport de pixels. L'erreur que j'ai décrite ci-dessus. Si la boîte CSS est de 600 × 400 et que l'écran de l'utilisateur est 2 ×, le navigateur a besoin de 1 200 × 800 pixels réels pour le rendre nette. Exportez à 2 × et laissez le navigateur s'adapter à la baisse, la réduction d'échelle dans le navigateur a fière allure ; la mise à l'échelle ressemble à de la boue.

Quelque chose d'autre l'a compressé après vous. Vous avez redimensionné avec soin, puis téléchargé sur une plate-forme qui a re-codé votre image à son propre paramètre de qualité. Chaque plateforme sociale fait cela. Vous ne pouvez pas l'arrêter, mais vous pouvez le réduire : téléchargez près des dimensions cibles de la plate-forme afin qu'il fasse le moins de travail possible, et remettez-lui un fichier déjà propre plutôt qu'il doit le réparer.

Que se passe-t-il réellement lorsque vous redimensionnez une image ?

Cela vaut la peine de comprendre, car cela explique la plupart des surprises.

Une image raster est une grille de pixels. Rendre cette grille plus petite signifie décider de ce qu'un novice Le pixel doit être lorsqu'il se situe entre plusieurs anciens. Cette décision s'appelle rééchantillonnage, et l'algorithme compte :

• voisin le plus proche — Saisissez le pixel d'origine le plus proche. Bords rapides, en blocs et déchiquetés. Corrigez uniquement le pixel art, où le blocage est le point.
• bilinéaire — Moyenne les quatre pixels les plus proches. Lisse, un peu moelleux.
• bicubique — Pesez seize pixels environnants avec une courbe cubique. Plus nette que bilinéaire, la valeur par défaut sensible dans la plupart des logiciels de bureau.
• lanczos — Un filtre Sinc fenêtré sur un plus grand quartier. La meilleure qualité pour la réduction d'échelle, la plus lente, peut produire une faible sonnerie sur des bords à fort contraste.

Le redimensionnement du navigateur de canevas se situe dans la gamme bilinéaire-bicubique et ne vous permet pas de choisir précisément - vous ne pouvez demander que la qualité du lissage, et la valeur par défaut de la spécification HTML pour cet indice est "low". C'est très bien pour la grande majorité du travail sur le Web et c'est pourquoi l'outil Toolz.dev est instantané.

Il y a une astuce pour les utilisateurs puissants qui mérite d'être connue. Lorsque vous réduisez la réduction d'un facteur important en une seule étape - disons 4 000 px à 400 px, une réduction de 10 × – certaines implémentations de navigateur échantillonnent de manière trop peu étendue et vous obtenez un alias : des bords scintillants, des motifs de moiré en tissu ou en brique et des détails perdus. La solution de contournement est Échelle de réduction progressive: Réduire de moitié (4 000 → 2 000 → 1 000 → 500 → 400) et chaque étape ne jette que la moitié des pixels. Si une grande réduction est plus croustillante que vous ne le croyez, c'est la raison, et le faire en deux passes le corrigera.

Que fait réellement l'outil de redimensionnement de Toolz.dev ?

Je préfère vous dire exactement que vous le saurez plus tard. C'est un ressize sur toile :

1. Votre fichier est lu dans le navigateur via une URL d'objet. c'est jamais téléchargé — Il n'y a pas de serveur sur lequel le télécharger.
2. Il est dessiné sur un canevas HTML aux dimensions cibles.
3. Le canevas est réencodé en PNG, JPEG ou WebP (La qualité par défaut est de 0,9 pour les formats avec perte).
4. Vous téléchargez le résultat.

Trois conséquences en découlent, et une seule d'entre elles est dans la plupart des outils, une copie marketing :

Les métadonnées EXIF sont supprimées. Un réencodage de canevas produit un tout nouveau fichier. Modèle de caméra, objectif, temps de capture et, surtout, Coordonnées GPS Ne survivez pas. Pour tout ce que vous publiez, c'est une fonctionnalité de confidentialité et une véritable : les photos directement d'un téléphone contiennent régulièrement les coordonnées exactes de l'endroit où elles ont été prises. si vous besoin L'Exif (pour un portfolio de photographie, disons), redimensionne avec un outil qui le conserve explicitement. Si la source est sortie directement d'une pellicule, regardez l'orientation de sortie avant de publier.

Les GIF animés sortent d'un seul cadre. Le canevas dessine un cadre. Il n'y a pas de moyen honnête de décrire cela comme autre chose qu'une limitation - si vous devez redimensionner une animation et la faire avancer, ce n'est pas l'outil. (Je dirais plutôt que vous le laisserez simplement après le téléchargement.)

Le verrouillage du rapport d'aspect signifie "ajuster à l'intérieur", et non "s'étirer". Si vous entrez à la fois une largeur et une hauteur avec le rapport verrouillé, l'image est mise à l'échelle pour s'adapter à l'intérieur cette boîte tout en gardant ses proportions. Ainsi, une photo 16:9 avec un objectif 1000×1000 sort 1000×563, pas 1000×1000. Il ne déformera jamais votre image, mais il ne la recadrera pas non plus pour remplir le carré. Si vous avez besoin d'un carré exact d'un rectangle, vous avez besoin d'un recadrage, pas d'un redimensionnement. Cette distinction confond constamment les gens et cela vaut la peine d'être précis.

Comment fonctionnent réellement les rapports d'aspect ?

Un rapport d'aspect est juste la largeur ÷ hauteur, exprimée en paire. Les calculs sont simples et vous devriez pouvoir le faire dans votre tête, car cela empêche l'erreur de redimensionnement la plus courante : écrasement.

Pour trouver le côté manquant, gardez le rapport constant :

new_height = new_width × (original_height ÷ original_width)

Une photo 4000×3000 (4:3) redimensionnée à 1 200 deviré devient 1 200 × (3 000/4 000) = 900 grand. Tapez plutôt 1200 et 800, et vous avez écrasé une image 4:3 en 3:2 - les visages deviennent plus étroits, les cercles deviennent ovales et tout le monde peut dire que quelque chose ne va pas même s'ils ne peuvent pas dire quoi. le Calculateur de rapport d'aspect Le fait pour vous et réduit le rapport pour vous aussi.

Voici les ratios qui continuent d'être, avec les mathématiques vérifiées plutôt que copiées :

Une note honnête sur cette ligne "1,91:1", car cela me dérange à chaque fois : 1 200 × 628 n'est pas réellement 1,91 : 1. Réduit correctement C'est 300:157 ou 1.911. L'industrie l'arrète et tout le monde hausse les épaules. Cela n'a pas d'importance dans la pratique - mais si vous vous êtes déjà demandé pourquoi 1200×628 ne se divise pas en quoi que ce soit de propre, c'est pourquoi.

Les spécifications de pixels de la plate-forme changent ; les ratios ne changent presque jamais. Plutôt que de faire confiance à une table de dimensions dans un article de blog (y compris celle-ci) pour une campagne qui compte, vérifiez la propre spécification actuelle de la plate-forme, puis utilisez le rapport ci-dessus pour l'atteindre. La forme est stable même lorsque les chiffres dérivent.

Quelle taille de Web les images Web devraient-elles réellement être ?

Pour un site Web que vous contrôlez - où vous optimisez la plus grande peinture de contenu plutôt que pour le téléchargement de quelqu'un d'autre - le raisonnement est différent et meilleur.

Commencez par la zone CSS, pas à partir de l'image. Découvrez la largeur réelle de l'image rendue dans votre mise en page. pas la largeur maximale du conteneur — le Images largeur, au point d'arrêt qui vous intéresse. Puis doublez-le pour la rétine. C'est la taille de votre exportation. Tout ce qui est au-delà, ce sont les octets que vous payez pour être expédiés et l'utilisateur paie pour télécharger, pour un avantage visible.

Servir plus d'une taille. Un seul fichier 2400px est inutile pour un téléphone qui le rendra à 380 pixels CSS. srcset existe précisément pour cela :

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

Le navigateur choisit le plus petit fichier qui sera toujours net sur cet appareil. Et toujours réglé width et height Attributs : ils laissent le navigateur réserver l'espace avant le chargement de l'image, ce qui empêche la page de sauter et de détruire votre score de décalage de mise en page cumulative.

Redimensionnez d'abord, compressez ensuite. C'est l'ordre que les gens reviennent. Compression d'une image 4000px et à ce moment- Le redimensionner à 800 px signifie que vous avez dépensé des efforts pour optimiser les pixels que vous alliez jeter, et vous avez probablement intégré des artefacts de compression dans les pixels que vous conserviez. Coupez les dimensions en premier, puis compressez ce qui reste avec le Compresseur d'images. Les dimensions sont presque toujours la plus grande victoire de toute façon : la réduction de moitié des deux côtés d'une image supprime 75 % de ses pixels avant qu'un compresseur ne le touche. Je vais plus profondément là-dessus dans le Guide de compression d'images.

Choisissez ensuite le bon format. En gros : JPEG pour les photos, PNG lorsque vous avez besoin de transparence ou de texte et de lignes nets, Webp pour pratiquement tout sur le Web, car il bat les deux à une qualité équivalente. le Convertisseur de format d'image gère cette étape, et le Présentation des outils d' Couvre la façon dont les pièces s'emboîtent.

Comment redimensionner une image sur toolz.dev ?

1. Ouvrez le Outil de redimensionnement d'image. Aucun compte, rien à installer.
2. Déposez votre image. Il se charge directement dans le navigateur. Regardez l'onglet Réseau si vous voulez que rien n'est envoyé, c'est un chèque qui vaut la peine d'être exécuté sur n'importe quel outil d'image dans lequel vous collez des photos privées.
3. Entrez vos dimensions cibles. Tapez la largeur ; avec le rapport verrouillé, la hauteur suit. N'oubliez pas de doubler pour Retina si c'est pour un écran.
4. Choisissez votre format de sortie — PNG, JPEG ou WebP.
5. Télécharger. Généré dans votre navigateur, directement sur votre disque.

Si vous produisez la même image à plusieurs tailles, travaillez à partir du plus grand original à chaque fois. Ne redimensionnez pas l'exportation de 1 200 px à 600 px, revenez à l'original et exportez 600 à partir de cela. Chaque réencodage d'un fichier déjà perdu aggrave les dommages, de la même manière qu'une photocopie d'une photocopie se dégrade. C'est une petite discipline qui apparaît dans le résultat final.

Questions fréquentes

Puis-je redimensionner une image sans perdre de qualité ?

La réduction de l'échelle ne perd presque rien de perceptible - vous ignorez les données de pixel dont vous n'avez plus besoin, et le résultat à l'écran semble net. La mise à l'échelle perd toujours de la qualité, car le logiciel doit interpoler des pixels qui n'ont jamais été capturés, produisant de la douceur ou des artefacts visibles. Redimensionnez toujours à partir du plus grand original que vous avez plutôt que d'un petit.

Quelle taille dois-je exporter pour les écrans Retina ?

Exportation à 2 × la taille à laquelle l'image est affichée. Si votre mise en page rend une image dans une boîte 600 × 400, exportez-la à 1 200 × 800 afin qu'elle reste nettes sur les appareils dotés d'un devicePixelRatio sur 2. Aller au-delà de 2× vaut rarement les octets supplémentaires, car l'avantage visible est minime même sur les écrans 3×.

Le redimensionnement d'une image supprime-t-il les données EXIF ?

Oui, lorsque le redimensionnement se produit via un canevas HTML, comme c'est le cas sur Toolz.dev, l'outil re-encode l'image dans un nouveau fichier et les métadonnées EXIF ne sont pas reportées. Cela signifie que les détails de la caméra, le temps de capture et les coordonnées GPS sont tous supprimés. Pour la publication, il s'agit d'un avantage en matière de confidentialité ; si vous avez besoin d'Exif Preserved, utilisez un outil qui le prend explicitement en charge.

Puis-je redimensionner un GIF animé et conserver l'animation ?

Pas avec un resizer sur toile. Canvas capture une seule image, la sortie est donc une image fixe au format PNG, JPEG ou WebP. Redimensionner une animation tout en conservant toutes ses images nécessite un outil de traitement GIF dédié.

Comment redimensionner une image à une taille de fichier spécifique en Ko ?

La taille du fichier n'est pas quelque chose que vous définissez directement - il ne dépend pas des dimensions, du format et de la qualité de compression. Travailler en arrière : réduisez les dimensions à l'affichage de l'image, exportez en tant que WebP ou JPEG plutôt que PNG pour les photographies, puis réduisez la qualité et vérifiez à nouveau la taille de la sortie. Atteindre une cible dure comme "moins de 100 Ko" est généralement deux ou trois passes de cette boucle, pas une.

Comment redimensionner une image sans la recadrer ?

Gardez le rapport d'aspect verrouillé. Lorsque la largeur et la hauteur restent dans leur proportion d'origine, chaque pixel de la trame est préservé et seule l'échelle change. Le recadrage ne devient inévitable que lorsque la forme cible diffère de la forme de la source - installer une photo 3:2 dans un emplacement d'avatar 1:1 signifie soit boxer dans l'espace vide, soit couper une partie de l'image.

Dois-je redimensionner ou compresser mes images en premier ?

Redimensionnez d'abord, puis compressez. La réduction des dimensions supprime les pixels, car la moitié de la largeur et de la hauteur en éliminent 75 %, ce qui est presque toujours une victoire de taille de fichier plus grande que la compression seule. Compresser avant de redimensionner les déchets, vous êtes sur le point de supprimer les pixels et de pouvoir les intégrer dans ceux que vous conservez.

Quelle différence entre redimensionner et recadrage ?

Le redimensionnement modifie les dimensions de l'image entière, en conservant tout son contenu. Le recadrage coupe une partie de l'image pour modifier son cadrage ou son rapport d'aspect. Si vous avez besoin d'un carré d'une photo rectangulaire, le redimensionnement avec le rapport d'aspect verrouillé s'adaptera à l'image à l'intérieur du carré plutôt que de la remplir - vous avez besoin d'un recadrage pour remplir le cadre.

Existe-t-il une limite de taille de fichier pour redimensionner les images dans le navigateur ?

Il n'y a pas de limite imposée par le serveur, car rien n'est téléchargé - le plafond pratique est la mémoire disponible de votre appareil. Les photos typiques, y compris les fichiers de gros appareils photo, redimensionnent instantanément. Des images extrêmement grandes (par exemple, des analyses à très haute résolution) peuvent prendre un moment ou, sur un téléphone contraint de mémoire, ne pas se charger.

Pourquoi mon image semble-t-elle toujours floue après avoir redimensionné aux bonnes dimensions ?

Vérifiez trois choses dans l'ordre : si vous avez opté pour un original plus petit (non corrigable – trouver une source plus grande), si vous avez pris en compte le rapport pixel de l'appareil (un fichier de 600 px sur un écran 2 × doit être de 1 200 px) et si la plate-forme que vous avez téléchargée pour recompresser ensuite l'image. Le troisième est courant sur les réseaux sociaux et est mieux atténué en téléchargeant les dimensions recommandées par la plate-forme.