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 d'appareil Un téléphone moderne ou un ordinateur portable rétine contient deux ou trois pixels physiques dans chaque pixel CSS - ce & #39 ; c'est quoi 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 fait le travail dans votre navigateur - le fichier ne quitte jamais votre machine - mais l'outil est la partie facile Savoir quels numéros y 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 pouvez&#39 ; t ajouter un détail qui n'a jamais été capturé Verrouillez le rapport hauteur/largeur à moins que vous ne vouliez véritablement 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 l'intimité, 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. Agrandir une photo de 400.300 à 1600.1200 demande au logiciel de produire douze pixels d'information pour chacun d'entre 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 véritablement. Rien de moins qu’un modèle génératif ne le réinvente. 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 600×400 et que l'écran user&#39 ; s est 2×, le navigateur a besoin de 1200×800 pixels réels pour le rendre net Exportez à 2.1.1.1.2.2.2.2.2.2.2.200.200.200.200.200.200.200.200.2000.2000000.2000000000.2000000000 1000000 1000000000000000000000000000000000000000000000000000 1000000

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 original le plus proche. Arêtes rapides, en blocs et irrégulières. Corriger uniquement pour le pixel art, où le blocage est le point.
• bilinéaire- moyenne des quatre pixels les plus proches Lisse, un peu doux.
• bicubique- peser 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 à zinc vitré sur un quartier plus grand. La meilleure qualité pour la réduction d'échelle, la plus lente, peut produire de légères sonneries sur des bords à contraste élevé.

Le redimensionnement du canevas du navigateur se situe dans la plage bilinéaire à bicubique et ne correspond pas à & #39 ; vous laissez choisir avec précision - vous ne pouvez demander que la qualité de lissage, et la spécification HTML&#39 ; la valeur par défaut de 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 d'utilisateur de puissance qui mérite d'être connue Lorsque vous abaissez d'un facteur important en une seule étape - disons 4000 px jusqu'à 400 px, une réduction de 10. - certaines implémentations de navigateur échantillonnent trop peu et vous obtenez un alias : bords chatoyants, motifs moirés dans le tissu ou la maçonnerie, et les détails fins 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é- là et n°39 ; il n'y a pas de serveur vers 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 toile produit un tout nouveau fichier Modèle de caméra, objectif, temps de capture, et - important - 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. Canvas dessine une image Il n'y a pas de façon honnête de décrire cela comme autre chose qu'une limitation - si vous avez besoin de redimensionner une animation et de la maintenir en mouvement, ce n'est pas l'outil. (I&#39 ; je préfère dire cela clairement plutôt que de vous laisser la découvrir 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 Donc une photo 16 :9 avec une cible de 1000×1000 sort 1000×563, pas 1000×1000. Elle ne déformera jamais votre image - mais elle a aussi gagné&#39 ; pas le recadrer pour remplir le carré Si vous avez besoin d'un carré exact à partir d'un rectangle, vous avez besoin d'un recadrage, pas d'un redimensionnement Cette distinction confond constamment les gens et ça & #39 ; vaut la peine d'être précis à propos de.

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 les 1200 et 800, et vous et le n°39 ; avez écrasé une image 4 :3 en 3 :2 - les visages deviennent plus étroits, les cercles deviennent ovales et tout le monde peut dire quelque chose et le n°39 ; s'en va même s'ils le peuvent et le n°39 ; 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 à ce sujet &quot ;1.91 :1&quot ; ligne, car cela me dérange à chaque fois : 1200×628 n'est pas réellement 1,91 :1. Réduit correctement et #39 ;s 300 :157 ou 1.911. L'industrie le contourne et tout le monde hausse les épaules. Cela n°39 ; cela compte en pratique - mais si vous et n°39 ; Je me suis déjà demandé pourquoi 1200×628 ne fait pas et n°39 ; pas diviser en quelque chose de propre, ça et n°39 ; 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 et le numéro 39 ; optimisez pour Largest Contentful Paint plutôt que pour quelqu'un d'autre et le téléchargeur n° 39 ; - le raisonnement est différent et meilleur.

