Dimensionamento delle immagini istruibili: 13 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Hai problemi a ridimensionare correttamente le immagini? Le tue immagini sono troppo grandi e traboccano dalla cornice come quella sopra? Questo istruibile tenta di riassumere ciò che ho imparato per affrontare questo problema.

Mi è stato detto da Instructable Staff che tutte le immagini caricate sono duplicate in varie proporzioni. Questi pool di immagini vengono quindi estratti e dimensionati in modo diverso a seconda del dispositivo da cui stai visualizzando l'istruzione. Non c'è un modo per specificare nell'editor normale quale dimensione e rapporto visualizzare.

Hanno quindi suggerito che "Un'altra opzione che potrebbe funzionare è se carichi immagini con proporzioni più tradizionali. Qualsiasi cosa da 16:9 a 4:3 dovrebbe essere visualizzata molto bene".

Nota che dicono che questo "può" funzionare. Ecco cosa ho trovato nelle mie lotte per visualizzare le mie immagini in modo decente. (Nota che sto usando le immagini dal mio "Cubo di Rubik reso facile" istruibile, quindi tutte quelle immagini del cubo!)

L'immagine sopra è la sua dimensione originale (600x195) che non rientra in quella gamma di proporzioni tradizionali. Come puoi vedere, Instructables sta visualizzando questa immagine ingrandita troppo grande con i lati sinistro e destro tagliati. Vediamo cosa possiamo fare per visualizzare correttamente questa immagine.

Passaggio 1: proviamo le proporzioni 16:9

Quindi proviamo le proporzioni 16:9 (larghezza:altezza). Manterrò la larghezza originale di 600 pixel, 16:9 significa che l'altezza deve essere di 338 pixel, quindi creeremo una dimensione della tela di 600x338 e ci inseriremo quell'immagine 600x195.

Quindi vediamo come appare questa immagine 600x338 (16:9). È interessante notare che quando ho inserito questa immagine e l'ho visualizzata in anteprima, si adattava perfettamente: i bordi sinistro e destro non erano tagliati! Ne ho fatto uno screenshot solo per prova, guardalo nella prossima diapositiva.

Ma, quando vedo questo nel mio browser (Chrome), quello che vedo nell'immagine sopra, è che i lati destro e sinistro sono di nuovo tagliati! Quindi, da questo esperimento, sembra che il ridimensionamento a un formato 16:9 non risolverà i nostri problemi!

Come nota a margine, 16:9 è il "nuovo" rapporto di aspetto comune noto come "widescreen" mentre 4:3 è lo "schermo intero" della vecchia scuola che era comune ai tempi della TV a tubo. Sì, voi millennial probabilmente non avete la più pallida idea di cosa sto parlando.

Passaggio 2: immagine 16:9 appena caricata come visualizzata in anteprima

Questa immagine è la cattura dello schermo che mostra che la nostra immagine 16:9 sembra perfetta nell'anteprima. Successo vero? Beh, non così in fretta: guarda cosa succede quando visualizziamo effettivamente questa pagina nel nostro browser (Chrome)! I bordi sinistro e destro vengono troncati di nuovo! Basta tornare indietro per far scorrere la diapositiva precedente e vedere di persona.

Lezione appresa: non fidarti dell'anteprima! Ciò che sembra a posto nell'anteprima viene visualizzato in modo diverso nella visualizzazione effettiva con un browser!

Inoltre, sì, c'è molto spazio bianco sotto la mia immagine. Questo perché ho inserito un'immagine 600x195 in una tela 600x338 e l'ho messa in alto, quindi c'è tutto quello spazio bianco vuoto in basso. Cosa possiamo fare al riguardo? Bene… cercheremo di affrontarlo in una diapositiva successiva.

Quindi continuiamo a vedere come possiamo visualizzare questa immagine nella sua interezza.

Passaggio 3: 16:9 visualizzato con i lati sinistro e destro tagliati

Solo per la cronaca, nel caso in cui per qualsiasi motivo il tuo browser visualizzi perfettamente queste immagini 16:9, questo è ciò di cui sto parlando. Ecco uno screenshot di come vedo la mia immagine 16:9 nel passaggio 1 visualizzata dopo l'"assestamento" dopo l'anteprima iniziale: nota che sinistra e destra sono troncate.

