Come combinare immagini per il tuo sito

Combinare le immagini o tenerle separate?

Un collage riunisce più immagini in un solo file. Può offrire una panoramica compatta su una pagina di progetto o mostrare un soggetto accanto a un dettaglio utile. Le immagini dovrebbero rispondere a una domanda comune, per esempio come appare una cucina finita e come funzionano i suoi spazi per riporre gli oggetti.

Tieni separate le immagini quando ognuna richiede una spiegazione, un link o un esame ravvicinato. Una galleria di prodotti permette di osservare ogni vista singolarmente, anziché in una piccola griglia.

Il collage conserva la disposizione anche quando viene visualizzato in piccolo. Le immagini inserite separatamente nell’editor del sito possono disporsi una sotto l’altra sul telefono; quelle unite in un file restano nelle stesse posizioni. La disposizione è quindi prevedibile, ma la pagina ha meno libertà di mostrare ogni foto a una dimensione utile.

Scegli immagini che aggiungano informazioni diverse

Da due a quattro immagini sono un punto di partenza pratico per presentare un progetto. Assegna un compito a ciascuna: una vista d’insieme mostra il contesto, un primo piano mette in evidenza una caratteristica altrimenti difficile da vedere. Due panoramiche quasi identiche di solito dicono meno di una panoramica e un dettaglio utile.

Cerca colori e illuminazione che si accordino. Per un confronto prima e dopo, usa angolazioni, inquadrature e scale simili per rendere il cambiamento più facile da valutare. Evita ritagli che nascondano una differenza importante. La nostra guida alla scelta delle immagini per il sito spiega cosa dovrebbe comunicare ogni immagine.

Scegli una disposizione adatta alle immagini

Nella disposizione a tre immagini di Pixilo, la prima è grande a sinistra e le altre due sono sovrapposte a destra. Cambia l’ordine per scegliere quale foto avrà più spazio. Una griglia normale si riempie da sinistra a destra e poi dall’alto verso il basso. Le celle rimaste vuote mostrano lo sfondo scelto.

Adatta la forma del collage ai riquadri

Larghezza e altezza del collage determinano la forma dei riquadri interni. Un collage quadrato non dà necessariamente riquadri quadrati: con due immagini affiancate, ciascun riquadro è verticale. Una griglia di due righe e due colonne produce riquadri circa quadrati se spazi e margini sono piccoli.

Per due foto verticali affiancate, prova un collage più alto, così anche i riquadri restano verticali. Un collage largo e basso taglia di più sopra e sotto quando riempi i riquadri. Per due foto orizzontali in una riga, un collage più largo può conservare una parte maggiore di ogni scena.

Parti dallo spazio disponibile sulla pagina e prova una disposizione e una forma adatte alle foto. Se il sito richiede una forma fissa, mantienila e cambia la disposizione o la scelta delle immagini. In Pixilo, sblocca le proporzioni per modificare la forma; bloccale di nuovo quando vuoi cambiare solo la dimensione mantenendo le proporzioni.

Mostrare tutta l’immagine o riempire il riquadro?

Mostra tutta l’immagine mantiene visibili tutti i bordi, ma può lasciare spazio intorno. È utile per loghi, diagrammi o foto di prodotti in cui il ritaglio eliminerebbe informazioni importanti.

Riempi il riquadro ritaglia l’immagine per occupare il suo spazio senza deformarla. La griglia ha così bordi uniformi, ma devi controllare cosa viene escluso. Seleziona ogni miniatura e regola la posizione del ritaglio per mantenere visibile il soggetto importante.

Se un riquadro non può contenere sia un volto sia l’attività accanto, prova una forma o disposizione diversa, mostra tutta l’immagine oppure scegli un’altra foto. Spostare il ritaglio non può far entrare un’intera scena ampia in un riquadro stretto. Usa prima lo strumento di ritaglio se vuoi un’inquadratura più precisa dell’originale, poi controlla come si inserisce nel collage.

Separa le immagini con gli spazi

Un piccolo spazio aiuta a distinguere le foto adiacenti. Un margine esterno incornicia il collage, ma riduce anche lo spazio delle immagini. Mantieni entrambi contenuti se il collage compare in una colonna stretta. Si riducono insieme all’immagine quando viene visualizzata più piccola.

Scegli uno sfondo che si accordi con le foto e la pagina. Compare negli spazi, nei margini e nelle aree lasciate libere dalle immagini che non riempiono i riquadri. Cambiare colore o scegliere la trasparenza non elimina uno sfondo già presente dentro una foto.

Combina le immagini con Pixilo

1. Apri lo strumento per combinare immagini e scegli i file JPG, PNG o WebP.
2. Scegli la disposizione e usa le frecce sotto le miniature per impostare l’ordine.
3. Imposta larghezza e altezza dell’intero collage, compresi gli spazi e il margine esterno.
4. Mostra ogni immagine intera o riempi il riquadro. Se usi il ritaglio, seleziona ogni miniatura e regola la posizione. I cursori sono disponibili solo nelle direzioni in cui l’immagine viene ritagliata.
5. Imposta spazi, margine esterno e colore o trasparenza dello sfondo.
6. Scarica il PNG, controlla la qualità e prepara la versione da pubblicare.

