Carica una foto di paesaggio su un post di Instagram, una foto di telefono alto come immagine di collegamento LinkedIn o uno screenshot su X e la piattaforma decide silenziosamente quale parte di essa vedono le persone Adatta l'immagine a una delle poche forme fisse e rifiniture che non si adattano, e si rifinisce dal centro verso l'esterno Se il soggetto è nel mezzo, funziona Se il soggetto è un volto vicino alla parte superiore del telaio, un prodotto a sinistra o un titolo lungo il fondo, la piattaforma lo ritaglia via.
La correzione consiste nel ritagliare l'immagine da soli, nella forma esatta che il feed desidera e scegliere quale parte sopravvive Questa guida copre le dimensioni e le proporzioni visualizzate dalle piattaforme principali, la geometria di un ritaglio, come scegliere un punto focale, cosa fa il ritaglio per la qualità e le dimensioni del file e come evitare il risultato morbido e ingrandito che cattura le persone Gli esempi lavorati utilizzano il free Cropper di immagini di social media su Toolz, che fa l'intero lavoro lato cliente.
tl; dr: Per ritagliare un'immagine per i social media, scegli le proporzioni target per la piattaforma e il posizionamento (ad esempio 1080 x 1350 per un post ritratto di Instagram, 1200 x 630 per un'anteprima del collegamento, 1600 x 900 per un'immagine post X), prendi la regione più grande di quella forma che si adatta alla tua foto, ancorala sulla parte che conta, quindi scalala alla dimensione esatta dei pixel Una foto del telefono 4032 x 3024 ritagliata a 4:5 mantiene il 60% della sua area; ritagliata a 16:9 mantiene il 75%. il ritaglia immagine sui social media lo fa su un canvas nel tuo browser con una griglia focale a nove punti, gratuita, senza iscrizione, senza caricamento.
Cosa fa un cropper di immagini sui social media?
Un ritaglio di immagini sui social media taglia una foto in base alle proporzioni visualizzate da una piattaforma e la scala in base alla dimensione dei pixel di quella piattaforma & #39; s, quindi la piattaforma non ha più nulla da ritagliare. Si verificano due operazioni separate e aiuta a tenerle separate:
- Crop. Scegli un rettangolo all'interno dell'originale che ha la forma del bersaglio I pixel al suo esterno vengono scartati I pixel al suo interno non vengono toccati.
- Scale. Ridimensionare quel rettangolo alle dimensioni target, ad esempio 1080 x 1350 È qui che la qualità può cambiare, perché l'immagine viene ricampionata.
Un editor di immagini generico può fare entrambe le cose, ma ti fa trovare il rapporto, disegnare la scatola a mano e ricordare le dimensioni dell'output Un cropper dedicato conosce le dimensioni, disegna automaticamente la casella valida più grande e ti consente di spostarla con un clic La versione Toolz ti dice anche quanto costa il raccolto prima di scaricare: quanta parte dell'area originale sopravvive e se il risultato è stato ridotto o aumentato.
Quali dimensioni di immagine utilizzano le principali piattaforme?
Ogni rete esegue il rendering delle immagini di feed con un piccolo set di proporzioni e qualsiasi altra cosa è adattata a quella più vicina. La tabella elenca le 15 dimensioni target integrate nel cropper, che riflettono ciò che ciascuna piattaforma attualmente visualizza senza ritagliare. Le piattaforme le rivedono di tanto in tanto, quindi trattale come una guida attuale piuttosto che come una specifica permanente.
| tribuna | Posizionamento | Dimensione pixel | rapporto di aspetto | dove si usa |
|---|---|---|---|---|
| Posta quadrata | 1080x1080 | 1:1 | Il classico feed post | |
| Ritratto post | 1080x1350 | 4:5 | Più alto il feed consente, la maggior parte dello spazio sullo schermo | |
| Posta paesaggistica | 1080x566 | 1.91:1 | Il feed più ampio accetta | |
| Storia o rullo | 1080x1920 | 9:16 | Schermo intero; mantenere il testo libero dalla parte superiore e inferiore di 250 px | |
| Filati | Posta quadrata | 1080x1080 | 1:1 | Mostrato senza ritagli nella sequenza temporale |
| Filati | Ritratto post | 1080x1350 | 4:5 | Espositori Threads più alti senza ritaglio |
| Bluesky | Immagine feed | 1200x630 | 1,90:1 | Le immagini ampie vengono tirate verso 1,91:1 |
| Bluesky | Immagine quadrata | 1080x1080 | 1:1 | Mostrato non ritagliato |
| X | Pubblica immagine | 1600x900 | 16:9 | Mostrato per intero senza un rubinetto |
| X | Scheda riepilogativa | 1200x628 | 1.91:1 | Scheda di anteprima di grande collegamento |
| Feed post | 1200x630 | 1,90:1 | Anche la dimensione Open Graph | |
| Feed post | 1200x627 | 1.91:1 | Standard di feed LinkedIn | |
| YouTube | unghia del pollice | 1280x720 | 16:9 | Minimo 1280 di larghezza per il lettore HD |
| Perno standard | 1000x1500 | 2:3 | I perni più alti sono in ribasso | |
| Open Graph | Anteprima link | 1200x630 | 1,90:1 | Scheda predefinita la maggior parte dei siti e delle app di chat vengono visualizzati |
Due cose si distinguono La & quot;1.91:1" famiglia (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) è una forma con arrotondamento leggermente diverso, ed è la forma di quasi ogni anteprima di collegamento sul web Risale al __PROtocollo Open Graph, che definisce il og:image i siti di tag utilizzano per fornire un'immagine di anteprima. E i formati alti differiscono: Instagram e Thread si fermano alle 4:5, Pinterest va alle 2:3 e le storie usano le 9:16. Un raccolto non serve tutti.
Se si sta anche impostando l'immagine di anteprima per una pagina web, il Open Graph strumento di anteprima mostra come apparirà quell'immagine 1200 x 630 una volta condivisa.
Come si calcola il rettangolo di ritaglio?
Il ritaglio è il rettangolo più grande della forma target che si inserisce all'interno dell'immagine originale Se l'immagine è più larga della forma target, il ritaglio mantiene l'intera altezza e taglia i lati Se è più alto, il ritaglio mantiene l'intera larghezza e taglia la parte superiore e inferiore.
In numeri, per una sorgente di larghezza W e altezza H e un rapporto target R (larghezza divisa per altezza):
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)
Esempio 1 funzionante: una foto del telefono 4032 x 3024 su un post di ritratto di Instagram.
- Rapporto sorgente: 4032/3024 = 1.333. Rapporto obiettivo: 1080/1350 = 0,8.
- La fonte è più ampia, quindi il raccolto mantiene l'intera altezza di 3024 px.
- Larghezza del raccolto: 3024 x 0,8 = 2419,2 px.
- Area mantenuta: 2419,2 / 4032 = 0,60, quindi il 60% della foto sopravvive e il 40% viene tagliato dai lati.
- Il raccolto viene quindi ridotto da circa 2419 x 3024 a 1080 x 1350.
Esempio 2 funzionante: la stessa foto di un'immagine X post.
- Rapporto target: 1600 /900 = 1,778. Il rapporto sorgente 1.333 è più piccolo, quindi il raccolto mantiene l'intera larghezza di 4032 px.
- Altezza del raccolto: 4032 / 1,778 = 2268 px.
- Superficie mantenuta: 2268 / 3024 = 0,75, quindi sopravvive il 75%, con 756 px tagliati dall'alto.
Esempio 3 funzionante: la stessa foto su un pin Pinterest.
- Rapporto target: 1000/1500 = 0,667. Larghezza del raccolto: 3024 x 0,667 = 2016 px.
- Area mantenuta: 2016 /4032 = 50% Metà della foto va.
Queste percentuali sono ciò che lo strumento riporta come & quot; Mantenere il 60% dell'originale& quot; e vale la pena leggerle prima di impegnarsi Un ritaglio che mantiene metà del fotogramma è una decisione di composizione, non un passaggio di formattazione.
Come si sceglie quale parte dell'immagine conservare?
Scegli il punto focale che tiene il soggetto, e ricorda che conta solo lungo l'asse da tagliare Il cropper's griglia a nove punti imposta un fuoco di 0, 0,5 o 1 attraverso ogni asse, che ancora il ritaglio al bordo sinistro, al centro o al bordo destro orizzontalmente, e alla parte superiore, al centro o al fondo verticalmente.
La posizione viene elaborata in questo modo, quindi bloccata in modo che il ritaglio non venga mai eliminato dall'immagine:
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)
Nell'esempio 1 lavorato, solo i lati sono tagliati, quindi solo la scelta orizzontale cambia qualcosa:
| Colonna d'ancoraggio | Ritaglia x | Colonne conservate della foto |
|---|---|---|
| Sinistra | 0 | da 0 a 2419 |
| Centro | 806.4 | da 806 a 3226 |
| Giusto | 1612.8 | dal 1613 al 4032 |
Le righe superiore, centrale e inferiore danno risultati identici per quella coltura, perché l'intera altezza è già mantenuta È un controllo utile quando un clic sembra non fare nulla: il raccolto è libero di muoversi solo in una direzione.
Esempio 4 funzionante: una foto del telefono ritratto come immagine LinkedIn. Una foto 3024 x 4032 ritagliata a 1200 x 627 (rapporto 1,914) mantiene l'intera larghezza e una striscia 3024 /1,914 = 1580 px di altezza Cioè 1580 /4032 = 39% della foto Con l'ancoraggio centrale predefinito la striscia va da y = 1226 a y = 2806, che su un tipico ritratto testa-spalle è il petto, non il viso Cliccando il centro-alto sposta la striscia a y = 0 a 1580 e mantiene la testa Questo caso è il motivo per cui esiste la griglia focale: centratura è un default ragionevole e la risposta sbagliata per la maggior parte dei ritratti trasformati in banner.
Alcune regole pratiche per scegliere un'ancora:
- Persone: fila superiore, poiché i volti di solito si trovano nel terzo superiore di un fotogramma.
- Titoli o didascalie inseriti in un elemento grafico: la riga o colonna in cui si trova il testo.
- Prodotti e soggetti decentrati: l'angolo o il lato abbinato.
- Scene simmetriche e loghi centrati: lascialo al centro.
Il ritaglio ridurrà la qualità dell'immagine?
Il ritaglio da solo non riduce la qualità, ma la fase di ridimensionamento può. Scartare i pixel all'esterno del fotogramma lascia i pixel rimanenti esattamente come erano. Il ridimensionamento alla dimensione target è il punto in cui il risultato può migliorare o degradarsi.
Il ridimensionamento è sicuro e spesso rende una foto più nitida, poiché in ciascun pixel di uscita viene calcolata la media di diversi pixel sorgente. Il cropper disegna con l'impostazione di qualità ad alta livellamento canvas's, utilizzando il drawImage metodo definito nel Specifica della tela HTML WHATWG. Il ridimensionamento non può aggiungere dettagli che non sono mai stati catturati L'output diventa più grande ma non più nitido e i bordi sembrano morbidi.
Esempio 5 funzionante: uno screenshot upscalato. Uno screenshot 800 x 600 ritagliato per un'immagine X post mantiene l'intera larghezza di 800 px e una striscia alta 450 px, il 75% dell'area Quella regione 800 x 450 viene quindi ingrandita a 1600 x 900, il doppio delle sue dimensioni in ciascuna direzione Lo strumento lo dice sotto l'anteprima: & quot; Upscaled - la sorgente è più piccola del bersaglio, quindi sembrerà morbida."
Il test rapido consiste nel confrontare la larghezza del ritaglio con la larghezza del target Se il ritaglio è più largo del target, l'immagine viene ridimensionata e apparirà bene Se è più stretta, viene ingrandita Per le foto, una fotocamera del telefono ha quasi sempre pixel da vendere Screenshot, vecchie immagini e immagini salvate da altri post sono i soliti casi di upscaling e l'unica vera correzione è una fonte più grande.
Dovresti esportare PNG, JPEG o WebP?
Esporta JPEG per fotografie, PNG per screenshot, testo e grafica con bordi rigidi e WebP quando desideri il file più piccolo e sai che la destinazione lo accetta Il cropper esegue l'impostazione predefinita su PNG perché è senza perdita di dati e offre tutti e tre.
| formato | Compressione | Meglio per | stare attento |
|---|---|---|---|
| png | Senza perdite, come specificato dal Norma di PNG di W3C | Screenshot, interfaccia utente, testo, loghi, trasparenza | File di grandi dimensioni per fotografie |
| JPEG | Lossy, il metodo in ITU-T T.81 | Fotografie | Aureole attorno a testo e righe taglienti; nessuna trasparenza |
| webp | Perdente o senza perdite, descritto in Documentazione WebP di Google's | File più piccoli con qualità simile | Alcuni strumenti più vecchi non possono aprirlo |
Le esportazioni JPEG e WebP utilizzano un'impostazione di qualità di 0,92 sul codificatore canvas, che è sufficientemente elevata da rendere difficili gli artefatti di compressione nelle fotografie. Il file scaricato prende il nome dall'originale più il preset, quindi team.jpg ritagliato per un post sul ritratto di Instagram mentre JPEG salva come team-ig-portrait.jpeg.
La maggior parte delle piattaforme ricodifica comunque ciò che carichi, quindi un PNG senza perdita di dati di una fotografia non sopravvive come PNG una volta pubblicato Aggiunge principalmente la dimensione di caricamento Per scegliere i formati in modo più approfondito, il Guida al convertitore di formati immagine li confronta in più casi d'uso.
Passo dopo passo: ritagliare un'immagine con lo strumento
la ritaglio di immagini per i social media ha quattro passaggi e la tela di anteprima è la stessa tela che produce il file, quindi ciò che approvi è ciò che scarichi.
- Aggiungi l'immagine. Rilascia un file, fai clic per sceglierne uno o incolla un'immagine dagli appunti con Cmd+V o Ctrl+V. L'ascoltatore incolla è su tutta la pagina, quindi uno screenshot copiato negli appunti entra direttamente senza essere salvato prima La zona di rilascio accetta PNG, JPEG, WebP, GIF o AVIF, o qualsiasi altra cosa il tuo browser possa decodificare.
- Scegli la dimensione target. Il menu Dimensione target raggruppa i 15 preset per piattaforma, ciascuno etichettato con la sua dimensione e rapporto dei pixel, e mostra una nota di una riga su dove viene utilizzata la dimensione L'impostazione predefinita è il post del ritratto di Instagram.
- Scegli cosa tenere. Fare clic su uno dei nove punti nella griglia Mantieni L'anteprima si ridisegna immediatamente.
- Controlla i numeri e scarica. Sotto l'anteprima, leggi la riga che indica la percentuale mantenuta, le dimensioni del ritaglio e se il risultato è ridimensionato o ridimensionato Scegli PNG, JPEG o WebP e fai clic su Scarica.
Tutto viene eseguito su un'area di disegno HTML nella scheda del browser L'immagine non viene caricata, archiviata o registrata e la pagina continua a funzionare con la rete spenta Come ogni strumento sul sito, il passaggio di download controlla un limite di utilizzo giornaliero.
In quali errori puoi incorrere?
La maggior parte dei problemi provengono dal formato del file o dalla dimensione della fonte I messaggi sono specifici.
- & quot;Quel file non è un'immagine." Il tipo file's non inizia con
image/, ad esempio un PDF o un video Il messaggio nomina il file. - & quot; Impossibile leggere quell'immagine Potrebbe essere corrotta o in un formato che questo browser non decodifica." Il file afferma di essere un'immagine ma il browser non può decodificarla Il caso comune è una foto HEIC di iPhone in un browser senza supporto HEIC Convertila prima in JPG con il convertitore formato immagine.
- & quot; Upscaled - la fonte è più piccola del bersaglio, quindi sembrerà morbida." Non un errore, un avviso Usa un originale più grande se ne hai uno.
- La griglia focale sembra non fare nulla. Il raccolto viene tagliato solo lungo un asse, quindi solo gli ancoraggi lungo quell'asse lo spostano.
- Limite giornaliero raggiunto. È stata utilizzata l'indennità giornaliera gratuita per l'utilizzo.
Vale la pena conoscere un effetto in più Poiché l'output è ricodificato da pixel di tela, il file scaricato non contiene metadati EXIF: nessuna impostazione della fotocamera, data di acquisizione o posizione GPS Per le foto pubblicate pubblicamente che di solito è un guadagno di privacy Il Guida per il remover EXIF spiega cosa contengono questi metadati e perché sono importanti quando si condividono le foto.
Ritaglia, ridimensiona o inseriscilo su uno sfondo?
Il ritaglio è uno dei tre modi per ottenere un'immagine in una forma fissa, e quello giusto dipende dal fatto che tu possa permetterti di perdere una qualsiasi delle immagini.
| avvicinare | Cosa succede | Quando utilizzarlo | strumento |
|---|---|---|---|
| Ritaglia al rapporto | Taglia i bordi, mantiene la forma esatta | Il soggetto è una parte della cornice e i bordi possono andare | Cropper di immagini di social media |
| Adatta su un mascherino | Riduce l'intera immagine su uno sfondo colorato o sfocato | Non è possibile tagliare nulla, come opere d'arte o una foto di gruppo | Generatore Matte |
| Ridimensiona solo | Cambia le dimensioni dei pixel, mantiene il rapporto originale | Il rapporto è già giusto, o la piattaforma accetta qualsiasi forma | Ridimensionamento immagine |
| Dividere in diapositive | Taglia un'immagine ampia in diapositive consecutive del carosello | Un panorama troppo ampio per un post | Generatore di scorrimento Carousel |
Se il problema è la dimensione del file anziché la forma, il guida ridimensionamento immagine copre le dimensioni che cambiano senza distorsioni Quando un'immagine ritagliata si sta spegnendo pubblicamente e dovrebbe portare il tuo nome, il filigrana aggiunge un logo o una firma in un angolo o piastrellato attraverso la cornice Il set completo di strumenti di immagine per pubblicare vite nel hub degli strumenti dei social media.
Perché ritagliare prima di caricare a tutti?
Perché il ritaglio della piattaforma è deciso da un software che non può vedere il soggetto Ogni feed esegue il rendering a rapporti fissi e un caricamento in qualsiasi altra forma viene adattato automaticamente, di solito tagliando uniformemente da entrambi i lati della dimensione lunga Alcune piattaforme, tra cui Bluesky, applicano quel ritaglio solo in mostra nella timeline, quindi l'immagine completa esiste ma la maggior parte delle persone non la vede mai.
Il ritaglio prima sposta di nuovo a te tre decisioni: quale parte della cornice è visibile, quanto è nitido il risultato alle dimensioni esatte del display e quanto è grande il file. Ci vogliono alcuni secondi per immagine e conta di più esattamente per le immagini a cui le persone tengono: ritratti, scatti di prodotti e grafica con testo vicino a un bordo. Per quelli, ritaglia l'immagine sulla dimensione della piattaforma con il punto focale sull'argomento, gratuito, nessuna iscrizione e carica un file, il feed non ha motivo di cambiare.