Se stai vedendo la mia immagine del passaggio 1 visualizzata perfettamente, beh, ottimo. Fammi sapere! Ma è così che la vedo io. Sì, è molto meglio dell'immagine originale del frontespizio, ma è ancora tagliata. Quindi per me, nonostante i consigli dello staff di Instructables, le proporzioni 16:9 non sono abbastanza. Passiamo alle proporzioni 4:3.

Passaggio 4: proviamo le proporzioni 4:3

Quindi proviamo il rapporto di aspetto 4:3. Manterrò la larghezza originale di 600 pixel, 4:3 significa che l'altezza deve essere di 450 pixel, quindi creeremo una dimensione della tela di 600x450 e ci inseriremo quell'immagine 600x195.

Che aspetto ha questa immagine 600x450 (proporzioni 4:3)?

Ancora una volta, quando lo inserisco per la prima volta, l'immagine sembra fantastica (tranne tutto lo spazio bianco in basso). Sinistra e Destra vengono visualizzati correttamente. Guardandolo in un browser, sembra che Destra e Sinistra continuino a essere visualizzati correttamente.

Come notato in precedenza, tutto quello spazio bianco vuoto sotto l'immagine è dovuto al fatto che ho lasciato cadere la mia immagine 600x195 in una tela 600x450 e l'ho appena posizionata in alto.

Lezione appresa - Il rapporto di aspetto 4:3 sembra essere necessario in modo che i lati destro e sinistro non vengano tagliati. Sfortunatamente, questo significa che ci sarà molto spazio bianco per le immagini corte e larghe, perché dovrai trascinare quelle immagini in una tela di dimensioni 4:3. Sì, potresti centrare la tua immagine in modo che ci sia uguale spazio bianco sopra e sotto ma a prescindere, ci sarà molto spazio bianco sopra o sotto la tua immagine, ma per quanto ne so, questo è il compromesso che farai devi fare in Instructables in modo che le tue immagini vengano visualizzate intatte.

Passaggio 5: 4:3 con immagine centrata

Ecco la stessa immagine 600x195 rilasciata in una tela 600x450 ma centrata in modo che ci sia uguale spazio bianco in alto e in basso. Sembra un po' meglio, il testo non sembra così lontano dall'immagine.

Passaggio 6: 4:3 con immagine in basso

E infine, ecco la stessa immagine inserita e spostata in basso. Ora c'è una tonnellata di spazio bianco vuoto sopra l'immagine. L'immagine ora è realmente separata dalla barra del titolo, ma è più vicina al testo. Quindi questi sono i tuoi compromessi e le lezioni apprese:

• 4:3 sembra essere il rapporto di aspetto necessario per visualizzare le immagini nella loro interezza in Instructables.
• non fidarti dell'anteprima: potrebbe mostrare perfettamente la tua immagine, ma alcune parti potrebbero essere troncate nel browser reale

Passaggio 7: qual è la larghezza minima?

Ora vediamo quale dovrebbe essere la larghezza minima. L'immagine mostrata è di dimensioni 382x206, vicino a 2:1, sembra davvero enorme non è vero? Ovviamente, Instructables ha ingrandito l'immagine per adattarla a una certa larghezza impostata, probabilmente 640 pixel, non ne sono sicuro.

Ma si adatta perché è più "quadrato", cioè non è troppo largo per la sua altezza. Oh aspetta, sono stato ingannato di nuovo da quell'anteprima! In realtà non si adatta: i lati R&L vengono troncati di nuovo.

In realtà, questo è strano, non è solo l'anteprima ad essere incasinata. In realtà l'ho guardato nel browser e all'inizio è stato reso correttamente (cioè, i bordi R&L non sono stati tagliati). Ma guardandolo di nuovo attraverso il browser, ora l'immagine viene ridimensionata con i bordi R&L troncati. Strano.

Quindi proviamo a ridurre l'immagine. Ridurremo l'immagine a 200x108, mantenendo le stesse proporzioni 2:1.

Passaggio 8: restringere l'immagine ma mantenere le proporzioni

Quindi ridimensiono quell'immagine a 200x108, mantenendo le stesse proporzioni 2:1.