Con Aggiungi immagini puoi inserire altre foto senza perdere ordine, ritagli o impostazioni esistenti. Sostituisci immagini cambia la selezione. La disposizione con una grande immagine e due piccole richiede esattamente tre immagini; aggiungerne una quarta fa passare alla griglia.

Esempio: quattro foto di una cucina finita

Un’impresa di ristrutturazioni vuole una presentazione compatta su una pagina di progetto. Sceglie una vista della stanza, l’interno di un mobile contenitore, un dettaglio del piano di lavoro e l’illuminazione sopra il bancone. Ogni foto mostra un aspetto diverso dello stesso lavoro terminato.

L’impresa parte da una griglia 2 × 2 per mostrare tutti e quattro gli aspetti. Se la vista d’insieme fosse il principale punto di forza, la disposizione a tre immagini potrebbe darle più spazio, con due dettagli accanto e la quarta foto in un’altra parte della pagina.

La pagina mostra il collage largo al massimo 600 pixel. Per questo esempio, esportalo a 1200 × 800 pixel, con spazi di 16 pixel, un margine esterno di 24 pixel e sfondo bianco. Il file è largo il doppio della visualizzazione, per offrire più dettaglio sugli schermi con maggiore densità di pixel. Sono impostazioni di esempio, non una dimensione obbligatoria per ogni sito. La nostra guida alle dimensioni delle immagini per il web spiega come sceglierle per la tua pagina.

Riempi i riquadri e metti prima la vista d’insieme, seguita dal mobile, dal piano di lavoro e dall’illuminazione. Regola ogni ritaglio per mostrare la caratteristica che la foto deve spiegare.

Su un telefono, a una larghezza di visualizzazione di 360 pixel, ogni foto misura solo circa 170 pixel. Il mobile e le lampade restano riconoscibili, ma supponiamo che la giunzione del piano sia troppo piccola da valutare. Togli quella foto dal collage e mostrala separatamente più grande. Disponi poi le tre foto rimaste dando più spazio alla vista d’insieme. Aumentare soltanto le dimensioni di esportazione non darebbe alla giunzione più spazio sulla pagina.

Controlla il collage nella pagina su mobile

Visualizza l’anteprima della pagina a larghezze da computer e telefono, senza zoomare. Verifica cosa si può davvero capire: confrontare due finiture, vedere il contenitore o seguire la sequenza. Riconoscere il soggetto generale non basta se il dettaglio utile è scomparso.

Controlla l’immagine nella pagina, non solo il file scaricato. Il tema del sito può applicare un ulteriore ritaglio per inserirla in un’area fissa. Modifica l’area o le impostazioni di visualizzazione se tagliano parte del collage.

Se la disposizione diventa affollata, semplificala o mantieni le immagini separate. Se il tuo strumento per creare siti supporta un’immagine diversa su mobile, prepara una versione con meno foto o una disposizione verticale. La nostra guida alle immagini responsive spiega questo approccio.

Mantieni titoli e indicazioni essenziali come testo della pagina. Il testo dentro un’immagine si riduce con essa ed è più difficile da aggiornare. Aggiungi didascalie esplicative nell’editor del sito.

Aggiungi una didascalia e un testo alternativo utile

Una didascalia può identificare il progetto e spiegare l’ordine delle foto. Per la griglia della cucina: «Ristrutturazione della cucina completata. Dall’angolo in alto a sinistra, in senso orario: vista d’insieme, contenitore estraibile, illuminazione del bancone e dettaglio del piano di lavoro». Aggiorna il testo se sposti o rimuovi una foto.

Un collage informativo esportato in un file richiede un testo alternativo per l’intera immagine. Qui potrebbe essere: «Cucina ristrutturata con contenitore estraibile, giunzione a filo del piano di lavoro e lampade sopra il bancone». Descrivi ciò che conta anziché scrivere soltanto «Collage di quattro foto».

Se le immagini illustrano un confronto dettagliato, spiega le differenze principali nel testo vicino invece di far entrare tutto nel testo alternativo. Le indicazioni del W3C sulle immagini complesse spiegano come affiancare un’alternativa breve a una descrizione più completa. La nostra guida a testi alternativi e nomi dei file aiuta a scrivere descrizioni adatte alla pagina.

Prepara il file per il sito

Pixilo salva il collage in PNG, mantenendo la trasparenza e senza aggiungere compressione con perdita durante l’esportazione. Questo non recupera dettagli assenti nelle foto originali. Un’immagine piccola può diventare poco nitida quando viene ingrandita per riempire il riquadro, soprattutto dopo un ritaglio stretto. Esamina ogni foto nel collage scaricato. Se una è molto meno nitida delle altre, usa un originale più grande o un riquadro più piccolo.

Un collage composto soprattutto da foto può produrre un PNG pesante. Usa PNG in WebP o, se non serve la trasparenza, PNG in JPG per creare una copia per il sito. Confronta dimensione del file e qualità visibile con il PNG. Osserva dettagli fini e bordi mentre regoli la qualità: il file più piccolo non è utile se nasconde la caratteristica da mostrare.

Se lo sfondo della pagina deve essere visibile attraverso l’immagine, conserva una versione con trasparenza. JPG non la supporta. La nostra guida ai formati delle immagini per il web approfondisce le opzioni.

Carica la versione scelta e verifica che la pagina usi il file e le dimensioni previsti. Conserva le foto originali per modifiche future: non puoi riordinare le foto all’interno del PNG scaricato.