I media svolgono un ruolo cruciale nel migliorare l'attrattiva visiva e l'efficacia del tuo sito web. L'uso corretto di immagini, video e altri tipi di media può coinvolgere i visitatori, trasmettere informazioni in modo più efficace e creare un'esperienza utente più dinamica.
-
Qualsiasi file (testo, immagine, video o audio.) caricato nel sistema è disponibile pubblicamente. Non caricare informazioni personali o confidenziali. Per rimuovere completamente il file, eliminarlo da Media Manager.
-
Immagini, icone, clip audio e file: fino a 15.000 immagini, clip audio e file combinati per sito. I file aggiuntivi possono generare un messaggio di errore. Ogni file non deve essere più grande di 50 MB.
-
Video: fino a 100 per sito. I file aggiuntivi possono generare un messaggio di errore. Ogni file non deve essere più grande di 200 MB. I file più grandi possono causare un messaggio di errore o il caricamento non completo. Se sono necessari video aggiuntivi, YouTube o Vimeo potrebbero essere opzioni possibili.
-
Gli spazi all'interno dei nomi dei file non sono supportati. È possibile caricare i file che contengono spazi, anche se potrebbe verificarsi un comportamento imprevisto con il file.
-
I file e i relativi nomi potrebbero essere memorizzati nella cache per un po' di tempo. Se un file viene eliminato, probabilmente rimarrà disponibile per un po' di tempo. Ciò include il nome del file, il che significa che potresti riscontrare l'errore "Il nome esiste già" quando tenti di utilizzare il nome di un file eliminato di recente.
-
A causa della memorizzazione nella cache, non è consigliabile caricare un file con lo stesso nome di un file eliminato di recente, poiché il file eliminato potrebbe continuare a essere visualizzato per un po' di tempo.
-
Tipo di file SVG: gli SVG sono file immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito aggiungi anche righe di codice. Più SVG complessi possono aggiungere migliaia di righe di codice e causare un caricamento lento del sito. Se è necessario utilizzare più icone SVG sulla stessa pagina, si consiglia di trasformare alcune di esse in immagini normali (.png, .jpeg, ecc.) per evitare problemi di caricamento o funzionalità.
-
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.
Le proporzioni sono la relazione tra la larghezza e l'altezza dei media e rappresentano il valore numerico della loro forma (in genere, le proporzioni sono più importanti nelle immagini e nei video). Le dimensioni del supporto non modificano necessariamente le sue proporzioni. Ad esempio, sia 1280x720px che 3840x2160px hanno le stesse proporzioni di 16:9.
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, modificare le proporzioni del file potrebbe essere il modo migliore per risolverlo. Per le immagini, l'editor di immagini integrato può essere utilizzato per modificare il rapporto d'aspetto ritagliandolo. Se un video deve essere modificato, dovrebbe essere fatto con un toolesterno.
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 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 le dimensioni dell'immagine caricata non vengono mai aumentate e vengono ottimizzate solo le immagini visualizzate sul sito più piccole dell'originale. 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 se visualizzata in un'area più ampia.
Sebbene l'editor possa ottimizzare immagini di qualsiasi dimensione, si consiglia di caricare immagini vicine alla dimensione massima in cui appariranno sul sito. Ad esempio, se l'immagine sarà una miniatura con una larghezza di 160 px, prendi in considerazione il caricamento di un'immagine con una larghezza massima di circa 200 px.
Oltre all'ottimizzazione, tutte le immagini del sito vengono servite in 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
L'ottimizzazione delle immagini di IONOS funziona solo su immagini JPG e PNG. Se stai caricando un TIFF, GIF o altri formati di immagine, IONOS potrebbe non essere in grado di ottimizzarlo.
Le proporzioni sono il rapporto tra l'attributo larghezza e altezza di un'immagine ed è essenzialmente associato alla forma dell'immagine. Un rapporto di aspetto 16:9 può essere un'immagine di 16x9 px o un'immagine di 1600x900 px. Si tratta fondamentalmente di qualsiasi risoluzione dell'immagine che ha il rapporto di 16:9.
Visualizzazione dei due rapporti proporzionali più comuni:
La risoluzione di un'immagine si riferisce alla quantità di dettagli che un'immagine contiene, in particolare il numero di pixel che compongono l'immagine ed è essenzialmente il dettaglio e la chiarezza dell'immagine.
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, puoi utilizzare la funzione Nascondi sul dispositivo per creare versioni specifiche per tali 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.
Il rapporto d'aspetto consigliato dipende da dove verrà utilizzato e da come si desidera che venga visualizzato.
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 l'opposto per il ritratto, 9:16.
Per le raccomandazioni 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 immagine sul desktop, la larghezza massima consigliata è 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 risentiranno della 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. Per visualizzare correttamente gli slider sui dispositivi mobili, potrebbe essere necessario utilizzare la funzione "Nascondi sul dispositivo".
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 e widget galleria che offrono layout di galleria
Questi widget includono:
-
Galleria di foto
-
Galleria dei prodotti
-
Dispositivo di scorrimento multimediale
-
Pagina store di terze parti widget
Le proporzioni delle immagini in questi widget dovrebbero riflettere il modo in cui si desidera visualizzarle.
-
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.
-
Dimensioni di risoluzione comuni (px): qualsiasi risoluzione, ma quando possibile non superiore a 1500 px per la velocità della pagina.
Tutti i layout disponibili sono dotati di proporzioni impostate che non cambieranno, anche se le opzioni di layout con dimensioni uniformi delle immagini hanno l'opzione nelle impostazioni di progettazione per modificare l'altezza. Quando l'altezza viene modificata per questi layout, le proporzioni cambieranno in base alle dimensioni del widget.
Le proporzioni impostate per i layout a mosaico (le opzioni con le immagini di dimensioni variabili) variano a seconda del layout e del numero di colonne impostate nelle impostazioni di progettazione.
Mentre il widget nella pagina della categoria 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 Vendi online.
-
Fai clic sustore Pagine.
-
Fai clic su Pagina categoria (se la store non ha categorie impostate, la pagina sarà disattivata e non sarà disponibile per la modifica).
-
Fare clic con il pulsante destro del mouse sul widget che visualizza le categorie e selezionare Modifica design.
-
Fai clic su Prodotti.
-
Fare clic sulla miniatura in Layout per visualizzare le opzioni di layout disponibili.
-
Per vedere le proporzioni disponibili, scorri verso il basso nella sezione Prodotti fino all'opzione Proporzioni immagine .
Per impostazione predefinita, le proporzioni della maggior parte degli elementi sovrascriveranno le proporzioni dell'immagine, con il risultato che parti dell'immagine verranno tagliate. Tuttavia, alcuni elementi includono un'impostazione che consente di visualizzare l'intera immagine senza essere ritagliata.
|
Immagine originale |
Immagine nel widget con proporzioni prevalenti |
|---|---|
|
Il rapporto d'aspetto è 3:2 |
Esempio: il rapporto d'aspetto potrebbe essere 3:1 (solo la parte dell'immagine che non è coperta dai riquadri bianchi) |
Quando si utilizza l'opzione Copertina nelle impostazioni di progettazione dell'elemento, le proporzioni dell'elemento sovrascriveranno le proporzioni dell'immagine. Se le proporzioni non corrispondono, 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 sta visualizzando il sito.
Una tecnica per evitare che l'immagine venga tagliata consiste nell'utilizzare l'opzione Immagine completa nelle impostazioni di progettazione dell'elemento. Si prega di notare che non tutti gli elementi avranno questa opzione.
Per ulteriori informazioni sugli sfondi, vedere Sfondi degli elementi.
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.
Ogni file non deve essere più grande di 50 MB. I file più grandi possono causare un messaggio di errore o il caricamento non completo.
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.
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à.
Nota
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.
Linee guida per le taglie
L'intervallo per la larghezza del logo quando 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.
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.
Per ottimizzare l'immagine per il tuo sito:
-
Carica solo immagini di dimensioni pari a quelle che devono essere utilizzate (ad esempio, se l'immagine verrà visualizzata come 300 px x 300 px sul sito, non caricarla come immagine di 4000 px x 4000 px).
-
La dimensione massima dell'immagine non può superare i 3.145.728 pixel.
-
Attenzione ai rapporti d'aspetto, dato che un'immagine in 16:4 ha un aspetto eccellente su desktop, ma appare troppo piccola vista su un dispositivo mobile. In questo caso:
-
Utilizza la funzione Nascondi sul dispositivo 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.
-
Nota
-
Per informazioni e linee guida per le icone del sito che possono essere trovate nell'area SEO e impostazioni dell'editor, vedere Impostazioni SEO del sito.
-
I file icona contribuiscono al limite di 15.000 file.
Il tipo di file, SVG, è l'unico tipo di file supportato per questa scheda.
-
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.
Attenzione
Gli SVG sono file immagine che contengono codice HTML, il che significa che quando aggiungi un'icona SVG al tuo sito aggiungi anche righe di codice. Più SVG complessi possono aggiungere migliaia di righe di codice e causare un caricamento lento o potenzialmente il blocco del sito. Se è necessario utilizzare più icone SVG sulla stessa pagina, si consiglia di trasformare alcune di esse in immagini normali (.png, .jpeg, ecc.) per evitare problemi di caricamento o funzionalità.
I video possono essere ospitati nei file del sito caricandoli sul gestore multimediale o registrandoli 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 gli elementi che supportano i video. Questi video esterni saranno disponibili solo nella posizione in cui sono stati aggiunti e non saranno disponibili nell'editor.
Nota
È possibile caricare fino a 100 video per sito. I file aggiuntivi possono generare un messaggio di errore. Ogni file non deve essere più grande di 200 MB. I file più grandi possono causare un messaggio di errore o il caricamento non completo. Se sono necessari video aggiuntivi, YouTube o Vimeo potrebbero essere opzioni possibili.
-
I video possono richiedere diverso tempo e larghezza di banda per caricarsi, distogliendo gli utenti da link o testi importanti sulla pagina, pertanto usali con moderazione.
-
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à a basso consumo non riprodurranno automaticamente i video su un sito, ma mostreranno un pulsante di riproduzione.
-
I video in background non hanno audio.
-
Quando aggiungi un video di Dailymotion che fa parte di una playlist, assicurati di aggiungere solo il link diretto al video (tralasciando il parametro playlist, che è simile a questo: ?playlist=x1x2f3). Se l'URL del video contiene questo parametro, è sufficiente rimuoverlo. Per esempio: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 diventerà https://www.dailymotion.com/video/x60ktex
Potrebbero esserci una serie di cause per cui un video non viene caricato. Di seguito sono riportate 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 siano meno di 100.
-
Prova a caricare un video diverso.
-
Se viene caricato un altro video, è probabile che sia correlato al file del video. La creazione di un nuovo file dall'origine originale potrebbe risolvere il problema.
-
Se un altro video non viene caricato, potrebbe essere correlato a qualcosa di locale sul tuo computer, ad esempio la velocità della pagina o il browser. Se è locale sul tuo computer, alcune tecniche da provare potrebbero essere:
-
Svuotare la cache del browser
-
Provare un altro browser
-
Provare una rete diversa
-
Riavvio del computer
-
-
Nota
I file audio contribuiscono al limite di 15.000 file.
L'audio può essere ospitato nei file del sito caricandoli sul 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 è stato aggiunto e non sarà disponibile nell'editor.
Per informazioni dettagliate su come incorporare l'audio in un sito, consultate Audio widget.
Nota
-
I file nella scheda file del gestore multimediale contribuiscono al limite di 15.000 file.
-
Non è possibile caricare file nella cartella principale.
La scheda 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 alcun widget. Ad esempio, un'immagine caricata in questa scheda non sarà disponibile per l'uso con alcun widget immagine.
I nomi dei file possono rimanere memorizzati nella cache per un po' di 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.
È possibile che un file con lo stesso nome sia stato eliminato di recente. I nomi dei file possono rimanere memorizzati nella cache per un po' di tempo. Il file dovrebbe essere rinominato.
Per rinominare un file, aprire Media Manager, selezionare il file e fare clic su Rinomina. Se si utilizza una libreria o un selettore, attivare l'opzione Gestisci per la libreria o il selettore.
Ciò è probabilmente dovuto a un file esistente con lo stesso nome o a uno eliminato di recente. I nomi dei file possono rimanere memorizzati nella cache per un po' di tempo, quindi rinominare il file potrebbe essere l'opzione migliore se si verifica questo problema.
Per rinominare un file, aprire Media Manager, selezionare il file e fare clic su Rinomina. Se si utilizza una libreria o un selettore, attivare l'opzione Gestisci per la libreria o il selettore.