Téléchargez une photo de paysage sur une publication Instagram, une photo de téléphone haute comme image de lien LinkedIn, ou une capture d'écran sur X, et la plateforme décide tranquillement quelle partie de celle-ci les gens voient Elle correspond à l'image à l'une des rares formes fixes et coupe tout ce qui ne rentre pas, et elle coupe du milieu vers l'extérieur Si le sujet est au milieu, cela fonctionne Si le sujet est un visage près du haut du cadre, un produit à gauche, ou un titre le long du bas, la plateforme l'affleure.
Le correctif est de recadrer l'image vous-même, à la forme exacte souhaitée par le flux, et de choisir quelle partie survit. Ce guide couvre les tailles et les rapports d'aspect affichés par les plates-formes principales, la géométrie d'une culture, comment choisir un point focal, ce que le recadrage fait à la qualité et à la taille du fichier, et comment éviter le résultat doux et amélioré qui surprend les gens. Les exemples travaillés utilisent le gratuit Croppeur d'images de médias sociaux sur Toolz, qui fait tout le travail côté client.
tl;dr : Pour recadrer une image pour les réseaux sociaux, choisissez le rapport hauteur/largeur cible pour la plateforme et le placement (par exemple 1080 x 1350 pour une publication de portrait Instagram, 1200 x 630 pour un aperçu de lien, 1600 x 900 pour une image de publication X), prenez le plus grande région de cette forme qui rentre à l'intérieur de votre photo, ancrez-la sur la partie qui compte, puis adaptez-la à la taille exacte du pixel Une photo de téléphone 4032 x 3024 recadrée à 4 :5 conserve 60 % de sa surface ; recadrée à 16 :9 elle garde 75 %. recadrage d'images sur les réseaux sociaux fait cela sur un canevas de votre navigateur avec une grille focale à neuf points, gratuit, sans inscription, sans téléchargement.
Que fait un recadreur d'images sur les réseaux sociaux ?
Un recadreur d'images sur les réseaux sociaux coupe une photo au format d'image affiché par une plate-forme et la met à l'échelle à cette plate-forme et à la taille de pixel n°39 ; la plate-forme n'a donc plus rien à recadrer. Deux opérations distinctes se produisent et cela aide à les séparer :
- Cultiver. Choisissez un rectangle à l'intérieur de l'original qui a la forme cible Les pixels à l'extérieur sont jetés Les pixels à l'intérieur sont intacts.
- Échelle. Redimensionner ce rectangle aux dimensions cibles, telles que 1080 x 1350 C'est là que la qualité peut changer, car l'image est rééchantillonnée.
Un éditeur d'images générique peut faire les deux, mais il vous fait trouver le ratio, dessiner la boîte à la main et se souvenir de la taille de sortie Un recadreur dédié connaît les tailles, dessine la plus grande boîte valide automatiquement, et vous permet de la déplacer en un clic La version Toolz vous indique également quel est le coût de la récolte avant que vous téléchargiez : combien de la zone d'origine survit et si le résultat a été réduit ou augmenté.
Quelles tailles d'image les principales plateformes utilisent-elles ?
Chaque réseau restitue les images du flux à un petit ensemble de rapports d'aspect, et tout le reste est ajusté à celui le plus proche Le tableau répertorie les 15 tailles cibles intégrées dans le recadrage, qui reflètent ce que chaque plate-forme affiche actuellement sans recadrer Les plates-formes les révisent de temps en temps, alors traitez-les comme des conseils actuels plutôt que comme une spécification permanente.
| plate-forme | Placement | Taille du pixel | format aspect | où il est utilisé |
|---|---|---|---|---|
| Poste carré | 1080 x 1080 | 1:1 | Le feed-post classique | |
| Portrait postal | 1080 x 1350 | 4:5 | Le flux le plus haut permet, la plupart de l'espace d'écran | |
| Poste paysagère | 1080x566 | 1.91:1 | Le flux le plus large accepte | |
| Histoire ou bobine | 1080x1920 | 9:16 | Plein écran ; gardez le texte clair du haut et du bas 250 px | |
| Fils | Poste carré | 1080 x 1080 | 1:1 | Montré non recadré dans la chronologie |
| Fils | Portrait postal | 1080 x 1350 | 4:5 | Écrans des fils les plus hauts sans recadrage |
| Bluesky | Image d'alimentation | 12h00 x 6h30 | 1,90:1 | Les images larges sont tirées vers 1,91 :1 |
| Bluesky | Image carrée | 1080 x 1080 | 1:1 | Montré non recadré |
| X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X | Poste image | 1600 x 900 | 16:9 | Montré en entier sans robinet |
| X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X | Carte récapitulative | 1200 x 628 | 1.91:1 | Carte d'aperçu de grand lien |
| Poste d'alimentation | 12h00 x 6h30 | 1,90:1 | Également la taille Open Graph | |
| Poste d'alimentation | 1200 x 627 | 1.91:1 | Norme de flux LinkedIn | |
| YouTube | ongle de pouce | 1280 x 720 | 16:9 | Minimum 1280 de large pour le lecteur HD |
| Épingle standard | 1000 x 1500 | 2:3 | Les quilles plus hautes sont déclassées | |
| Open Graph | Aperçu du lien | 12h00 x 6h30 | 1,90:1 | Carte par défaut la plupart des sites et applications de chat s'affichent |
Deux choses ressortent Le " ;1.91 :1" ; famille (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) est une forme avec un arrondi légèrement différent, et c'est la forme de presque chaque aperçu de lien sur le Web. Il remonte au Protocole Open Graph(en), qui définit le og:image les sites de balises sont utilisés pour fournir une image d'aperçu. Et les grands formats diffèrent : Instagram et Threads s'arrêtent à 4 :5, Pinterest passe à 2 :3 et Stories utilisent 9 :16. Une seule récolte ne les sert pas tous.
Si vous définissez également l'image d'aperçu d'une page Web, le Open Graph outil d'aperçu montre à quoi ressemblera cette image 1 200 x 630 une fois partagée.
Comment est calculé le rectangle de recadrage ?
La culture est le plus grand rectangle de la forme cible qui s'insère à l'intérieur de l'image originale Si l'image est plus large que la forme cible, la culture garde toute la hauteur et coupe les côtés Si elle est plus haute, la culture garde toute la largeur et coupe le haut et le bas.
En nombre, pour une source de largeur W et de hauteur H et un rapport cible R (largeur divisée par la hauteur) :
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
Exemple de travail 1 : une photo téléphonique 4032 x 3024 sur un portrait Instagram.
- Ratio source : 4032/3024 = 1,333. Ratio cible : 1080/1350 = 0,8.
- La source est plus large, donc la culture conserve toute la hauteur de 3024 px.
- Largeur de culture : 3024 x 0,8 = 2419,2 px.
- Superficie conservée : 2419,2 /4032 = 0,60, donc 60 % de la photo survit et 40 % est découpée sur les côtés.
- La récolte est ensuite réduite d’environ 2 419 x 3 024 à 1 080 x 1 350.
Exemple de travail 2 : la même photo sur une image de publication X.
- Rapport cible : 1 600 /900 = 1 778. Le rapport source 1,333 est plus petit, de sorte que la culture conserve toute la largeur de 4 032 px.
- Hauteur de culture : 4032 /1,778 = 2268 px.
- Superficie conservée : 2268 / 3024 = 0,75, donc 75 % survivent, avec 756 px taillés en hauteur.
Exemple 3 travaillé : la même photo sur une broche Pinterest.
- Taux cible : 1 000/1 500 = 0,667. Largeur de culture : 3 024 x 0,667 = 2 016 px.
- Superficie conservée : 2016 / 4032 = 50 %. La moitié de la photo est prise.
Ces pourcentages sont ce que l'outil rapporte comme " ; Garder 60 % de l'original" ;, et ils valent la peine d'être lus avant de vous engager Une récolte qui garde la moitié du cadre est une décision de composition, pas une étape de formatage.
Comment choisissez-vous quelle partie de l'image conserver ?
Choisissez le point focal qui tient le sujet, et rappelez-vous qu'il n'a d'importance que le long de l'axe en cours de coupe Le cropper' ; sa grille à neuf points fixe un foyer de 0, 0,5 ou 1 sur chaque axe, ce qui ancre le recadrage au bord gauche, au centre ou au bord droit horizontalement, et au haut, au milieu ou au bas verticalement.
La position est réglée comme ceci, puis serrée pour que la récolte ne s'épuise jamais de l'image :
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
Dans l'exemple travaillé 1, seuls les côtés sont coupés, donc seul le choix horizontal change quelque chose :
| Colonne d'ancrage | Cultures x | Colonnes conservées de la photo |
|---|---|---|
| Gauche | 0 | 0 à 2419 |
| Centre | 806.4 | 806 à 3226 |
| Droite | 1612.8 | 1613 à 4032 |
Les rangées du haut, du milieu et du bas donnent des résultats identiques pour cette culture, car toute la hauteur est déjà conservée C'est un contrôle utile lorsqu'un clic semble ne rien faire : la culture n'est libre de se déplacer que dans une seule direction.
Exemple de travail 4 : une photo de téléphone portrait comme image LinkedIn. Une photo 3024 x 4032 recadrée à 1200 x 627 (rapport 1,914) garde toute la largeur et une bande 3024 /1,914 = 1580 px de hauteur C'est 1580 /4032 = 39 % de la photo Avec l'ancre centrale par défaut la bande va de y = 1226 à y = 2806, ce qui sur un portrait typique de la tête et des épaules est le coffre, pas la réponse Clicking top-center déplace la bande à 1 raison raisonnable tournez-vous la tête 5.
Quelques règles empiriques pour choisir une ancre :
- Personnes : rangée supérieure, puisque les visages se trouvent généralement dans le tiers supérieur d'un cadre.
- Titres ou légendes intégrés dans un graphique : la ligne ou la colonne où se trouve le texte.
- Produits et sujets décentrés : le coin ou le côté correspondant.
- Scènes symétriques et logos centrés : laissez-le au centre.
Le recadrage réduira-t-il la qualité de l'image ?
Le recadrage seul ne réduit pas la qualité, mais l'étape de mise à l'échelle peut. Le rejet des pixels en dehors du cadre laisse les pixels restants exactement tels qu'ils étaient. Le redimensionnement à la taille cible est l'endroit où le résultat peut s'améliorer ou se dégrader.
La réduction est sûre et donne souvent à une photo un aspect plus net, puisque plusieurs pixels sources sont moyennés dans chaque pixel de sortie. Le recadreur dessine avec le paramètre de qualité de lissage élevée de canvas' ; en utilisant le drawImage méthode définie dans le Spécification du canevas HTML WHATWG. La mise à l'échelle ne peut pas ajouter de détails qui n'ont jamais été capturés. La sortie devient plus grande mais pas plus nette et les bords semblent doux.
Exemple de travail 5 : une capture d'écran mise à l'échelle. Une capture d'écran de 800 x 600 recadrée pour une image X post conserve la largeur totale de 800 px et une bande de 450 px de hauteur, 75 % de la surface Cette région de 800 x 450 est ensuite agrandie à 1600 x 900, soit deux fois sa taille dans chaque direction L'outil le dit sous l'aperçu : " ; Upscaled - la source est plus petite que la cible, donc elle aura l'air douce." ;
Le test rapide consiste à comparer la largeur de la culture avec la largeur cible Si la récolte est plus large que la cible, l'image est réduite et aura l'air bien Si elle est plus étroite, elle est agrandie Pour les photos, une caméra téléphonique a presque toujours des pixels à revendre Les captures d'écran, les anciennes images et images enregistrées à partir d'autres publications sont les cas habituels de mise à l'échelle, et le seul vrai correctif est une source plus grande.
Faut-il exporter PNG, JPEG ou WebP ?
Exportez JPEG pour des photographies, PNG pour des captures d'écran, du texte et des graphiques avec des bords durs, et WebP lorsque vous voulez le plus petit fichier et que vous savez que la destination l'accepte Le recadreur par défaut est PNG car il est sans perte, et offre les trois.
| format | Compression | le mieux pour | faire attention |
|---|---|---|---|
| png | Sans perte, comme spécifié par le Norme PNG W3C | Captures d'écran, UI, texte, logos, transparence | Gros dossiers pour photographies |
| jpeg | Lossy, la méthode en UIT-T T.81 | Photographies | Halos autour de texte et de lignes nettes ; pas de transparence |
| Webp | Perte ou sans perte, décrit dans Documentation WebP Google' ;s | Les plus petits fichiers de qualité similaire | Quelques outils plus anciens ne peuvent pas l'ouvrir |
Les exportations JPEG et WebP utilisent un paramètre de qualité de 0,92 sur l'encodeur de toile, ce qui est suffisamment élevé pour que les artefacts de compression soient difficiles à voir sur les photographies. Le fichier téléchargé porte le nom de l'original plus le préréglage, donc team.jpg recadré pour une publication de portrait Instagram alors que JPEG enregistre sous team-ig-portrait.jpeg.
La plupart des plateformes réencodent ce que vous téléchargez de toute façon, donc un PNG sans perte d'une photographie ne survit pas comme PNG une fois posté Il ajoute principalement la taille de téléchargement Pour choisir les formats plus en profondeur, le Guide du convertisseur de format d'image les compare à travers davantage de cas d’utilisation.
Étape par étape : recadrer une image avec l'outil
le recadrage d'images pour les réseaux sociaux a quatre étapes, et le canevas d'aperçu est le même canevas qui produit le fichier, donc ce que vous approuvez est ce que vous téléchargez.
- Ajouter l'image. Déposez un fichier, cliquez pour en choisir un, ou collez une image du presse-papiers avec Cmd+V ou Ctrl+V. L'auditeur de collage est sur toute la page, donc une capture d'écran copiée dans le presse-papiers entre directement sans être enregistrée au préalable La zone de dépôt accepte PNG, JPEG, WebP, GIF ou AVIF, ou tout ce que votre navigateur peut décoder d'autre.
- Choisissez la taille cible. Le menu Taille cible regroupe les 15 préréglages par plate-forme, chacun étiqueté avec sa taille et son rapport de pixels, et affiche une note d'une ligne sur l'endroit où la taille est utilisée. La valeur par défaut est la publication du portrait Instagram.
- Choisissez ce qu'il faut garder. Cliquez sur l'un des neuf points de la grille Keep L'aperçu redessine immédiatement.
- Vérifiez les numéros et téléchargez. Sous l'aperçu, lisez la ligne qui indique le pourcentage conservé, les dimensions de la récolte et si le résultat est réduit ou mis à l'échelle Choisissez PNG, JPEG ou WebP et cliquez sur Télécharger.
Tout fonctionne sur un canevas HTML dans l'onglet du navigateur L'image n'est pas téléchargée, stockée ou enregistrée, et la page continue de fonctionner avec le réseau désactivé Comme chaque outil du site, l'étape de téléchargement vérifie une limite d'utilisation quotidienne.
Quelles erreurs pouvez-vous rencontrer ?
La plupart des problèmes proviennent du format du fichier ou de la taille de la source Les messages sont spécifiques.
- " ; Ce fichier n'est pas une image." ; Le fichier' ; s type ne commence pas par
image/(en anglais), par exemple un PDF ou une vidéo Le message nomme le fichier. - " ; Cette image n'a pas pu être lue Elle peut être corrompue ou dans un format que ce navigateur ne décode pas." ; Le fichier prétend être une image mais le navigateur ne peut pas la décoder Le cas courant est une photo iPhone HEIC dans un navigateur sans support HEIC Convertissez-la en JPG d'abord avec le convertisseur de format d'image.
- " ; Mis à l'échelle - la source est plus petite que la cible, donc elle aura l'air douce." ; Pas une erreur, un avertissement Utilisez un original plus grand si vous en avez un.
- La grille focale semble ne rien faire. La récolte n'est taillée que selon un seul axe, de sorte que seules les ancres le long de cet axe la déplacent.
- Limite journalière atteinte. L'indemnité journalière d'utilisation gratuite a été utilisée.
Un effet de plus vaut la peine d'être connu Parce que la sortie est ré-encodée à partir des pixels du canevas, le fichier téléchargé ne porte aucune métadonnée EXIF : pas de paramètres de caméra, de date de capture ou de localisation GPS Pour les photos publiées publiquement qui est habituellement un gain de confidentialité Le Guide du dissolvant EXIF explique ce que contiennent ces métadonnées et pourquoi elles sont importantes lors du partage de photos.
Recadrer, redimensionner ou tenir sur un fond ?
Le recadrage est l'une des trois façons de donner à une image une forme fixe, et la bonne dépend de la possibilité de perdre une image.
| s'approche | Ce qui se passe | Quand l'utiliser | outil |
|---|---|---|---|
| Culpabilité au rapport | Coupe les bords, garde la forme exacte | Le sujet fait partie du cadre et les bords peuvent disparaître | Croppeur d'images de médias sociaux |
| Ajuster sur une matte | Rétrécit l'image entière sur un fond coloré ou flou | Rien ne peut être coupé, comme une œuvre d'art ou une photo de groupe | Générateur mat |
| Redimensionner uniquement | Modifie les dimensions des pixels, conserve le rapport d'origine | Le rapport est déjà correct, ou la plateforme accepte n'importe quelle forme | Redimensionnement d'images |
| Diviser en diapositives | Coupe une image large en diapositives de carrousel consécutives | Un panorama trop large pour un seul post | Générateur de défilement de carrousel |
Si le problème est la taille du fichier plutôt que la forme, le guide de redimensionnement d'image couvre les dimensions changeantes sans distorsion Lorsqu'une image recadrée est diffusée publiquement et doit porter votre nom, le filigrane ajoute un logo ou une signature dans un coin ou carrelé sur le cadre L'ensemble complet des outils d'image pour publier des vies dans le hub d'outils de médias sociaux.
Pourquoi recadrer avant de télécharger ?
Parce que la culture de la plate-forme est décidée par un logiciel qui ne peut pas voir votre sujet Chaque flux se rend à des ratios fixes, et un téléchargement dans toute autre forme est ajusté automatiquement, généralement en coupant uniformément des deux côtés de la dimension longue Certaines plates-formes, Bluesky parmi elles, appliquent cette culture uniquement sur l'affichage dans la chronologie, donc l'image complète existe mais la plupart des gens ne la voient jamais.
Le recadrage vous ramène d'abord trois décisions : quelle partie du cadre est visible, quelle est la netteté du résultat à la taille exacte de l'affichage et quelle est la taille du fichier. Cela prend quelques secondes par image, et c'est le plus important pour exactement les images qui intéressent les gens : portraits, photos de produits et graphiques avec du texte près d'un bord. Pour ceux-là, recadrer l'image à la taille de la plate-forme avec le point focal sur le sujet, gratuit, pas d'inscription et télécharger un fichier, le flux n'a aucune raison de changer.
