Ogni volta che carichi un'immagine, vengono create fino a 5 copie ridotte dell'immagine. Guesty Siti web inserisce automaticamente l'immagine nelle dimensioni appropriate nei siti desktop, tablet e dispositivi mobili, assicurandosi che i visitatori del tuo sito visualizzino sempre l'immagine delle dimensioni corrette per il loro dispositivo.
Nota:
- È possibile caricare fino a 15.000 file (inclusi immagini, clip audio, icone e altri file) per sito e ogni file non deve superare i 50 MB.
Requisiti di sistema per WebP
Per le immagini WebP sono supportate le seguenti versioni:
- iPhone : v14 e versioni successive
- Mac/Safari : ultima versione
- Chrome : tutte le versioni
- Android : tutte le versioni
Sono supportati i seguenti tipi di file immagine:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, WebP
Dimensioni delle immagini ottimizzate per dispositivo
Le dimensioni dell'immagine caricata non vengono aumentate e vengono create solo immagini più piccole di quella originale. Ad esempio, se viene caricata un'immagine con larghezza di 2000 px, verranno create 5 nuove copie ottimizzate. Se viene caricata un'immagine con larghezza di 100 px, non verrà creata alcuna nuova immagine.
Tipo di immagine |
Larghezza dell'immagine |
|---|---|
Sfondo |
2880px |
Scrivania |
1920px |
Tavoletta |
1280px |
Mobile |
640px |
Miniatura Miniatura del blog |
160px 300px |
Nota:
È possibile disattivare l'ottimizzazione per le immagini di sfondo, per il Immagine e per il Galleria fotografica.
Per ulteriori informazioni, consultare i seguenti articoli:
La disattivazione dell'ottimizzazione delle immagini potrebbe influire sulla velocità e/o sulle prestazioni della pagina.
Dimensione massima dell'immagine
L'area totale di un'immagine non può superare i 3.145.728 pixel. È improbabile che una qualsiasi delle tue immagini superi questo limite, ma puoi verificarlo rapidamente moltiplicando la larghezza in pixel per l'altezza.
La dimensione dell'immagine non deve superare i 15 MB.
Il caricamento di un'immagine più grande del limite potrebbe causare i seguenti errori:
- Impossibile caricare le immagini.
- Le immagini vengono caricate, ma le miniature nel selettore immagini non vengono visualizzate.
- Le immagini non vengono caricate nell'editor.
- Le immagini non vengono caricate sul sito live.
Linee guida sulle dimensioni delle immagini per widget
Cursore
Il widget Slider viene solitamente utilizzato con immagini di grandi dimensioni per un effetto più spettacolare. Gli slider si estendono solitamente da un'estremità all'altra, quindi è consigliabile utilizzare immagini con una larghezza maggiore per adattarle allo slider. Per gli slider quadrati, utilizzare un rapporto di aspetto uniforme, ad esempio 1:1.
È consigliabile scegliere immagini con un buon padding in modo che il contenuto principale dell'immagine non venga tagliato durante il ridimensionamento. Le proporzioni delle immagini dovrebbero essere le stesse nello slider per garantire coerenza grafica.
- Proporzioni comuni: 16:9, 3:4
- Dimensioni di risoluzione comuni (px): 1600x900, 1280x720, 1280x960
Nota:
I dispositivi mobili hanno spesso proporzioni opposte rispetto ai dispositivi desktop. Potrebbe essere necessario utilizzare la funzione "Nascondi sul dispositivo" per visualizzare correttamente gli slider sui dispositivi mobili.
Galleria fotografica
Il widget Galleria Fotografica è il più flessibile da utilizzare con le immagini, perché offre numerose opzioni di layout. Ad esempio, è possibile creare una galleria a riquadri, con le stesse dimensioni per tutte le immagini, oppure un mosaico, con dimensioni diverse per ogni immagine.
Le proporzioni delle immagini nella Galleria fotografica devono riflettere il modo in cui desideri visualizzarle.
- Ad esempio, le gallerie in stile quadrato dovrebbero avere un rapporto immagini 1:1.
- Le gallerie con immagini alte dovrebbero avere proporzioni di altezza maggiori, come 2:5 o 200px per 500px.
Le proporzioni delle immagini dovrebbero essere le stesse per garantire la coerenza del design. Lascia un po' di spazio nell'immagine per utilizzare l'effetto hover, in modo che le immagini non vengano tagliate.
- Proporzioni comuni: qualsiasi proporzione.
- Dimensioni di risoluzione comuni (px): qualsiasi risoluzione, ma non superiore a 1500px per la velocità della pagina.
Icone
Le icone sono una parte molto importante di qualsiasi sito. Sono indicatori visivi di informazioni e possono aggiungere un aspetto moderno al tuo sito. Puoi utilizzare PNG trasparenti, JPEG o SVG.
- Proporzioni comuni: in genere 1:1, ma qualsiasi proporzione andrà bene.
- Dimensioni di risoluzione comuni (px): 200x200, 80x80 o qualsiasi risoluzione. Gli SVG possono avere qualsiasi risoluzione.
Per ulteriori informazioni, vedere Icone del sito.
Nota:
Gli SVG sono file immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito, stai anche aggiungendo righe di codice. Più SVG complessi possono aggiungere migliaia di righe di codice e rallentare il caricamento del sito. Se devi utilizzare più icone SVG sulla stessa pagina, ti consigliamo di convertirne alcune in immagini normali (.png, .jpeg, ecc.) per evitare problemi di caricamento o funzionalità.
Favicon
Le favicon non vengono utilizzate sul tuo sito web, ma vengono visualizzate nella scheda quando gli utenti aprono il tuo sito web. Si consiglia di utilizzare il formato ICO. Per convertire i file immagine in ICO, consulta la seguente risorsa.
- Proporzioni richieste: 1:1
- Dimensioni di risoluzione consentite (px): 24x24, 36x36, 48x48
Loghi
Si consiglia di utilizzare il formato SVG per le immagini del logo, poiché i file SVG non sono ottimizzati come gli altri file immagine, quindi anche se il logo caricato è di piccole dimensioni, non perderai qualità.
Rapporto d'aspetto vs risoluzione
Il rapporto d'aspetto è il rapporto tra larghezza e altezza di un'immagine. Un rapporto d'aspetto 16:9 può essere un'immagine di 16x9 px o di 1600x900 px. Si tratta sostanzialmente di qualsiasi risoluzione di immagine che abbia un rapporto di 16:9.
Visualizzazione dei due rapporti d'aspetto più comuni:
Proporzioni per dispositivo
Sebbene le immagini siano ottimizzate sul tuo sito, ciò non ne modifica effettivamente le dimensioni. Se utilizzi un'immagine con un aspect ratio di 16:9 sul desktop, apparirà perfetta sul desktop, poiché un dispositivo desktop è ampio. Un dispositivo mobile, tuttavia, è molto più piccolo, quindi un aspect ratio di 16:9 a volte apparirà piccolo.
Per compensare, puoi utilizzare la funzione "Nascondi sul dispositivo" per creare versioni specifiche per quei dispositivi oppure puoi ridimensionare l'immagine per adattarla. Le modifiche alle dimensioni sono indipendenti dal dispositivo.
Considerazioni
Il più grande non è sempre il migliore
Caricare la risoluzione più alta possibile per il tuo sito garantisce che le immagini del tuo sito siano ad alta risoluzione per i tuoi clienti. Tuttavia, tieni presente che le immagini di grandi dimensioni hanno anche un impatto drastico sulla velocità di caricamento pagina. Poiché le immagini ad alta risoluzione vengono ridimensionate, gli utenti normalmente non notano la differenza di risoluzione. È meglio caricare immagini di dimensioni pari a quelle per cui sono state concepite. Ad esempio, se hai un'immagine di 300px x 300px sul tuo sito, non caricarla come immagine di 4000px x 4000px.