Ora di nuovo sembra adattarsi all'inizio (con la risoluzione (qualità dell'immagine) notevolmente deteriorata!) ma ovviamente lo stai guardando e non si adatta affatto e sembra esattamente come l'immagine originale tranne che l'originale ha risoluzione migliore. Ancora una volta, Instructables sta espandendo l'immagine per adattarla a una certa larghezza impostata, quindi è per questo che questa immagine più piccola (200x108) sembra così orribile, molto peggio dell'originale 382x206.

Dico "probabilmente" perché non ho davvero idea di come Instructables visualizzi queste immagini nel tuo browser. Per qualsiasi motivo, se aggiorno la mia cache e rivedo questo Instructable, le dimensioni delle mie immagini non sembrano rimanere coerenti, quindi non so davvero cosa stia facendo Instructables tranne che può essere incoerente. Quindi l'obiettivo di questo Instructable - capire come ridimensionare le immagini in modo che vengano visualizzate almeno in qualche modo in modo coerente!

Passaggio 9: prova che le immagini vengono visualizzate correttamente all'inizio

Ecco cosa ho visto all'inizio subito dopo aver caricato l'immagine: si adatta! (Nota che ho dovuto adattare lo screenshot sopra in un'immagine 1600x1200 (cioè, rapporto 4:3) per fare in modo che Instructables mostri l'intero screenshot!)

Ma ovviamente sai che quando guardi quell'immagine un paio scivola indietro ora, non è più adatta. Vediamo quale deve essere la larghezza minima per adattarlo.

Passaggio 10: provare 382x287 (rapporto 4:3)

Ho mantenuto la larghezza 382 e ho inserito l'immagine originale 382x206 in una tela 382x287 per renderla con proporzioni 4:3 perché abbiamo scoperto in precedenza che Instructable ha bisogno di un'immagine che si adatti a quel rapporto 4:3 per visualizzarla nella sua interezza.

Quindi ora c'è un sacco di spazio bianco vuoto sotto. Si adatta a niente tagliato, ma di nuovo è stato ampliato per riempire una certa larghezza impostata, quindi l'immagine non è nitida. Proviamo a trovare quale sia questa larghezza Instructable perfetta.

Passaggio 11: allargare l'immagine da 300x206 a 600x206 per vedere se viene visualizzata meglio

Ho lasciato cadere l'immagine originale 382x206 (2:1) in una tela 600x206 (3:1) solo per vedere se allargandola a 600 pixel Instructables avrebbe mostrato l'intera immagine. Di nuovo, all'inizio lo faceva, ma come puoi vedere non lo fa ora.

Questa è la cosa davvero strana: ogni volta, quando inserisci un'immagine per la prima volta, sembra che Instructables visualizzi quell'immagine correttamente, indipendentemente dalle dimensioni o dalle proporzioni di quell'immagine. Questa volta mi sono persino disconnesso da Instructables e ho chiuso quella scheda, quindi ho rivisitato questo Instructable "fresco" per così dire per verificare se l'immagine fosse ancora visualizzata correttamente. Di solito questo è sufficiente per consentire a Instructable di fare la sua parte e iniziare a ridimensionare le immagini che non hanno un rapporto di aspetto 4:3 e visualizzarle con i lati sinistro e destro tagliati.

Con mia grande sorpresa, le prime due volte che ho rivisitato questo Instructable "fresco" questa immagine è rimasta visualizzata nella sua interezza, ma ahimè, dopo essermi allontanato per fare qualcos'altro e sono arrivato circa un'ora dopo, questa immagine ha iniziato a essere visualizzata ingrandito con i lati sinistro e destro troncati di nuovo proprio come lo vedi sopra.

Perché o come accade questo? Non ne ho idea. Non ho idea del motivo per cui aspettare un po' di tempo dopo aver caricato un'immagine renderebbe Instructables il rendering diverso, ma lo fa. Come prova, mostrerò la mia cattura dello schermo dell'immagine sopra visualizzata perfettamente nei primi oh, 10-15 minuti dopo averla caricata nella diapositiva successiva.

Passaggio 12: prova che le immagini vengono visualizzate correttamente inizialmente dopo il caricamento

Ecco una cattura dello schermo che mostra l'immagine 600x206 visualizzata nella sua interezza immediatamente dopo il caricamento. Questa è una cattura dello schermo della diapositiva precedente. Torna alla diapositiva precedente e puoi vedere come l'immagine è sollevata ora!