Commencez par la zone CSS, pas à partir de l'image. Trouvez la largeur réelle de l'image dans votre mise en page. Pas le conteneur&#39 ; s largeur maximale - 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 permettent au navigateur de 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 consacré des efforts à optimiser les pixels que vous étiez sur le point de jeter - et vous avez probablement introduit des artefacts de compression dans les pixels que vous avez conservés. Coupez d'abord les dimensions, 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 une preuve rien&#39 ; s étant envoyé n'importe où - que&#39 ; 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 et #39 ; produisez la même image à plusieurs tailles, travaillez à partir du plus grand original à chaque fois Don&#39 ; t redimensionnez l'exportation 1200 px jusqu'à 600 px - revenez à l'original et exportez 600 à partir de cela Chaque ré-encodage d'un fichier déjà avec perte compense les dégâts, de la même manière qu'une photocopie d'une photocopie se dégrade It&#39 ; 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 d'échelle ne perd presque rien de perceptible - vous et #39 ; en supprimant les données de pixels 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 dont vous disposez plutôt que vers le haut à partir 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 fait via un canevas HTML - comme c'est le cas sur Toolz.dev - l'outil ré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 préservé, 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 - elle ne correspond pas aux dimensions, au format et à la qualité de compression. Travaillez à rebours : réduisez les dimensions à ce sur quoi l'image est réellement affichée, exportez en tant que WebP ou JPEG plutôt qu'en PNG pour les photographies, puis réduisez la qualité et vérifiez à nouveau la taille de sortie. Frapper une cible dure comme &quot ; moins de 100 Ko et quot ; représente généralement deux ou trois passes de cette boucle, pas une.

Comment redimensionner une image sans la recadrer ?

Gardez le rapport hauteur/largeur verrouillé Lorsque la largeur et la hauteur restent dans leur proportion d'origine, chaque pixel du cadre est préservé et seule l'échelle change Le recadrage ne devient inévitable que lorsque la forme cible diffère de la forme source - insérer une photo 3 :2 dans une fente d'avatar 1 :1 signifie soit envoyer l'espace vide en boîte aux lettres, soit couper une partie de l'image.

Dois-je redimensionner ou compresser mes images en premier ?

Redimensionner d'abord, puis compresser La réduction des dimensions supprime carrément les pixels - réduire de moitié la largeur et la hauteur élimine 75 % d'entre eux - ce qui est presque toujours une victoire plus importante que la compression seule. Compresser avant de redimensionner gaspille l'effort sur les pixels que vous êtes sur le point de jeter et peut transformer les artefacts en ceux que vous conservez.

Quelle différence entre redimensionner et recadrage ?

Le redimensionnement modifie les dimensions de l'image entière, en gardant tout son contenu Le recadrage coupe une partie de l'image pour modifier son cadrage ou son rapport hauteur/largeur Si vous avez besoin d'un carré à partir d'une photo rectangulaire, le redimensionnement avec le rapport hauteur/largeur 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 votre appareil&#39 ; s mémoire disponible Les photos typiques, y compris les gros fichiers de caméra, redimensionnent instantanément Les images extrêmement grandes (les analyses à très haute résolution, par exemple) peuvent prendre un moment ou, sur un téléphone à mémoire limitée, 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 fait évoluer à partir d'un original plus petit (non réparable - trouvez une source plus grande), si vous avez pris en compte le rapport de pixels de l'appareil (un fichier 600 px sur un écran 2. doit être 1200 px) et si la plate-forme que vous avez téléchargée pour recompresser l'image par la suite. Le troisième est courant sur les réseaux sociaux et est mieux atténué par le téléchargement sur la plate-forme et dans les dimensions recommandées n°39.