I media svolgono un ruolo cruciale nel migliorare l'appeal visivo e l'efficacia del tuo sito web. L'uso corretto di immagini, video e altri tipi di contenuti multimediali può coinvolgere i visitatori, trasmettere informazioni in modo più efficace e creare un'esperienza utente più dinamica
-
Immagini, icone, clip audio e file: fino a 15.000 immagini, clip audio e file combinati per sito. File aggiuntivi possono generare un messaggio di errore. Ogni file non deve superare i 50 MB
Tieni presente che se utilizzi un piano di negozio nativo Elite, il limite di file viene aumentato a 20.000.
-
Video: fino a 100 per sito. File aggiuntivi possono generare un messaggio di errore. Ogni file non deve superare i 200 MB. I file di dimensioni maggiori possono generare un messaggio di errore o il caricamento non completo. Se sono necessari video aggiuntivi, YouTube o Vimeo potrebbero essere
-
Gli spazi all'interno dei nomi dei file non sono supportati. È possibile caricare file che contengono spazi, ma potrebbero causare un comportamento imprevisto del file.
-
[en] After you delete a file, its name may stay cached for a while. Give new uploads a different name, or you may see the error Name already exists, or the deleted file may keep showing.
-
Tipo di file SVG: gli SVG sono file di immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito stai aggiungendo anche righe di codice. SVG multipli e complessi possono aggiungere migliaia di righe di codice e rallentare il caricamento del sito. Se hai bisogno di utilizzare più icone SVG sulla stessa pagina, ti consigliamo di trasformarne alcune in immagini normali (.png, .jpeg, ecc.) per evitare problemi
-
I file di qualsiasi tipo non possono essere caricati nella cartella principale di un dominio.
-
I metadati dei file (inclusi i dati EXIF) non sono supportati e verranno rimossi al momento del caricamento.
proporzioni sono la relazione tra la larghezza e l'altezza del file multimediale e rappresentano il valore numerico della sua forma (in genere, le proporzioni sono più importanti nelle immagini e nei video). Le dimensioni del file multimediale non ne modificano necessariamente le proporzioni. Ad esempio, sia 1280x720px che 3840x2160px
Se le proporzioni di un file multimediale sono significativamente diverse dalla forma della sezione o dell'elemento in cui verrà utilizzato, potrebbe sembrare tagliato. A seconda del widget o dell'elemento, la modifica delle proporzioni del file può essere il modo migliore per correggerlo. Per le immagini, l'editor di immagini integrato può essere utilizzato per modificare le proporzioni ritagliandole. Se un video deve essere modificato, è necessario farlo con uno strumento esterno
Nota
-
Il limite di dimensione del file è di 50 MB per immagine.
-
I file di immagine contribuiscono al limite di 15.000 file.
Sono supportati i seguenti tipi di file di immagine:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
L'editor ottimizza le immagini su richiesta, adattandole al dispositivo utilizzato e alle dimensioni visibili sul sito.
Tieni presente che la dimensione dell'immagine caricata non viene mai aumentata e solo le immagini visualizzate sul sito più piccole dell'originale sono ottimizzate. Ad esempio, se carichi un'immagine con una larghezza di 2000 px ma viene utilizzata in un'area che richiede solo 1920 px, l'immagine verrà ottimizzata a 1920 px. Tuttavia, se carichi un'immagine con una larghezza di 100 px, non sarà ottimizzata e potrebbe apparire pixelata
Sebbene l'editor possa ottimizzare immagini di qualsiasi dimensione, si consiglia di caricare immagini vicine alla dimensione massima che appariranno sul sito. Ad esempio, se l'immagine sarà una miniatura con una larghezza di 160 px, valuta la possibilità di caricare un'immagine con una larghezza massima
Oltre all'ottimizzazione, tutte le immagini del sito vengono fornite nel formato WebP. Questo formato consente di ridurre le dimensioni dei file preservando la qualità dell'immagine, contribuendo a velocizzare le prestazioni del sito senza sacrificare la chiarezza visiva
Nota
Dudal'ottimizzazione delle immagini funziona solo su immagini JPG e PNG. Se stai caricando un formato di immagine TIFF, GIF o di altro tipo, Duda potrebbe non essere in grado di ottimizzarlo.
L'ottimizzazione può essere disattivata per le immagini di sfondo, il widget Immagine e il widget Galleria fotografica.
Per ulteriori informazioni, consulta i seguenti articoli:
Avvertimento
La disattivazione dell'ottimizzazione delle immagini potrebbe influire sulla velocità e/o sulle prestazioni della pagina.
rapporto di aspetto è il rapporto tra gli attributi di larghezza e altezza di un'immagine ed è essenzialmente associato alla forma dell'immagine. Le proporzioni 16:9 possono essere un'immagine di 16x9 px o un'immagine di 1600x900 px. È fondamentalmente qualsiasi risoluzione di immagine
Visualizzazione delle due proporzioni più comuni:
La risoluzione di un'immagine si riferisce alla quantità di dettagli che contiene un'immagine, in particolare al numero di pixel che compongono l'immagine ed è essenzialmente il dettaglio e la chiarezza dell'immagine.
Sebbene le immagini siano ottimizzate sul tuo sito, in realtà non ridimensiona il design delle immagini sul tuo sito. Se utilizzi un'immagine sul desktop con un rapporto di aspetto di 16:9, sarà perfetta sul desktop poiché il dispositivo desktop è largo. Un dispositivo mobile, tuttavia, è molto più piccolo e quindi un rapporto di aspetto 16:9 a volte può
Per compensare, puoi utilizzare la funzione Nascondi sul dispositivo per creare versioni specifiche per quei dispositivi oppure puoi ridimensionare le dimensioni dell'immagine nell'area di progettazione del widget. Le modifiche alle dimensioni sono indipendenti dal dispositivo per la maggior parte degli elementi
La proporzione dimensionale consigliata dipende da dove verrà utilizzata e da come si desidera che venga visualizzata.
Se un'immagine verrà utilizzata con orientamento orizzontale, un esempio di rapporto consigliato potrebbe essere 16:9 poiché ciò indicherebbe che sarà più larga che alta. Sarebbe il contrario per il ritratto,
Per i consigli sulle dimensioni, in generale è meglio mantenere la larghezza dell'immagine uguale o leggermente più grande di quella che sarà la dimensione ottimizzata. Ad esempio, se l'immagine verrà utilizzata in un widget di immagine sul desktop, la larghezza massima consigliata è di 1920 px o solo leggermente superiore. Le immagini più grandi richiedono una maggiore ottimizzazione, che può influire sulla qualità dell'immagine. Se l'ottimizzazione è disattivata, le immagini più grandi non ne risentiranno in termini di qualità ma rallenteranno il sito a causa delle loro dimensioni.
Rapporti e dimensioni comuni
Quando un'immagine si estenderà per tutta la larghezza del sito:
-
Proporzioni comuni per desktop: 16:9, 3:4
-
Dimensioni di risoluzione comuni (px) per desktop: 1600x900, 1280x720, 1280x960
I dispositivi mobili hanno spesso proporzioni opposte rispetto ai dispositivi desktop. Potrebbe essere necessario utilizzare la funzione Nascondi sul dispositivo per visualizzare correttamente i cursori mobili
Le proporzioni e le dimensioni dell'immagine di un widget possono variare in base alle dimensioni, alla posizione e alle impostazioni del widget. Sebbene esistano linee guida generali, non esistono standard fissi.
Widget della galleria e widget che offrono layout di galleria
Questi widget includono quanto segue:
-
Galleria foto
-
Galleria prodotti
-
Cursore multimediale
-
third party store widget di pagina
Le proporzioni delle immagini in questi widget dovrebbero riflettere il modo in cui desideri che vengano visualizzate.
-
Ad esempio, le gallerie in stile quadrato dovrebbero avere un rapporto di immagini 1:1.
-
Le gallerie di immagini alte dovrebbero avere rapporti di altezza più lunghi, ad esempio 2:5 o 200 px per 500 px.
-
I rapporti delle immagini devono essere gli stessi per garantire la coerenza del design. Lascia un po' di spazio nell'immagine per utilizzare l'effetto al passaggio del mouse in modo che le immagini non vengano tagliate
-
Dimensioni di risoluzione comuni (px): qualsiasi risoluzione, ma quando possibile non superiore a 1500 px per la velocità della pagina.
Tutti i layout disponibili hanno proporzioni prestabilite che non cambiano, sebbene le opzioni di layout con dimensioni uniformi delle immagini abbiano la possibilità nelle impostazioni di progettazione di modificare l'altezza. Quando l'altezza viene modificata per questi layout, le proporzioni cambieranno in base alle
Le proporzioni impostate per i layout a mosaico (le opzioni con le immagini di dimensioni diverse) varieranno a seconda del layout e del numero di colonne impostato nelle impostazioni di progettazione.
Mentre il widget nella pagina delle categorie offre una varietà tra cui scegliere, l'immagine nella pagina del prodotto ha un rapporto di aspetto di 1:1.
Per vedere le opzioni disponibili per il widget nella pagina della categoria:
-
Nel pannello laterale, fai clic su Negozio.
-
Fare clic Pagine del negozio.
-
Fare clic Pagina di categoria (se il negozio non dispone di categorie impostate, la pagina sarà disattivata e non sarà disponibile per la modifica).
-
Fai clic con il pulsante destro del mouse sul widget che mostra le categorie e seleziona Modifica design.
-
Fare clic Prodotti.
-
Fai clic sulla miniatura sotto Layout per vedere le opzioni di layout disponibili.
-
Per vedere le proporzioni disponibili, scorri verso il basso nella sezione Prodotti fino a Proporzioni dell'immagine opzione.
Per impostazione predefinita, le proporzioni della maggior parte degli elementi sovrascrivono le proporzioni dell'immagine, con il risultato che parti dell'immagine vengono tagliate. Tuttavia, alcuni elementi includono un'impostazione che consente di visualizzare l'intera immagine senza essere ritagliata
|
Immagine originale |
Immagine nel widget con proporzioni sovrascritte |
|---|---|
|
Le proporzioni sono 3:2 |
Un esempio di rapporto di aspetto possibile potrebbe essere 3:1 (solo la parte dell'immagine che non è coperta dai riquadri bianchi) |
Quando si utilizza il Copertina opzione nelle impostazioni di progettazione dell'elemento, le proporzioni dell'elemento sovrascriveranno le proporzioni dell'immagine. Se le proporzioni non corrispondono, alcune parti dell'immagine verranno tagliate
Inoltre, alcuni elementi, come righe e sezioni, si adattano alle dimensioni dello schermo del dispositivo. Di conseguenza, le proporzioni dell'elemento cambieranno in base alle dimensioni dello schermo che attualmente sta visualizzando il sito.
Una tecnica per evitare che l'immagine venga tagliata consiste nell'utilizzare Immagine completa opzione nelle impostazioni di progettazione dell'elemento. Tieni presente che non tutti gli elementi avranno questa opzione.
Per ulteriori informazioni sugli sfondi, consulta Sfondi degli elementi.
Alcuni widget offrono un'impostazione che consente di visualizzare l'immagine completa senza essere ritagliata.
Widget che offrono l'impostazione per visualizzare l'immagine completa:
-
Immagine (nell'Editor 2.0; nell'Editor classico il widget rispetterà sempre le proporzioni delle immagini)
-
Cursore multimediale
-
Galleria foto
L'area totale di un'immagine non può superare i 3.145.728 pixel. È improbabile che le tue immagini superino questo limite, ma puoi verificarlo rapidamente moltiplicando la larghezza dei pixel per l'altezza
Ogni file non deve superare i 50 MB. I file di dimensioni maggiori possono generare un messaggio di errore o il caricamento non completo
Il caricamento di un'immagine più grande del limite potrebbe causare i seguenti errori:
-
Le immagini non vengono caricate.
-
Le immagini vengono caricate, ma le miniature nel selettore di immagini non vengono visualizzate.
-
Le immagini non vengono caricate nell'editor.
-
Le immagini non vengono caricate sul sito live.
Si consiglia di utilizzare il formato SVG per le immagini del logo, poiché i file SVG non sono ottimizzati allo stesso modo degli altri file di immagine, quindi anche se il logo che carichi è di piccole dimensioni, non perderai la qualità.
Nota
Gli SVG sono file di immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito stai aggiungendo anche righe di codice.
Linee guida sulle dimensioni
L'intervallo per la larghezza del logo incorporato nell'intestazione o nel piè di pagina è compreso tra 250 px e 400 px. In genere, l'altezza non è un problema e sarà determinata dalle proporzioni del logo
Il caricamento della risoluzione massima per il tuo sito garantisce che le immagini del tuo sito siano ad alta risoluzione per i tuoi clienti e clienti. Tuttavia, tieni presente che anche le immagini di grandi dimensioni hanno un effetto drastico sulla velocità della tua pagina. Poiché le immagini ad alta risoluzione vengono ridimensionate, gli utenti normalmente non notano la differenza di risoluzione. È preferibile caricare immagini di dimensioni pari a quelle destinate all'uso. Ad esempio, se sul tuo sito hai un'immagine di 300 px x 300 px, non vuoi caricarla come immagine di 4000 px per 4000 px
Per ottimizzare le dimensioni delle immagini per il tuo sito:
-
Carica solo immagini di dimensioni sufficienti a quelle destinate all'uso (ad esempio, se l'immagine deve apparire come 300 px x 300 px sul sito, non caricarla come immagine da 4000 px per 4000 px).
-
La dimensione massima dell'immagine non può superare i 3.145.728 pixel.
-
Fai attenzione alle proporzioni, poiché le immagini 16:9 sono perfette sul desktop ma appaiono troppo piccole sui dispositivi mobili. In questo caso
-
Usa il Nascondi sul dispositivo funzionalità per creare versioni specifiche dell'immagine per ogni dispositivo.
-
Ridimensiona le dimensioni dell'immagine (proporzioni) per adattarle: le modifiche alle dimensioni sono indipendenti dal dispositivo.
-
L'area totale di un'immagine non può superare i 3.145.728 pixel. È improbabile che le tue immagini superino questo limite, ma puoi verificarlo rapidamente moltiplicando la larghezza dei pixel per l'altezza
Nota
-
Per informazioni e linee guida per le icone dei siti, consulta Impostazioni SEO del sito.
-
I file di icone contribuiscono al file con limite di 15.000.
Il tipo di file, SVG, è l'unico tipo di file supportato per questa scheda.
-
Proporzioni comuni: generalmente 1:1, ma qualsiasi rapporto di aspetto funzionerà.
-
Dimensioni di risoluzione comuni (px): 200x200, 80x80 o qualsiasi risoluzione. Gli SVG possono avere qualsiasi risoluzione.
Avvertimento
SVG sono file di immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito stai aggiungendo anche righe di codice. SVG multipli e complessi possono aggiungere migliaia di righe di codice e rallentare il caricamento del sito o potenzialmente interromperlo. Se avete bisogno di utilizzare più icone SVG sulla stessa pagina, vi consigliamo di trasformarne alcune in immagini normali (.png, .jpeg, ecc.) per evitare problemi
I video possono essere ospitati nei file del sito caricandoli nel gestore multimediale o registrando direttamente utilizzando la fotocamera e il microfono del computer. Inoltre, i video di YouTube, Vimeo o Dailymotion possono essere aggiunti a parti specifiche del sito utilizzando il widget video o come sfondo per elementi che supportano i video. Questi video esterni saranno disponibili solo nella posizione in cui vengono aggiunti e non saranno
Nota
possibile caricare fino a 100 video per sito. File aggiuntivi possono generare un messaggio di errore. Ogni file non deve superare i 200 MB. I file di dimensioni maggiori possono generare un messaggio di errore o il caricamento non completo. Se sono necessari video aggiuntivi, YouTube o Vimeo potrebbero essere
Per informazioni dettagliate su dove e come i video possono essere incorporati nel sito, consulta questi articoli:
-
Il caricamento dei video può richiedere tempo e larghezza di banda e distrarre gli utenti dai link o dal testo importanti sulla tua pagina, quindi usa i video con parsimonia.
-
I video di YouTube non sono supportati sui dispositivi mobili in quanto non vengono riprodotti automaticamente sui dispositivi iOS.
-
Gli iPhone con batteria in modalità basso consumo non riprodurranno automaticamente i video su un sito e mostreranno invece un pulsante di riproduzione.
-
I video di sfondo non riproducono alcun suono.
-
Quando aggiungi un video Dailymotion che fa parte di una playlist, assicurati di aggiungere solo il link diretto al video (e ometti il parametro della playlist, che assomiglia a questo:? playlist=x1x2f3). Se l'URL del tuo video ha questo parametro, rimuovilo. Ad esempio:
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2sarebbehttps://www.dailymotion.com/video/x60ktex
Potrebbero esserci diverse cause per cui un video non viene caricato. Ecco alcune tecniche per provare a risolvere i problemi
-
Controlla la dimensione del file per assicurarti che sia inferiore a 200 MB.
-
Controlla i video attualmente caricati per assicurarti che ce ne siano meno di 100.
-
Prova a caricare un altro video.
-
Se viene caricato un altro video, è probabile che sia correlato al file del video. La creazione di un nuovo file dalla fonte originale può risolvere
-
Se un altro video non viene caricato, potrebbe essere correlato a qualcosa di locale sul tuo computer, ad esempio alla velocità della pagina o al browser. Se è locale sul tuo computer, alcune tecniche da provare potrebbero essere:
-
Cancellazione della cache del browser
-
Provare con un altro browser
-
Provare una rete diversa
-
Riavvio del computer
-
-
Nota
I file audio contribuiscono al limite di 15.000 file.
audio può essere ospitato nei file del sito caricandoli nel gestore multimediale o registrando direttamente utilizzando il microfono del computer. Inoltre, l'audio di SoundCloud o Mixcloud può essere aggiunto a parti specifiche del sito utilizzando il widget audio. L'audio esterno sarà disponibile solo nella posizione in cui viene aggiunto e non sarà disponibile nell'editor
Per informazioni dettagliate su come incorporare l'audio in un sito, consulta Widget audio.
Nota
-
I file nella scheda file del gestore multimediale contribuiscono al file con limite di 15.000.
-
Non puoi caricare file nella tua cartella principale.
La scheda dei file nel gestore multimediale supporta quasi tutti i tipi di file. I file caricati qui possono essere collegati utilizzando il selettore di link ma non possono essere utilizzati direttamente in nessun widget (per ulteriori informazioni sul selettore di link, vedi Selettore di link). Ad esempio, un'immagine caricata in questa scheda non sarà disponibile per l'uso con nessun widget di immagini.
I nomi dei file possono rimanere memorizzati nella cache per qualche tempo. Se un file con lo stesso nome è stato eliminato di recente, è probabile che sia ancora memorizzato nella cache e sarà necessario utilizzare un nome diverso
Un file con lo stesso nome potrebbe essere stato eliminato di recente. I nomi dei file possono rimanere memorizzati nella cache per qualche tempo. Il file dovrebbe essere rinominato
Per rinominare un file, apri Media Manager, seleziona il file e fai clic su Rinomina. Se usi una libreria o un selettore, attiva Gestisci opzione per la libreria o il selettore.
Ciò è probabilmente dovuto a un file esistente con lo stesso nome o eliminato di recente. I nomi dei file possono rimanere memorizzati nella cache per qualche tempo, quindi rinominare il file potrebbe essere l'opzione migliore in caso di questo problema
Per rinominare un file, apri Media Manager, seleziona il file e fai clic su Rinomina. Se usi una libreria o un selettore, attiva Gestisci opzione per la libreria o il selettore.
[en] Delete the file from the Media Manager, or from a library or picker with the Manage option turned on. The file is removed from your site's media right away.
[en] If someone already has the file's direct link, they may still be able to open it for a while, because copies of the file can stay cached. There's no set time frame for how long.