Nota che la mia acquisizione dello schermo era in realtà di dimensioni 1563x766 ma, come ho appreso dai miei esperimenti all'inizio di questo Instructable, sapevo che non si adattava a quel rapporto di aspetto 4:3 (1563x766 è circa 4:2), quindi se avessi appena caricato quello screenshot nella sua dimensione originale Instructable tronca i bordi. Quindi ho inserito quell'immagine in una tela 4:3 ed è per questo che c'è molto spazio vuoto sotto il mio screenshot.

Nota che lo screenshot è stato anche preso prima che cambiassi il titolo del passaggio 11 e finissi di digitare tutto questo testo nel caso te lo stessi chiedendo!

Lezione appresa: la visualizzazione dell'immagine caricata in un browser subito dopo il caricamento non mostrerà necessariamente come verrà visualizzata in futuro. Per qualsiasi motivo, quasi tutte le dimensioni e/o le proporzioni dell'immagine sembrano essere visualizzate correttamente subito dopo il caricamento, e anche per circa 10-15 minuti dopo il caricamento e anche dopo che ti sei disconnesso da Instructables e l'hai vista fresca da una nuova sessione del browser, ecc..

Ma aspetta circa un'ora o più e le cose cambiano! La tua immagine, se non si adatta alle proporzioni 4:3, verrà regolata (di solito ingrandita) da Instructable in modo che i bordi vengano troncati.

Passaggio 13: Conclusione - Cosa ho imparato

Quindi in conclusione: cosa ho imparato?

1. Per visualizzare un'immagine nella sua interezza, mantenere un rapporto di aspetto 4:3 (larghezza:altezza) è un must!

2. Usa immagini originali di grandi dimensioni con la massima risoluzione possibile e rilasciale in una tela con rapporto 4:3. Se è troppo grande, Instructables lo ridimensionerà e avrai immagini belle e nitide.

3. Se la tua immagine è troppo piccola (molto meno di 600 pixel di larghezza) Instructable espanderà l'immagine e la renderà larga almeno 600 pixel, rendendola meno nitida. Dico "ish" perché non so esattamente quale larghezza stia usando Instructable, ma sembra vicino a 600. Probabilmente è 640, che era una larghezza comune ai tempi dei monitor a valvole della vecchia scuola.

600x450 e 640x480 sono proporzioni 4:3. Tutti i monitor a tubo "tutto schermo" della vecchia scuola erano 640x480 (larghezza x altezza).

4. Cosa fare se l'immagine originale non è larga almeno 600 pixel? Tutto quello che puoi fare è rilasciarlo in una tela che si adatta al rapporto 4: 3 che mostra l'immagine vicino alla sua dimensione originale. Se l'immagine originale è piccola, ci sarà molto spazio bianco vuoto, quindi prova a centrare l'immagine o metti lo spazio bianco sopra o sotto l'immagine e falla apparire nel miglior modo possibile.

Per quanto ne so, questo è il compromesso che dovrai fare in Instructables in modo che le tue immagini vengano visualizzate intatte.

Ad esempio, l'immagine sopra è una tela di dimensioni 600x450 con un'immagine 382x206 inserita e centrata in modo da avere lo stesso spazio vuoto sopra e sotto. L'immagine viene visualizzata all'incirca nella sua dimensione originale, penso che Instructables potrebbe espanderla a 640x480 (espansione trascurabile), quindi è il meglio che possiamo fare con quell'immagine originale.

5. NON fidarti dell'anteprima o del modo in cui l'immagine appare per le prime ore dopo averla caricata in Instructable! Per qualsiasi motivo, le dimensioni delle immagini non sembrano rimanere coerenti fino a un paio d'ore dopo averle caricate.

Ogni volta, quando rilasci un'immagine per la prima volta, sembra che Instructables visualizzi quell'immagine correttamente, indipendentemente dalle dimensioni o dalle proporzioni di quell'immagine. Potrebbe anche rimanere visualizzato correttamente per un certo periodo di tempo dopo, ma NON FARTI INGANNARE perché alla fine li ridimensionerà e ti darà problemi a meno che tu non segua la regola del 4:3!

Spero che questo aiuti e per favore, se trovi un modo migliore o hai altri suggerimenti, fammi sapere!