Ogni volta che carichi un'immagine, se ne creano fino a 5 copie di dimensioni ridotte. Duda poi le distribuisce in automatico sui siti desktop, tablet e mobile in base alla dimensione adeguata, assicurandosi che i visitatori del sito vedano sempre l'immagine nella dimensione giusta per il dispositivo.
- È possibile caricare fino a 15 KB di file (inclusi immagini, video, clip audio e file) per sito e ogni file non deve superare i 200 MB.
Requisiti di sistema per Webp
Le immagini Webp sono supportate sulle seguenti versioni:
- iPhone: versione 14 e 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 dell'immagine ottimizzate per dispositivo
L'immagine caricata non viene mia ingrandita, bensì vengono create solo immagini più piccole dell'originale. Ad esempio, se viene caricata un'immagine larga 2000 pixel, se ne creeranno 5 nuove copie ottimizzate. Se viene caricata un'immagine larga 100 pixel, non saranno create nuove immagini.
Tipo di immagine |
Larghezza immagine |
|---|---|
Sfondo |
2880 pixel |
Desktop |
1920 pixel |
Tablet |
1280 pixel |
Smartphone |
640 pixel |
|
Miniatura Anteprima blog |
160 pixel 300 pixel |
L'ottimizzazione può essere disabilitata per le immagini di sfondo, il Immagine e il widget .
Per ulteriori informazioni, consulta i seguenti articoli:
Disabilitare l'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 3.145.728 pixel. È improbabile che le tue immagini superino questo limite, ma puoi verificarlo rapidamente moltiplicando la larghezza dei pixel per l'altezza.
Le dimensioni dell'immagine non devono superare i 200 MB.
Il caricamento di un'immagine di dimensioni maggiori potrebbe causare i seguenti errori:
- Le immagini non si caricano.
- Le immagini si caricano, ma le anteprime nel selettore di immagini non vengono visualizzate.
- Le immagini non vengono caricate nell'editor.
- Le immagini non vengono caricate sul sito live.
Linee guida per le dimensioni relative al widget Immagine
Dispositivo di scorrimento
In genere, il Slider viene usato con le immagini più grandi, per amplificarne l'effetto. Gli slider di solito si estendono da un'estremità all'altra, per cui è consigliabile usare immagini più larghe che vi si adattino. Per gli slider quadrati, usa una proporzione uniforme, come 1:1.
È meglio scegliere immagini con una buona spaziatura interna in modo che, se ridimensionato, il contenuto principale dell'immagine non venga tagliato. Per mantenere un design coerente, le proporzioni dell'immagine non devono variare all'interno dello slider.
- Proporzioni comuni: 16:9, 3:4
- Dimensioni di risoluzione comuni (px): 1600x900, 1280x720, 1280x960
I dispositivi mobili hanno spesso proporzioni opposte rispetto ai dispositivi desktop. Per visualizzare correttamente gli slider sui dispositivi mobili, potrebbe essere necessario utilizzare la funzione "Nascondi sul dispositivo".
Galleria di foto
Il Galleria fotografica è il più flessibile da utilizzare con le immagini, perché presenta molte opzioni di layout. Ad esempio, è possibile avere una galleria con riquadri delle stesse dimensioni per tutte le immagini o un mosaico che presenta dimensioni diverse per ciascuna immagine.
Le proporzioni delle immagini nella galleria fotografica devono riflettere la modalità di visualizzazione desiderata.
- Ad esempio, le gallerie in stile quadrato devono avere un rapporto delle immagini 1:1.
- Per le gallerie con immagini alte, il valore dell'altezza dev'essere superiore, ad esempio con proporzioni come 2:5 o 200×500 pixel.
Per mantenere un design coerente, le proporzioni delle immagini devono essere sempre le stesse. Lascia una spaziatura interna all'immagine se desideri usare l'effetto hover, in modo che le immagini non risultino tagliate.
- Proporzioni comuni: qualsiasi proporzione.
- Dimensioni di risoluzione comuni (px): qualsiasi risoluzione, ma non superiore a 1500 px per la velocità della pagina.
Icone
Le icone rappresentano una parte importante di ogni sito. Sono marcatori visivi per le informazioni e possono conferire un aspetto moderno al sito. È possibile usare PNG trasparenti, JPEG o SVG.
- Proporzioni comuni: generalmente 1:1, ma qualsiasi proporzione è accettata.
- Dimensioni di risoluzione comuni (px): 200x200, 80x80 o qualsiasi risoluzione. I file SVG possono essere ridimensionati con qualsiasi risoluzione.
Per ulteriori informazioni, consulta Icone del sito.
I file SVG sono dei file-immagine che contengono codice HTML. Ciò significa che quando si aggiunge un'icona SVG al sito, allo stesso tempo si aggiungono righe di codice. Gli SVG complessi, oppure la presenza di SVG multipli, possono aggiungere migliaia di linee di codice e causare il rallentamento dei tempi di caricamento del sito. Nel caso vi sia bisogno di utilizzare più icone SVG nella stessa pagina, consigliamo di trasformarne alcune in immagini normali (.png, .jpeg e così via) in modo da evitare problemi di caricamento o alla funzionalità.
Favicon
Le favicon non vengono utilizzate sul tuo sito reale, ma visualizzate nella scheda quando gli utenti aprono il sito web. Ti consigliamo di usare il formato ICO. Per convertire i file di immagine in ICO, consulta la seguente risorsa.
- Proporzioni richieste: 1: 1
- Dimensioni di risoluzione consentite (px): 24x24, 36x36, 48x48
Loghi
Dato che i file SVG non sono ottimizzati allo stesso modo degli altri file immagine, ti consigliamo di usare questo formato per le immagini del logo. Così facendo, anche se carichi un logo di piccole dimensioni, l'immagine non perderà di qualità.
Proporzioni vs risoluzione
Le proporzioni sono il rapporto degli attributi di larghezza e altezza di un'immagine. Un rapporto proporzionale di 16:9 può corrispondere a un'immagine di 16×19 pixel o di 1600×900 pixel: in pratica, qualsiasi risoluzione di immagine con proporzione 16:9.
Visualizzazione dei due rapporti proporzionali più comuni:
Proporzioni per dispositivo
Sebbene le immagini vengano ottimizzate sul sito, in realtà non ne viene ridimensionato il design delle immagini su di esso. Un'immagine con proporzioni 16:9 sembrerà perfetta su desktop, poiché questo dispositivo è largo. Un dispositivo mobile, invece, è molto più ridotto quindi un formato 16:9 a volte sembrerà piccolo.
Per compensare, è possibile utilizzare la funzione Nascondi su dispositivo per creare versioni dell'immagine specifiche per dispositivo oppure ridimensionare l'immagine per adattarla. Le modifiche alle dimensioni sono indipendenti dal dispositivo.
Considerazioni
Una dimensione maggiore non è sempre ideale
Caricare un'immagine con la massima risoluzione sul sito garantisce che i tuoi clienti e utenti la vedano sempre in alta risoluzione. Tuttavia, tieni presente che le immagini di grandi dimensioni incidono significativamente sulla velocità della pagina. Poiché le immagini ad alta risoluzione sono rimpicciolite, gli utenti normalmente non notano la differenza di risoluzione. È preferibile caricare immagini commisurate alla finalità d'uso. Ad esempio, se sul tuo sito è presente un'immagine di 300×300 pixel, non sarà il caso di caricarla in versione 4000×4000.