Un panorama postato su Instagram come una singola immagine si trasforma in una striscia sottile nel feed Lo stesso panorama tagliato in tre o quattro diapositive e postato come una giostra riempie lo schermo, e lo scorrimento si muove attraverso l'immagine come se si stesse facendo una panoramica di una fotocamera L'effetto è semplice da descrivere e facile da sbagliare leggermente: una diapositiva di un pixel di distanza, o un'ultima diapositiva più stretta rispetto al resto, e lo scorrimento salta.
Questa guida spiega come funziona un carosello senza soluzione di continuità, quante diapositive ha bisogno di un dato panorama, come appare l'aritmetica di taglio con il conteggio dei pixel reali e come utilizzare il file Generatore di scorrimento Carousel su Toolz per eseguire l'affettatura nel browser.
tl; dr: Un carosello senza soluzione di continuità è un'immagine ampia tagliata in diapositive uguali che condividono esattamente i loro bordi, pubblicata in modo che lo scorrimento scorra l'immagine. Il conteggio delle diapositive è il rapporto d'aspetto panorama's diviso per il rapporto d'aspetto slide's: un panorama 3:1 è composto da 3 diapositive quadrate o 4 diapositive ritratto (4:5). Il generatore di scroll carosello suggerisce che conta, ritaglia l'immagine esattamente su così tante diapositive' valore di larghezza, tagli su confini di pixel interi ed esporta diapositive larghe 1080 px come JPEG, PNG o WebP in una cerniera numerata Esegue lato client, nulla caricato, gratuito, nessuna registrazione.
Che cosa è un carosello Instagram senza soluzione di continuità?
Una giostra senza soluzione di continuità è un palo di giostra le cui diapositive sono pezzi consecutivi di un'immagine Invece di passare da una foto all'altra, lo spettatore scorre e l'immagine continua attraverso il divario I fotografi paesaggisti lo usano per panorami, i designer lo usano per lunghe illustrazioni e i marchi lo usano per timeline o lineup di prodotti che corrono su più fotogrammi.
Funziona perché una giostra mostra diapositive affiancate in una striscia e ogni diapositiva in un montante ha le stesse dimensioni Se la diapositiva 1 termina con la colonna di pixel 1.200 dell'originale e la diapositiva 2 inizia con la colonna 1.200, l'unione è invisibile Se la diapositiva 2 inizia con la colonna 1.198 o 1.203, una scheggia dell'immagine si ripete o svanisce e su un orizzonte rettilineo o un bordo dell'edificio che si presenta come un passo visibile.
Due regole della piattaforma modellano tutto il resto Al momento della stesura di questo articolo, Instagram accetta fino a 20 diapositive in un carosello e tutte le diapositive in un post condividono le proporzioni del primo; una diapositiva in una forma diversa viene ritagliata per corrispondere Le piattaforme cambiano questi dettagli di tanto in tanto, quindi trattali come un comportamento attuale piuttosto che come una specifica fissa.
Quale forma di diapositiva dovresti scegliere?
Ritratto 4:5 è la scelta abituale, perché è la forma più alta che il feed di Instagram mostra e prende più schermo su un telefono Quadrato e paesaggio sono lì quando la composizione si adatta a loro.
Il generatore offre le tre forme a carosello, ciascuna esportata con una larghezza di 1080 px:
| Forma di scorrimento | Dimensione dell'uscita | Rapporto (larghezza/altezza) | Slides per un panorama 3:1 | Slides per un panorama 4:1 |
|---|---|---|---|---|
| Ritratto (predefinito) | 1080x1350 | 0,8 | 4 | 5 |
| Piazza | 1080x1080 | 1.0 | 3 | 4 |
| Paesaggio | 1080x566 | 1.91 | 2 | 2 |
I conteggi delle diapositive nella tabella provengono da una divisione, trattata nella sezione successiva Il modello da notare è che le diapositive più strette ne hanno bisogno di più per coprire la stessa larghezza Le diapositive dei ritratti mostrano la maggiore altezza del panorama per diapositiva, che di solito è ciò che fa sembrare grande una foto di paesaggio, ma hanno bisogno di più scorrimenti Le diapositive del paesaggio mostrano un panorama in meno fotogrammi più corti e si adattano a immagini molto ampie e superficiali come gli skyline.
Di quante diapositive ha bisogno un panorama?
Dividi le proporzioni panorama's per le proporzioni slide's, quindi arrotonda all'intera diapositiva più vicina.
slides = round( (image width / image height) / (slide width / slide height) )
Per un panorama 3:1 nelle diapositive dei ritratti: 3 / 0,8 = 3,75, che arrotonda a 4. Nelle diapositive quadrate: 3 / 1 = 3. Nelle diapositive del paesaggio: 3 / 1,908 = 1,57, che arrotonda a 2.
Per un panorama 4:1, come un'immagine 6000 x 1500: 4 / 0,8 = 5 diapositive di ritratto, 4 / 1 = 4 diapositive quadrate e 4 / 1,908 = 2,1, quindi 2 diapositive di paesaggio.
la panorama to carousel to tool esegue questo calcolo non appena aggiungi un'immagine, blocca la risposta tra 1 e 10 e imposta il cursore Presentazioni su di essa con una riga come & quot;4 corrisponde alle proporzioni di image's più da vicino." Il cursore stesso va da 2 a 10 Una volta che lo sposti, il suggerimento smette di ignorare la tua scelta; aggiungere una nuova immagine o scegliere una forma di diapositiva diversa riporta indietro il suggerimento.
Il conteggio raramente si divide perfettamente, quindi qualcosa deve dare Arrotondare fino a più finiture di diapositive un po 'dall'alto e dal basso del panorama Arrotondare fino a meno finiture di diapositive da sinistra e destra Il generatore fa quel rivestimento una volta, centrato, prima di tagliare, motivo per cui ogni diapositiva esce della stessa dimensione.
Come fa lo strumento a tagliare le diapositive senza cucitura?
Funziona in tre fasi e ognuna esiste per fermare un tipo specifico di cucitura.
Passaggio 1: ritagliare la striscia. Le diapositive insieme formano una lunga striscia il cui rapporto è il rapporto di diapositiva moltiplicato per il conteggio delle diapositive. Per 4 diapositive verticale che è 1080 x 4 /1350 = 3,2. Lo strumento prende la regione centrata più grande dell'immagine esattamente con quel rapporto. Se l'immagine è più larga della striscia, i lati vengono tagliati; se è più alto, la parte superiore e inferiore vengono tagliati.
Passaggio 2: dividere la striscia in colonne di pixel interi. La larghezza della striscia viene arrotondata a un numero intero di pixel, diviso per il conteggio delle diapositive, e gli eventuali pixel rimanenti vengono distribuiti uno alla volta alle diapositive iniziali Una striscia da 3.199 px in 3 diapositive diventa 1.067 + 1.066 + 1.066 Le colonne sono consecutive, quindi ogni diapositiva inizia esattamente sul pixel dopo la fine di quella precedente Nessuna colonna viene conteggiata due volte e nessuna viene saltata.
Passo 3: scala ogni diapositiva alla dimensione di output. Ogni colonna è disegnata su una tela con le dimensioni predefinite complete, 1080 x 1350 per il ritratto, utilizzando la tela browser's drawImage operazione definita nel Norma HTML WHATWG, con livellamento dell'immagine di alta qualità.
Perché non arrotondare ciascuna posizione di slide' in modo indipendente? Perché i confini frazionari vanno alla deriva Se una striscia è larga 3.201 px e 4 diapositive sono calcolate come 800,25 px ciascuna, arrotondando ogni inizio e larghezza da solo si può mettere una diapositiva's bordo destro un pixel oltre la diapositiva successiva's bordo sinistro La diffusione del resto attraverso le diapositive iniziali mantiene ogni confine un numero intero e ogni diapositiva all'interno di un pixel sorgente degli altri Nel caso 1.067 contro 1.066, quel pixel sorgente in più cambia la scala orizzontale dell'uscita di meno dello 0,1%, che non è visibile.
Un esempio funzionante con conteggi di pixel reali
Prendi un panorama 4000 x 1333, un rapporto di aspetto di 3.0008 e scegli diapositive con ritratto.
Il conteggio suggerito. 3.0008 / 0,8 = 3.751, che arrotonda a 4 diapositive.
La striscia per 4 diapositive. Il rapporto della striscia è 3,2 e il rapporto dell'immagine di 3,0008 è inferiore, quindi l'immagine è relativamente più alta della striscia Lo strumento mantiene l'intera larghezza di 4000 px e taglia l'altezza: 4000 /3,2 = 1.250 px. Ciò rimuove 83 px, circa 41,5 px dall'alto e 41,5 px dal basso.
Le diapositive. 4000 / 4 = 1.000 px ciascuno senza resto, quindi quattro fette di 1000 x 1250, ciascuna aumentata da 1,08 a 1080 x 1350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
Scegliendo invece 3 diapositive. Trascina il cursore a 3 e il rapporto della striscia scende a 2,4 Ora l'immagine è più larga della striscia, quindi lo strumento mantiene l'altezza completa di 1.333 px e taglia la larghezza: 1.333 x 2,4 = 3.199,2 px, arrotondata a 3.199. circa 400 px si stacca da ciascun lato Diviso in 3, cioè 1.067 + 1.066 + 1.066 px, quindi la prima diapositiva ottiene un pixel residuo.
Spingendolo troppo oltre. A 6 diapositive il rapporto di striscia sarebbe 0,8 x 6 = 4,8, molto più largo dell'immagine Il generatore mostra un avviso quando il rapporto image's scende al di sotto del 75% del rapporto di striscia Per questa immagine, 0,8 x 6 x 0,75 = 3,6, e 3,0 è inferiore a 3,6, quindi la pagina dice: & quot; Questa immagine non è abbastanza larga per 6 diapositive in quella forma, quindi ogni diapositiva verrà ritagliata hard top e bottom.& quot; A 5 diapositive la soglia è 3,0 e l'immagine la cancella appena.
Un secondo esempio mostra un panorama che si adatta esattamente Un'immagine 6000 x 1500 è 4:1 Nelle diapositive dei ritratti il suggerimento è 4 / 0,8 = 5, il rapporto delle strisce è 5 x 0,8 = 4,0, e nulla è tagliato affatto: cinque fette di 1200 x 1500, ciascuna ridotta da 0,9 a 1080 x 1350. Passa alle diapositive quadrate e il suggerimento è 4, sempre senza finiture: quattro fette di 1500 x 1500, scalate a 1080 x 1080.
Come si fa passo dopo passo la giostra?
- Aggiungi il panorama. Apri il Divisore carosello Instagram e lascia cadere un'immagine, fai clic per sfogliare o incollarne una dagli appunti Qualsiasi immagine che il browser può decodificare funziona, il che in pratica significa PNG, JPEG, WebP, GIF e AVIF.
- Scegli la forma della diapositiva. Ritratto 4:5 è l'impostazione predefinita La nota sotto il picker riafferma a cosa serve la forma.
- Controlla il conteggio delle diapositive. Accetta il suggerimento o sposta il cursore La striscia di anteprima si ridisegna immediatamente e l'intestazione mostra l'output, ad esempio & quot;4 x 1080x1350".
- Scegli un formato e scarica. Premi & quot; Scarica tutti e 4 come zip" per l'intero set, oppure usa i pulsanti & quot;Slide 1& quot;, & quot;Slide 2& quot; per salvare singole diapositive.
I file sono denominati dal nome del file originale con un numero zero-imbottito: harbor.jpg diventa harbor-01.jpeg, harbor-02.jpeg e così via dentro harbor-carousel.zip. Il riempimento mantiene le diapositive in ordine di scorrimento in qualsiasi file manager, il che conta quando le selezioni tutte sul telefono La libreria zip si carica solo quando si preme il pulsante zip, quindi la pagina stessa rimane leggera.
Carica le diapositive su Instagram in ordine numerico come un singolo post del carosello Pubblicarle fuori ordine è il modo più comune in cui un set corretto di diapositive finisce per sembrare rotto.
Dovresti esportare JPEG, PNG o WebP?
JPEG è la scelta predefinita e giusta per le fotografie Instagram ricodifica comunque i caricamenti come JPEG, quindi un file senza perdita di dati acquista un caricamento più grande e nulla di visibile alla fine La compressione JPEG è definita in Raccomandazione ITU-T T.81, e il generatore codifica ad una qualità di 0,92.
PNG è senza perdite, specificato dal Raccomandazione W3C PNG, e si adatta a panorami che sono illustrazioni, diagrammi o contengono testo, in cui gli artefatti JPEG attorno ai bordi rigidi verrebbero mostrati prima di Instagram' la propria compressione aggiunge altro.
WebP fornisce i file più piccoli con qualità simile e utilizza anche 0,92 per la sua codifica con perdita È una scelta sensata per le diapositive dirette in un posto diverso da Instagram, come una galleria di siti Web.
Se dopo hai bisogno delle diapositive in un altro formato o di una cartella convertita in massa, guida a conversione formato immagine copre ciò che cambia tra JPG, PNG e WebP e quando ne vale la pena.
La suddivisione abbasserà la qualità dell'immagine?
Taglio non; ridimensionamento può Ogni diapositiva è presa dalla sorgente a piena risoluzione e poi scalata a 1080 px di larghezza.
Quando una fetta è più larga di 1080 px, come nell'esempio 6000 x 1500 dove ogni fetta è 1200 px, la diapositiva viene ridimensionata, il che non perde alcun dettaglio visibile Quando una fetta è più stretta di 1080 px, la diapositiva viene ingrandita e apparirà più morbida L'immagine 4000 x 1333 in 4 diapositive ritratto dà fette da 1000 px, un blando ingrandimento di 1,08x Un'immagine larga 2000 px divisa in 5 diapositive dà fette da 400 px, ingrandite 2,7x, e sembrerà morbida su un telefono.
Dall'aritmetica segue una regola pratica: per le diapositive nitide, la sorgente dovrebbe essere larga almeno 1080 px per diapositiva, quindi 4.320 px per 4 diapositive e 5.400 px per 5. se un panorama è più piccolo, meno diapositive appariranno più nitide. Per ulteriori informazioni sul motivo per cui l'ampliamento non può aggiungere dettagli, vedere la guida su ridimensionamento delle immagini senza perdere qualità, che attraversa il downscaling, l'upscaling e il ricampionamento.
Cosa causa una cucitura visibile e come risolverla?
La maggior parte delle cuciture proviene da una delle cinque cause e il generatore rimuove le prime due.
| Riassortimento | Probabile causa | Fix |
|---|---|---|
| Una sottile striscia ripetuta o mancante in corrispondenza di un join | Confini di fetta frazionati arrotondati indipendentemente | Usa lo slicing a pixel interi, come fa il generatore |
| L'ultima diapositiva sembra allungata o tagliata corta | Pixel rimanenti scaricati su una diapositiva | Distribuire il resto sulle diapositive principali |
| Scivola fuori sequenza | Caricato nell'ordine sbagliato | Pubblica nell'ordine del numero di file, 01 per primo |
| Una diapositiva ritagliata in modo diverso dalle altre | Rapporti d'aspetto misti in un post | Esporta ogni diapositiva nella stessa forma |
| Soggetto tagliato in mezzo a un viso o a un segno | Il confine di scorrimento termina sull'argomento | Cambia il conteggio delle diapositive in modo che si sposti un confine |
L'ultima riga è un problema di composizione, non tecnico Con 4 diapositive, i confini si attestano al 25%, 50% e 75% della striscia; con 3 diapositive, al 33% e al 67% Se una faccia person's atterra esattamente su un join, una diapositiva più o meno solitamente sposta il taglio da qualche parte innocuo I volti e il testo su un join sopravvivono allo swipe ma sembrano imbarazzanti ogni volta che uno spettatore si ferma su una singola diapositiva.
Quali sono i limiti dello strumento?
Il cursore va da 2 a 10 diapositive Instagram ne consente di più, ma dopo le dieci un panorama tipico non ha più abbastanza larghezza per dare a ogni diapositiva un dettaglio reale, e ogni diapositiva diventa una striscia stretta che smette di leggere come un'immagine.
Il ritaglio è sempre centrato Se la parte importante del panorama si trova vicino al bordo superiore o inferiore e il conteggio scelto taglia l'altezza, cambia il conteggio o ritaglia prima la fonte con il ritaglia immagine sui social media, che ti consente di scegliere il punto focale.
L'input deve essere un file che il browser identifica come immagine e può decodificare. Un file che non è un'immagine viene rifiutato con un messaggio che lo nomina, e un'immagine corrotta o in un formato che il browser non può leggere ottiene & quot; Quell'immagine non può essere letta." Le foto HEIC da un iPhone non vengono decodificate dalla maggior parte dei browser, quindi convertile prima.
Come ogni strumento sul sito, i download contano per un limite di utilizzo giornaliero Non c'è filigrana e nessun account necessario.
Il panorama viene caricato da qualche parte?
No. L'immagine viene decodificata, ritagliata, tagliata e codificata su un'area HTML del browser e la zip viene assemblata localmente Nulla viene inviato a un server, archiviato o registrato e la pagina continua a funzionare con la rete disconnessa una volta caricata Ciò è importante per gli scatti di prodotti inediti o per il lavoro del client che non hai ancora pubblicato.
Strumenti correlati per i post della giostra
Il generatore di scroll si affianca a una manciata di altri strumenti di immagine creati per i post social, tutti lato client.
la ritaglia immagine sui social media ritaglia una singola immagine su quindici dimensioni di piattaforma con una griglia focale a nove punti Il generatore matte mette un'immagine non quadrata su un quadrato o un ritratto opaco in modo che l'intera immagine sopravviva al feed, che si adatta a un palo di copertina che mostra l'intero panorama piccolo prima della giostra. IL generatore di schede fotografiche costruisce schede di preventivo e grafica in stile notizie da modelli e il filigrana aggiunge un logo o una filigrana firma, in un angolo o piastrellato, prima di pubblicare Ogni strumento nel set è elencato sul hub degli strumenti di immagine sociale.
