Si scatta un ampio paesaggio, si apre la schermata del post e l'app ti offre un quadrato con le due migliori montagne tagliate fuori Oppure si fa uno screenshot di un grafico, e il ritaglio di alimentazione rimuove le etichette degli assi che rendevano il grafico degno di essere condiviso L'immagine va bene La cornice è la forma sbagliata.
Ci sono due vie d'uscita Puoi ritagliare l'immagine per adattarla alla cornice, oppure puoi mettere l'intera immagine su uno sfondo che ha già la forma giusta Il secondo approccio si chiama opaco, ed è quello che il Generatore Matte build: una tela quadrata, a forma di ritratto o di storia con la tua immagine completa posizionata al suo interno, su una copia sfocata di se stessa o di un colore solido Questa guida spiega quando un mascherino batte un ritaglio, come funziona la geometria, cosa fanno le impostazioni di imbottitura, raggio e ombra in pixel e quale dimensione di output scegliere per ciascuna piattaforma.
tl; dr: Un mascherino è lo sfondo su cui si trova una foto fuori forma in modo che possa essere pubblicata senza essere ritagliata Invece di tagliare un'immagine 16:9 fino a 1:1, si inserisce l'intera immagine all'interno di un fotogramma 1080 x 1080 o 1080 x 1350 e si riempie lo spazio avanzato con una copia sfocata della foto o un colore solido Il generatore opaco fa questo lato client su una tela HTML, con 15 preset di piattaforma, imbottitura da 0 a 25%, angoli arrotondati, un'ombra di caduta opzionale e PNG, JPEG o esportazione WebP. È gratuito, nessuna registrazione e non viene caricato nulla.
Che cosa è un matte della foto?
Un foto opaco è il confine tra un'immagine e il bordo della sua cornice La parola deriva dall'inquadratura dell'immagine, dove una tavola opaca con una finestra tagliata si trova tra una stampa e il vetro in modo che l'immagine non vada sul bordo della cornice Sui social media l'idea è la stessa, senza il cartone: il & quot; frame" è il rapporto d'aspetto che una piattaforma vuole, e il opaco è tutto ciò che riempie lo spazio che la tua immagine non riempie.
La proprietà distintiva di un mascherino è che nulla viene rimosso dall'immagine Ogni pixel che hai composto sopravvive nel post. Il commercio è che l'immagine non riempie più l'intera tessera, quindi è più piccola sullo schermo di quanto lo sarebbe un ritaglio della stessa foto.
Dovresti usare un mascherino o ritagliare l'immagine?
Ritaglia quando il soggetto si trova al centro e i bordi sono accessori Usa un mascherino quando i bordi trasportano informazioni che non puoi perdere Questa è l'intera decisione, e vale la pena di prendere apposta piuttosto che accettare qualunque cosa faccia la schermata di caricamento.
| situazione | Scelta migliore | perché |
|---|---|---|
| Ritratto di una persona, sfondo semplice | Coltivare | Il soggetto riempie più piastrelle e legge meglio con le dimensioni delle miniature |
| Ampio paesaggio o panorama | Matte | La larghezza è il punto della foto |
| Screenshot di un grafico, codice o una conversazione | Matte | Etichette e bordi portano le informazioni |
| Scatto prodotto che deve mostrare l'intero oggetto | Matte | Tagliare il prodotto vanifica lo scopo |
| Foto di gruppo con persone ad entrambe le estremità | Matte | Un raccolto rimuove qualcuno |
| Colpo di dettaglio o texture | Coltivare | Non c'è un vantaggio significativo da proteggere |
| Panorama molto ampio che vuoi che le persone attraversino | Nessuno dei due | Dividerlo invece in una giostra |
Se decidi che un raccolto è giusto, dopo tutto Cropper di immagini di social media gestisce quel lato della decisione con le stesse preimpostazioni della piattaforma Per un panorama troppo ampio per entrambi gli approcci, il Generatore di scorrimento Carousel lo taglia in pannelli scorrevoli.
Come fa un matte a inserire un'immagine in un quadrato?
La regola di adattamento è la stessa chiamata CSS object-fit: contain, definito nel Immagini CSS Livello modulo 3 specifica: scalare l'immagine del fattore più grande che mantiene sia la sua larghezza che la sua altezza all'interno del fotogramma, quindi centrarla Nel codice il calcolo è di tre righe:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Qualunque dimensione colpisca il bordo del fotogramma decide per prima la scala Un'immagine ampia tocca i bordi sinistro e destro e lascia le barre sopra e sotto Un'immagine alta tocca la parte superiore e inferiore e lascia le barre ai lati Il generatore opaco applica prima l'imbottitura, restringendo il fotogramma, quindi esegue questa vestibilità all'interno di ciò che rimane.
Un esempio funzionante con numeri reali
Scatta una foto di paesaggio 1920 x 1080 (16:9) e mettila sul preset quadrato di Instagram, 1080 x 1080, con l'imbottitura predefinita del 6%.
- L'imbottitura è il 6% del frame's lato più corto: 1080 x 0,06 = 64,8 pixel su ogni bordo.
- Lo spazio rimasto per l'immagine è 1080 - (2 x 64,8) = 950,4 pixel quadrati.
- La scala di adattamento è la più piccola tra 950,4 / 1920 = 0,495 e 950,4 / 1080 = 0,880, quindi 0,495.
- L'immagine è disegnata a 1920 x 0,495 = 950,4 di larghezza e 1080 x 0,495 = 534,6 di altezza.
- È centrato verticalmente: (950,4 - 534,6) /2 = 207,9, più l'imbottitura 64,8, mette il bordo superiore a 272,7 pixel.
Lo strumento lo riporta sotto l'anteprima come & quot; piazzato a 950 x 535 all'interno di un frame" 1080 x 1080; puoi controllare qualsiasi altro caso allo stesso modo.
Quale dimensione di output dovresti scegliere?
Scegli la dimensione del posizionamento su cui stai pubblicando e ricorda che per un'immagine ampia, una cornice più alta non rende l'immagine più grande La larghezza è ciò che la limita La tabella seguente esegue la stessa misura per due foto sorgente, con un riempimento del 6%, attraverso i preset comuni.
| Scaldare | Cornice | Il paesaggio 1920 x 1080 è disegnato a | Il ritratto del telefono 1080 x 1920 è disegnato su |
|---|---|---|---|
| Post quadrato Instagram | 1080x1080 | 950x535 | 535x950 |
| Post di ritratto di Instagram (4:5) | 1080x1350 | 950x535 | 686x1220 |
| Storia di Instagram o Reel (9:16) | 1080x1920 | 950x535 | 950x1690 |
| Immagine del post X (16:9) | 1600x900 | 1408x792 | 446x792 |
Due cose si distinguono Per la foto del paesaggio, quadrato e ritratto 4:5 danno una dimensione immagine identica; la cornice del ritratto aggiunge solo più opaco Quindi per le immagini larghe, quadrato è la scelta più ordinata Per la foto del telefono alto, ritratto 4:5 dà l'immagine circa il 28% in più di altezza rispetto a un quadrato fa (1220 contro 950 pixel), che è il motivo per cui ritratto è il miglior default per le riprese verticali.
L'elenco completo preimpostato nello strumento copre Instagram (quadrato, ritratto, paesaggio, storia), Thread (quadrato, ritratto), Bluesky (immagine feed e quadrato), X (immagine post e scheda di riepilogo), feed Facebook, feed LinkedIn, miniatura di YouTube, pin standard Pinterest e anteprima del collegamento Open Graph. Le piattaforme cambiano i loro raccolti e codificano nuovamente i caricamenti, quindi trattali come & quot; ciò che si adatta oggi& quot; piuttosto che una garanzia.
Che sfondo deve usare un mascherino?
Lo strumento offre quattro sfondi: una copia sfocata dell'immagine, un colore solido che scegli, bianco o nero La copia sfocata è la scelta predefinita e solitamente la scelta migliore per le foto, perché riempie la cornice con la tavolozza picture' senza che tu debba scegliere un colore.
| fondo | assomigliare | Meglio per | stare attento |
|---|---|---|---|
| Copia sfocata dell'immagine | Il familiare Instagram & quot;fill" Guarda | Foto, viaggi, cibo, qualsiasi cosa colorata | Le immagini occupate producono uno sfondo affollato |
| Colore solido | Una carta piatta dietro l'immagine | Conti di marca, scatti di prodotti, loghi | Scegli un colore che non combatta con la foto |
| Bianco | Stampa della galleria su una parete bianca | Feed minimi, screenshot in modalità luce | Le foto dai bordi chiari perdono il loro confine senza ombra |
| Nero | Cassetta delle lettere del cinema | Scatti notturni, fotogrammi di film, screenshot dell'interfaccia utente oscura | Le foto dai bordi scuri perdono il loro confine senza ombra |
Come è fatto lo sfondo sfocato
Lo sfondo sfocato non è un'ipotesi su un colore corrispondente È la tua immagine, ritagliata per riempire l'intera cornice, sfocata pesantemente e leggermente oscurata, con l'immagine nitida disegnata sopra La sfocatura utilizza la tela filter proprietà, documentata su MDN's CanvasRenderingContext2D.filter pagina, e il suo raggio si ridimensiona con il fotogramma: 6% del lato più corto, quindi 65 pixel su un quadrato 1080.
Un dettaglio conta per la qualità Una sfocatura vicino al bordo di una tela ha una media di pixel trasparenti dall'esterno, che lascia un bordo pallido attorno al bordo Lo strumento evita che disegnando il fondale più grande del 12% rispetto al fotogramma su ogni lato (130 pixel di sovradisegno su un quadrato 1080), quindi la sfocatura ha dati di immagine reali da campionare fino al bordo Un lavaggio nero del 12% passa quindi sopra la parte superiore, che mantiene la lettura acuta del soggetto come soggetto.
Cosa fanno imbottitura, raggio d'angolo e ombra?
Tutte e tre le impostazioni sono proporzionali, quindi sembrano uguali a 1080 pixel come a 1600.
imbottitura va da 0 a 25% ed è misurato contro il lato più corto di frame' A 0, un'immagine larga tocca entrambi i bordi laterali e il mascherino si mostra solo come barre sopra e sotto: una cassetta delle lettere pura Tra il 4% e l'8% si legge come un bordo deliberato senza restringere molto l'immagine I valori più grandi si adattano ai post in stile virgoletta in cui lo sfondo fa parte del disegno Su un quadrato di 1080, ogni punto percentuale di imbottitura rimuove 21,6 pixel dall'immagine's larghezza disponibile.
Raggio angolare va da 0 a 50% e viene misurato rispetto all'immagine posizionata's lato più corto, non il fotogramma Con l'esempio orizzontale sopra, l'immagine è alta 534,6 pixel, quindi il raggio predefinito del 12% arrotonda ogni angolo di circa 64 pixel Al 50% i lati corti diventano semicerchi completi, dando una forma a pillola.
Goccia ombra è acceso per impostazione predefinita È un'ombra nera al 28% con una sfocatura del 3% del frame' è più corto e un offset verso il basso dell'1%, che su un fotogramma 1080 significa una sfocatura di 32 pixel e una caduta di 11 pixel Separa l'immagine da uno sfondo di luminosità simile, che è esattamente il caso in cui i mascherini bianchi o neri hanno bisogno di aiuto.
Come mettere una foto su un mascherino, passo dopo passo
- Apri il generatore matte gratuito e aggiungi la tua immagine rilasciando un file, facendo clic per sfogliare o incollando dagli appunti Incolla è il percorso più veloce per gli screenshot.
- Scegli la dimensione dell'output dall'elenco preimpostato raggruppato Inizia con Instagram quadrato per le foto larghe e Instagram ritratto per quelle alte.
- Scegli lo sfondo Conserva la copia sfocata per le foto; passa a un colore solido e digita un valore esadecimale per il lavoro di marca.
- Regola il riempimento, il raggio d'angolo e l'interruttore dell'ombra mentre guardi l'anteprima La tela di anteprima esegue il rendering alla dimensione reale dell'output, quindi quello che vedi è il file che otterrai.
- Scegli un formato e scarica Il file prende il nome dal tuo originale con
-matteaggiunto, quindibeach.jpgdiventabeach-matte.png.
PNG, JPEG o WebP: quale formato esportare?
Esporta PNG quando il risultato ha trasparenza o testo nitido, JPEG quando vuoi un piccolo file che ogni piattaforma accetta e WebP quando vuoi il file più piccolo e la destinazione lo supporta JPEG e WebP sono codificati al 92% della qualità.
| formato | Compressione | Mantiene la trasparenza | Uso tipico |
|---|---|---|---|
| png | senza perdita | certo | Screenshot, loghi su un matte trasparente, archiviazione del risultato |
| JPEG | Perdita, qualità 0,92 | No, si appiattisce fino a diventare opaco | Post fotografici su qualsiasi piattaforma |
| webp | Perdita, qualità 0,92 | certo | Siti web e piattaforme che accettano WebP |
La maggior parte delle piattaforme social codifica nuovamente ciò che carichi comunque, quindi il formato di esportazione conta meno per il feed che per la tua copia Se hai intenzione di modificare ulteriormente il risultato, mantieni un PNG Se il file deve essere più piccolo prima del caricamento, il file Guida alla compressione dell'immagine cammina attraverso le impostazioni di qualità in modo più approfondito.
Puoi usare un PNG trasparente?
Sì, e funziona bene per loghi e scatti di prodotti ritagliati Un PNG trasparente posizionato su un colore solido si compone in modo pulito, quindi un opaco diventa un modo rapido per mettere un logo su un quadrato marchiato Se devi prima rimuovere uno sfondo, il guida per lo smacco dello sfondo copre quel passaggio Esporta il risultato come PNG o WebP per mantenere la trasparenza nel file; JPEG non ha canale alfa e lo appiattirà.
Un mascherino riduce la qualità dell'immagine?
No, finché la sorgente è più grande dello spazio in cui è disegnata I preset di output sono 1080 pixel o più larghi, e una tipica foto del telefono è da 3000 a 4000 pixel sul suo lato lungo, quindi l'immagine è ridimensionata, che non perde nulla di visibile La tela la disegna con una livellatura di alta qualità.
L'unica eccezione è una piccola fonte Se si posiziona un'immagine 600 x 400 in un quadrato 1080 con il 6% di riempimento, deve essere scalata fino a 950 x 634, un fattore di circa 1,58, e sembrerà morbida per lo stesso motivo per cui qualsiasi ingrandimento non può Lo strumento non può aggiungere dettagli che non sono mai stati nel file Se la tua fonte è piccola, riduci l'imbottitura o scegli un preset più piccolo in modo che il fattore di scala rimanga vicino a 1. Il guida ridimensionamento immagine spiega perché l'upscaling sfoca e quando è accettabile.
Errori comuni e messaggi di errore
Alcuni problemi emergono abbastanza spesso da essere nominati.
- & quot;Quel file non è un'immagine." Lo strumento controlla il file's segnalato MIME tipo prima della decodifica Un PDF o un documento trascinato per errore viene rifiutato in questo passaggio.
- & quot;Quell'immagine non poteva essere letta.& quot; Il file afferma di essere un'immagine ma il browser non potrebbe decodificarla Questo accade con download corrotti e con formati che un particolare browser non supporta La dropzone elenca PNG, JPEG, WebP, GIF e AVIF; le foto HEIC da un iPhone di solito hanno bisogno di convertire prima.
- Il matte sembra grigio invece che colorato. Probabilmente hai scelto l'opzione a colori solidi e hai lasciato il grigio chiaro predefinito Riporta lo sfondo sulla copia sfocata.
- Un'immagine bianca scompare in un mascherino bianco. Accendi l'ombra, aggiungi un po' di imbottitura o passa allo sfondo sfocato.
- Il post viene ancora ritagliato. Il preset che hai esportato non corrisponde a dove l'hai pubblicato Un'immagine 1200 x 630 Open Graph caricata come feed post di Instagram verrà ritagliata, perché 1.91:1 è accettata solo come post di paesaggio.
- Il download non parte. I download contano ai fini di un limite di utilizzo giornaliero Quando il limite viene raggiunto, lo strumento mostra un messaggio anziché un file.
Viene caricato qualcosa?
No. L'immagine viene letta con un URL di oggetto locale, composto su un HTML <canvas> elemento nella scheda del browser e codificato in un file con la tela toBlob metodo descritto nel Specifica della tela HTML WHATWG. Nessun dato di immagine viene inviato a un server, memorizzato o registrato Una volta caricata la pagina, continua a funzionare con la rete disconnessa Usare i record di tracciamento solo quali preset, sfondo e formato hai utilizzato, mai l'immagine.
Alternative a un generatore di mascherine online
Uno strumento browser è una strada tra le tante.
- La piattaforma's propria opzione di adattamento. Alcune schermate di caricamento, Instagram' tra queste, possono contenere una foto all'interno della cornice con barre semplici invece di ritagliarla. È veloce, ma ottieni poco o nessun controllo sullo sfondo, sull'imbottitura o sull'ombra.
- Editor fotografici per telefoni. Molte app per gallerie e app di modifica hanno una modalità & quot;fit" o & quot; no crop" con sfondo sfocato Funzionano bene per le singole foto sul telefono e i risultati variano a seconda dell'app.
- Software di progettazione desktop. Photoshop, Affinity o Figma danno il pieno controllo, comprese le esatte posizioni dei pixel, Richiedono più tempo e hanno bisogno del software installato.
- Linea comando. ImageMagick può riempire un'immagine con una dimensione fissa con
-gravity center -extent 1080x1080, che si adatta ai lavori batch su un server.
I vantaggi dell'approccio lato client sono che non ha bisogno di installazione o account, funziona allo stesso modo su qualsiasi sistema operativo e mantiene la foto sul dispositivo Per un singolo post o un piccolo lotto che di solito è l'opzione più veloce Per centinaia di immagini, vince uno script.
la hub degli strumenti dei social media elenca le relative utilità in un unico posto, incluso il Generatore di schede fotografiche per schede di preventivo e notizie e il Filigrana immagine per l'aggiunta di un logo o di un credito prima di pubblicare.
