Un amico mi ha inviato una foto del telefono e uno screenshot e li ha chiesto in un'immagine per un elenco. Ho lasciato entrambi in una tela di dimensioni proprie e ho ottenuto qualcosa che nessuno avrebbe accettato: una foto 4032 per 3024 con uno screenshot stretto 1170 BY 2532 accanto, una banda di bianco vuoto sotto lo screenshot e il tutto 5202 pixel di larghezza. Le foto andavano bene. L'arrangiamento era il problema, ed è lo stesso problema ogni volta, perché i due file non condividono quasi mai una dimensione. Decidere quale asse deve allinearsi è l'intero lavoro e tutto il resto ne deriva.
tl; dr: L'unione delle immagini è una decisione di ridimensionamento prima che sia un disegno. Side at Side abbina ogni immagine all'altezza del più alto, impilando le corrispondenze alla larghezza più ampia e una griglia corrisponde a entrambe, motivo per cui una griglia deve anche scegliere tra ritaglio e lasciare spazio. Misurato su una foto 4032x3024 accanto a uno screenshot 1170x2532: Side By Side produce una tela 5429x3024 con lo screenshot ingrandito a 1397x3024, l'impilamento produce una tela 4032x11750 con lo screenshot ingrandito di un fattore 3,4 e una griglia a due celle in modalità di copertura 70,2% della foto e 49.4% dello schermo. Scegli la modalità con cui l'asse si desidera preservare. la Fusione di immagini Disegna tutto nella scheda del browser, quindi non viene caricato nulla.
Perché le immagini unite escono con un aspetto sbagliato?
Poiché gli input sono forme diverse e la maggior parte degli strumenti li disegna a qualsiasi dimensione arrivino.
Una foto del telefono è 4032 per 3024 in paesaggio. Uno screenshot del telefono è 1170 per 2532. Una scansione è qualunque cosa abbia deciso lo scanner. Metti due di questi di seguito in una fila di dimensioni native e uno di essi torreggia sull'altro, con lo spazio morto che riempie tutto ciò che resta della dimensione più alta. Questo si legge come un errore piuttosto che un layout, anche per qualcuno che non sa dirti perché.
La correzione è normalizzare e l'unica domanda è su quale asse. Di seguito, la parte superiore e inferiore sono ciò che segue l'occhio, quindi le altezze devono corrispondere e ogni immagine prende la larghezza delle proprie proporzioni e poi le dà. In una colonna, i bordi sinistro e destro sono la linea, quindi le larghezze corrispondono invece. Una griglia ha entrambi i bordi da tenere, quindi deve corrispondere a entrambi, e quella è la modalità in cui qualcosa deve dare.
Questo è l'intero design. Tutto sotto è ciò che ne consegue.
Cosa fa fianco a fianco a uno screenshot alto?
Lo allarga, a volte più di quanto desideri.
Ecco il risultato misurato per la coppia sopra, tratto dal codice di layout anziché stimato:
| modo | tela | Foto disegnata a | Schermata disegnata a |
|---|---|---|---|
| fianco a fianco | 5429 x 3024 | 4032 x 3024 | 1397 x 3024 |
| accatastato | 4032 x 11750 | 4032 x 3024 | 4032 x 8726 |
Side at Side abbinato entrambi a 3024, la più alta delle due altezze, quindi lo screenshot è passato da 2532 a 3024 pixel di altezza. Questo è un ingrandimento del 19%, che su uno screenshot del testo è visibile se lo cerchi e invisibile se non lo fai.
L'impilamento è quello drammatico. La corrispondenza con l'immagine più ampia ha portato lo screenshot da 1170 a 4032 pixel di larghezza, un fattore di 3,4, e la tela è venuta fuori 11.750 pixel. Lo screenshot è ora l'oggetto dominante in un'immagine molto lunga e ogni lettera in esso è stata ridimensionata di più di tre volte, che nessuna quantità di ricampionamento rende nitido.
La lezione non è che una modalità sia migliore. È che la modalità decide quale immagine viene ingrandita, quindi scegli quella su cui l'asse corrispondente è già d'accordo. Due foto del telefono in paesaggio condividono un'altezza e vanno fianco a fianco senza alcun ridimensionamento. Due screenshot dello stesso telefono condividono una larghezza e si accumulano perfettamente.
Quando dovresti impilare invece di andare fianco a fianco?
Quando il contenuto legge verso il basso o quando le immagini sono già della stessa larghezza.
L'impilamento è giusto per una sequenza: tre schermate di un flusso di checkout, un prima e un dopo dove il dopo appartiene, una conversazione catturata in parti. È anche giusto ogni volta che gli input provengono dallo stesso dispositivo con lo stesso orientamento, perché le larghezze già corrispondono e non viene ridimensionato nulla.
Fianco a fianco è giusto per il confronto, dove l'occhio dovrebbe attraversare piuttosto che verso il basso, e per tutto ciò che verrà visualizzato in linea in un post, perché un'immagine 4032 per 11.750 viene scorreta anziché vista.
C'è anche una ragione pratica per preferire la fila. La maggior parte dei luoghi che accettano un'immagine la visualizza a una larghezza fissa, quindi un'unione molto alta si riduce a una scheggia. Una riga di tre foto alla stessa altezza rimane leggibile a quella larghezza in un modo in cui una colonna di tre non lo fa mai.
Cosa deve decidere una griglia che una striscia non lo fa?
Cosa fare con un'immagine che non sia la forma della cellula, che è una domanda che una striscia non deve mai porre perché blocca solo un asse.
Una griglia blocca entrambi. Ogni cella ha le stesse dimensioni e una foto 4:3 non si adatta a una cella a forma di screenshot 9:19.5. Ci sono solo due risposte oneste e lo strumento ti chiede di scegliere tra di loro:
- racchiudere Si adatta all'intero quadro all'interno della cella e lascia spazio intorno ad essa. Niente è perso e la griglia sembra leggermente irregolare perché ogni immagine si trova nella propria macchia di sfondo.
- Copertura Riempie completamente la cella estraendo un raccolto centrato fuori dall'immagine. La griglia sembra uniforme e i bordi delle immagini sono spariti.
Nessuno dei due è corretto in generale. Contenire è giusto per schermate, documenti, diagrammi e qualsiasi cosa in cui un bordo trasporta le informazioni. La copertura è giusta per volti, paesaggi e consistenza, dove un raccolto centrato è quello che una persona avrebbe comunque fatto.
L'impostazione predefinita qui è la copertina, perché il motivo più comune per costruire una griglia è che dovrebbe essere letto come un unico oggetto.
Quanta foto copre buttare via?
Più di quanto le persone si aspettano quando gli input sono forme diverse e niente quando corrispondono.
La dimensione della cella è la media degli input, quindi due immagini molto diverse producono una cella che non si adatta a nessuno dei due. Per la coppia di foto e screenshot, in una griglia a due celle, il codice di layout riporta esattamente ciò che viene disegnato:
| immagine | Nativo | Regione di origine disegnata | Pixel mantenuti |
|---|---|---|---|
| Foto | 4032 x 3024 | 2831 x 3024 | 70,2% |
| immagine d'una onda | 1170 x 2532 | 1170 x 1250 | 49,4% |
Metà dello screenshot è sparita. Non compresso, non in scala: ritagliato, in alto e in basso, perché un'immagine alta e stretta forzata in una cella quasi quadrata deve perdere le sue estremità. Se quello screenshot era una ricevuta, il totale non è più nell'immagine.
La stessa operazione su dodici foto della stessa fotocamera non ritaglia nulla, perché ogni input ha già la forma della cellula. La copertura è economica quando gli input sono d'accordo e costosi quando non lo fanno, e lo strumento non può dire in quale caso ti trovi. Passa per contenere nel momento in cui le tue immagini sono forme diverse e i bordi contano.
Quante colonne dovrebbe avere una griglia?
Abbastanza che il risultato sia più largo che alto, il che per la maggior parte dei conteggi significa che la radice quadrata arrotonda per difetto.
Le righe seguono dalle colonne e dal conteggio e l'aritmetica non perdona. Dodici immagini in quattro colonne sono tre righe complete. Sette immagini in tre colonne sono tre righe con due celle vuote all'estremità, che il layout lascia come sfondo anziché allungare l'ultima immagine per riempirle.
| Immagini | colonne | Risultato |
|---|---|---|
| 4 | 2 | 2 x 2, senza spazi vuoti |
| 6 | 3 | 2 x 3, senza spazi vuoti |
| 7 | 3 | 3 righe, due celle vuote |
| 9 | 3 | 3 x 3, senza spazi vuoti |
| 12 | 4 | 3 x 4, senza spazi vuoti |
Vale la pena puntare a un conteggio a cui vale la pena puntare in modo pulito. Se hai sette foto e l'angolo vuoto ti infastidisce, le correzioni oneste sono farne una, aggiungerne una o accettarla, perché nessuna disposizione di sette celle uguali è un rettangolo.
Perché c'è un'impostazione di gap e quale dovrebbe essere?
Perché toccare le immagini lette come un'immagine, e talvolta è sbagliato.
Un divario di zero è giusto per un panorama, per un prima e dopo dovrebbe assomigliare a un telaio, e per qualsiasi cosa in cui la cucitura sia il punto. È l'impostazione predefinita qui per questo motivo.
Un divario è giusto quando le immagini sono cose separate che si trovano in un file: tre scatti di prodotti, un insieme di schermate, un collage. Da qualche parte tra gli 8 ei 24 pixel fa il lavoro su immagini di poche migliaia di pixel e il cursore passa a 80 per un lavoro più grande. Il divario viene applicato sia all'esterno che all'esterno, quindi il risultato ha un bordo piuttosto che immagini che sanguinano dal bordo.
Una cosa da sapere prima di scegliere PNG per un'unione lacuna: il divario è pieno di bianco, non lasciato trasparente. La tela è dipinta di bianco prima che qualsiasi cosa venga disegnata, perché JPEG non ha un canale alfa e un divario non verniciato esporta come nero. Un PNG di questo strumento ha quindi grondaie bianche piuttosto che trasparenti, il che conta se si intendeva posare il risultato su uno sfondo colorato.
Quanto diventa grande l'immagine unita?
Più grande degli input, e nel caso impilato molto più grande, perché nulla viene compresso.
Le dimensioni della tela sono prevedibili dalla modalità. Fianco a fianco, la larghezza è la somma delle larghezze scalate e l'altezza è l'input più alto. Impilato, la larghezza è l'input più largo e l'altezza è la somma. Una griglia è colonne per la cella più le lacune.
Dodici foto del telefono in una griglia a quattro colonne arrivano a 16.208 per 9.136 pixel, ovvero 148 megapixel. È qui che inizia la sezione successiva.
Perché l'uscita si ferma a 8.000 pixel?
Poiché oltre una certa dimensione, un canvas del browser smette di funzionare e non lo dice.
Il limite non è una specifica. MDN lo dice chiaramente: La maggior parte dei browser supera i 10.000 per 10.000 pixel, i dispositivi iOS sono stati storicamente limitati a 4.096 da 4.096 e superano le dimensioni o l'area massime "rendendo la tela inutilizzabile" con i comandi di disegno che falliscono silenziosamente. Non c'è eccezione da catturare. Ottieni un'immagine vuota, o niente. Le cifre per browser sono raccolte nel Risultati dei test su tela, che è il riferimento che vale la pena controllare prima di assumere un numero.
Quindi il layout viene ridimensionato per adattarsi a un lato lungo di 8.000 pixel anziché essere autorizzato a fallire. Per quella dodici griglia fotografica il fattore di scala è 0,494, portando 16.208 per 9.136 fino a 8.000 per 4.509, che è di 36 megapixel. Ogni foto arriva a circa 1.976 per 1.483 invece di 4.032 per 3.024.
Questa è una vera perdita di risoluzione, ed è l'onestà commerciale: un'immagine da 36 megapixel che esiste batte un'immagine da 148 megapixel che il browser si rifiuta di disegnare. Se hai bisogno della risoluzione completa di dodici foto, uniscile in meno pezzi più grandi o usa uno strumento desktop senza tela in mezzo.
Il risultato dovrebbe essere PNG o JPG?
JPG per fotografie, PNG per schermate e qualsiasi cosa con testo o colore piatto.
Questa è la regola ordinaria e la fusione non la cambia, ma la fusione la rende importante, perché l'output è grande. Un'unione di 5429 per 3024 di due fotografie è un file che noterai a PNG size e non lo farai a JPEG Quality 0.92, che è ciò a cui questo esporta.
Il contrario vale per gli screenshot. Il sottocampionamento e la trasformazione del blocco di JPEG producono frange visibili attorno a spigoli vivi e una striscia unita di schermate è per lo più spigoli di testo taglienti. PNG è senza perdite, quindi il testo rimane esattamente nitido come lo era.
Una fusione mista non ha una risposta giusta. Se uno dei tuoi input è uno screenshot con testo e un altro è una fotografia, scegli in base a quale un lettore guarderà.
La fusione perde qualità?
Il disegno no, ma il ridimensionamento potrebbe, e vale la pena sapere quale è quale.
I pixel disegnati alla loro dimensione nativa vengono copiati, non ricomprimi. In un'unione affiancata di due foto di paesaggi dalla stessa fotocamera, non viene ridimensionato nulla, quindi ogni pixel nell'output proveniva da un pixel di input.
Il ridimensionamento è dove va la qualità. Qualsiasi immagine ingrandita per abbinarsi a un vicino più alto viene ricampionata, che inventa pixel che non sono mai stati fotografati. Uno screenshot ingrandito 3,4 volte per abbinare la larghezza di una foto è morbido in un modo che nessuna impostazione qui corregge. Niente è aumentato oltre l'input più grande sull'asse da abbinare, quindi c'è un soffitto, ma un piccolo quadro accanto a uno grande viene ancora allungato per raggiungerlo.
Poi c'è l'esportazione. La scelta di JPG ricodifica tutto, compresi gli input che erano già JPEG, che è una seconda generazione di compressione con perdita su quelli. è lo stesso meccanismo descritto in L'audioguida sull'estrazione di una traccia, in un mezzo diverso: decodificare qualcosa di lossy e comprimerla di nuovo non è mai gratuito. A qualità 0,92 il costo è piccolo e per una striscia fotografica unita è comunque la chiamata giusta.
In che ordine entrano le immagini?
L'ordine in cui li hai aggiunti, da sinistra a destra o dall'alto in basso, e l'unico modo per cambiarlo è rimuoverne uno e aggiungerlo di nuovo.
Vale la pena sapere prima di selezionare dodici file contemporaneamente, perché un selettore di file li consegna nel proprio ordine, che di solito è alfabetico per nome file e occasionalmente no. Per una sequenza che conta, come un flusso di checkout, aggiungerli uno alla volta nell'ordine che desideri è meno lavoro che risolverlo in seguito.
Trenta immagini è il soffitto. Questo non è un limite di tela, è un limite di sanità mentale: un'unione di trenta foto di telefoni è una griglia di 30 megapixel dopo il limite e un layout che nessuno può leggere.
Cosa non ti dà un'immagine unita?
Tutto ciò che fa uno strumento di progettazione, che è il confine onesto di uno strumento di fusione.
Non ci sono bordi intorno alle singole immagini, nessun angolo arrotondato, nessuna ombreggiatura, nessuna didascalia, nessuna rotazione per immagine, nessuna sovrapposizione, nessun colore di sfondo diverso dal bianco. Ogni immagine è disegnata nel suo rettangolo e questo è l'intero set di funzionalità.
Se vuoi un collage incorniciato con il testo, questo è un lavoro di progettazione e uno strumento di progettazione. Se vuoi inserire tre immagini in un file in modo che qualcosa che accetti un'immagine riceva tutte e tre, questo è questo. Trattare il secondo come una versione debole del primo è la solita fonte di delusione.
Due strumenti adiacenti coprono i comuni follow-up: Aggiunta di testo a un'immagine per una didascalia, e il compressore dell'immagine Quando una griglia fotografica unita esce più grande di quanto consentito dal limite di caricamento.
Perché questo viene eseguito nel browser?
Poiché le immagini non hanno mai bisogno di andare da nessuna parte, e nel momento in cui lo fanno, è la decisione di qualcun altro su cosa succede loro.
L'intera fusione è un'operazione su tela. I tuoi file vengono decodificati in memoria di pagina, disegnati su un canvas nella scheda e la tela viene restituita come download toBlob. Nessuna richiesta porta un'immagine, non viene scritto nulla su un server e non esiste una copia memorizzata che nessuno possa perdere o dimenticare.
Per molte merge è una gentilezza. Per quelli che coinvolgono uno screenshot di un estratto conto, una foto di un documento, una scansione medica o l'immagine di un bambino, è l'intero motivo per utilizzare uno strumento come questo invece del primo risultato che ti chiede di caricare.
Il costo è il soffitto della tela descritto sopra e il fatto che le unizioni molto grandi sono limitate dalla quantità di memoria che la scheda può contenere. Per due immagini, o dodici, nessuno dei due è un limite che incontrerai.
