Scarica il nostro workbook gratuito per progettare il tuo sito in tutta sicurezza.
L'indirizzo e-mail inserito non è valido.
Grazie per l'iscrizione.
Indicando la tua e-mail, confermi di aver letto e compreso la nostra Informativa sulla privacy e acconsenti a ricevere materiale di marketing da parte di Squarespace.
La prima impressione del tuo pubblico sul tuo sito web è influenzata dalle immagini che scegli per rappresentare il tuo brand. Le foto e gli altri media che completano le parole sul tuo sito sono parte integrante della creazione di un sito web che ti aiuterà a raggiungere i tuoi obiettivi.
Scopri come ottenere immagini per il tuo sito web, i migliori formati di immagine, come caricare le immagini su una pagina web e come ottimizzare le foto per i motori di ricerca e l'accessibilità.
Dove trovare le immagini per il tuo sito web
Il primo step per scegliere le immagini per il tuo sito web è identificare i tipi di immagini in linea con il tuo brand e il design del sito stesso. Una volta determinata l'estetica che rappresenta il tuo brand, puoi procurarti le foto e le immagini che gli daranno vita.
Le foto di archivio o i generatori di immagini sono un punto di partenza utile, soprattutto se stai avviando la tua attività e potresti non avere ancora a disposizione molte foto.Squarespace offre integrazioni con i servizi di foto di archivio per aiutarti a trovare immagini di alta qualità e convenienti da utilizzare sul tuo sito web.
Le altre opzioni per ottenere immagini per il tuo sito web includono scattare foto di persona oppure, se il tuo budget lo consente, assumere un fotografo.
Squarespace collabora con soona per offrire servizi fotografici per prodotti. Spedisci i tuoi prodotti a soona e seleziona i tipi di immagini e lo stile che desideri, dalle GIF ai video, agli scatti di prodotti modellati. Puoi creare il tuo set fotografico o utilizzare il loro Squarespace Starter Pack o Squarespace Deluxe Pack.
Realizzare le proprie foto o collaborare con un professionista di terze parti richiede più tempo rispetto alla selezione di foto stock, ma i vantaggi sono notevoli. Foto che rappresentano direttamente il tuo brand, foto di te, del tuo studio o del tuo negozio, dei tuoi articoli in vendita o del tuo team in azione, possono rafforzare la tua credibilità e creare fiducia nel tuo pubblico.
Ricorda che, indipendentemente dal fatto che utilizzi o meno foto di archivio, se vendi prodotti, scatta foto originali per il tuo negozio online.
Come formattare le immagini per il sito web
Quando aggiungi foto al tuo sito Web, scegli immagini ad alta risoluzione con forme simili alle aree in cui le aggiungi nel modello di sito Web. Ad esempio, se stai caricando un'immagine banner, scegli un'immagine banner più larga che alta.
Inoltre, grazie al responsive design dei siti Squarespace, le tue immagini si ridimensioneranno automaticamente per adattarsi a qualsiasi piattaforma di visualizzazione: dispositivi mobili, browser desktop o display di varie larghezze.
Affinché le foto e le immagini vengano caricate in modo rapido e pulito sul tuo sito web, presta molta attenzione ai formati di immagine, alla risoluzione e alle dimensioni.
Migliori formati di immagine per siti Web
I due tipi di formati di immagine da privilegiare sono JPEG (per le foto) e PNG (per altre immagini). Il formato migliore per le foto destinate ai siti web è il JPEG, che consente di riprodurre l'ampio spettro di colori che caratterizza le fotografie. Il formato immagine migliore per i siti web è il PNG, che supporta elementi grafici nitidi come loghi o infografiche in cui non c'è molta varietà di colori.
Le migliori dimensioni e risoluzioni per le immagini destinate ai siti web
Qualsiasi formato tu scelga, quelle ad alta risoluzione sono fondamentali nel caricamento delle immagini. Consigliamo dimensioni dell'immagine comprese tra 1500 e 2500 pixel.
È importante trovare un equilibrio tra immagini ad alta risoluzione e file di dimensioni più piccole. Se carichi foto o immagini troppo grandi, finirai per rallentare il caricamento della pagina. Prova a regolare la risoluzione dell'immagine e le dimensioni del file comprimendo il file immagine oppure cerca di ridimensionare l'immagine se è molto grande. Puoi farlo con i programmi di editing di immagini più popolari.
Una dimensione massima di 500 KB per immagine è la procedura consigliata per i file JPEG o PNG. Ogni pagina del tuo sito web deve avere dimensioni inferiori a 2 MB per ottimizzare il tempo di caricamento della pagina. Esistono due modi per scoprire le dimensioni di ciascuna pagina Web: con strumenti online di terze parti o con gli strumenti per sviluppatori integrati del tuo browser web.
Per trovare le dimensioni di ogni pagina Web con gli strumenti per sviluppatori:
Clicca con il pulsante destro del mouse sulla pagina Web e seleziona "Ispeziona" o "Ispettore di pagina" (a seconda del tipo di browser in uso). La dashboard che viene visualizzata si chiama strumenti per sviluppatori.
Seleziona la scheda "Rete" nella parte superiore della dashboard.
Aggiorna la pagina.
Il numero che appare prima della parola "trasferito" indica le dimensioni di quella pagina Web. Ad esempio, se dice "200 KB trasferiti", significa che la tua pagina Web è inferiore alle dimensioni massime di 2 MB.
Aggiungere foto al tuo sito Web
Dopo aver selezionato e compresso le foto, è il momento di aggiungerle al tuo sito Web. Gli step da seguire sono due: adattare le immagini nel layout di pagina e armonizzare immagini e testo.
Incorporare foto nel tuo sito Web
Inizia con un modello di sito web, che rappresenta il modo più semplice per aggiungere foto e altre immagini al tuo sito. I modelli di Squarespace consentono di collocare facilmente le immagini in posizioni efficaci, senza bisogno di competenze di progettazione. Puoi caricare le foto direttamente sull'editor del tuo sito web oppure aggiungerle alla Libreria delle risorse, dove potrai organizzarle e riutilizzarle da un unico posto.
Gli strumenti di creazione di siti web come Squarespace offrono anche la possibilità di personalizzare la visualizzazione delle immagini. Ad esempio, è possibile caricare singole immagini o aggiungere più immagini in una galleria o in un formato slideshow, il che potrebbe essere utile a chi sta realizzando un sito web di portfolio.
Se non vuoi che un'immagine più grande venga ritagliata, regola il punto focale. È inoltre possibile regolare la dimensione e il posizionamento delle immagini tramite i Blocchi immagine Carta, Sovrapposizione e Collage, oltre a perfezionarne il layout selezionando Larghezza immagine nel pannello Design. Per regolare ulteriormente il layout delle immagini, è possibile ritagliare le immagini utilizzando l' Editor immagini e aggiungere blocchi per modificare la spaziatura nella pagina.
Bilanciare le immagini e il testo
Le tue immagini dovrebbero integrare il contenuto scritto del tuo sito web e viceversa, perché nessun elemento funziona senza l'altro. Ad esempio, un'immagine grande con poco testo può illustrare i tuoi obiettivi proprio come le immagini che usi per suddividere le pagine con testi più lunghi.
È consigliabile non includere del testo nei file immagine. Piuttosto, quando aggiungi foto al tuo sito Web, sovrapponi del testo con i campi di testo. Questo metodo riduce i problemi di ridimensionamento del da parte del browser e consente di eseguire la scansione del testo da parte dei motori di ricerca.
Ottimizzare le immagini sul tuo sito Web
L'ottimizzazione per i motori di ricerca (SEO) non funziona solo per il contenuto scritto del tuo sito web. I nomi che dai ai file immagine influiscono sul modo in cui i motori di ricerca indicizzano il tuo sito Web e su come gli utenti ti trovano. È anche importante ottimizzare il testo alt che dai alle immagini, che rappresenta una descrizione più dettagliata dell'immagine rispetto al nome del file.
Assegna a ciascuno dei tuoi file un nome semplice che i motori di ricerca possano riconoscere e non utilizzare la punteggiatura, ad eccezione dei trattini. Ad esempio, una foto di nail art per un salone di bellezza potrebbe avere come nome del file "nail-art-floreale-centro-unghie".
Ancora più importante è scrivere un testo alternativo per tutte le foto e le immagini che aggiungi al tuo sito web. L'utilizzo di immagini con testo alt non solo aiuta la SEO, ma aiuta a ottimizzare il tuo sito web per l'accessibilità da parte degli screen reader. Queste descrizioni devono essere coincise e non superare il limite di 250 caratteri.
Prendi in considerazione ciò che una persona ipovedente potrebbe voler sapere su un'immagine che non riesce a vedere. Ad esempio, un testo alternativo utile per una foto di nail art potrebbe essere: "Foto di mani con unghie lunghe e squadrate dipinte di bianco con disegni floreali rossi". Puoi rimuovere gli articoli delle frasi (ad es. un, uno/a, il ecc.) e la punteggiatura, a patto che gli screen reader siano in grado di cogliere le tue frasi complete in modo coerente.
Questo post è stato aggiornato il 17 novembre 2023.