Il tuo sito web Guesty ottimizza automaticamente le tue immagini per garantire un caricamento rapido del tuo sito su qualsiasi dispositivo. Quando carichi un'immagine, il sistema crea fino a cinque copie più piccole e visualizza la dimensione più appropriata per i visitatori su computer desktop, tablet o dispositivi mobili.
Dimensioni dell'immagine e requisiti del file
Per garantire il corretto caricamento e la visualizzazione delle immagini, attenersi alle seguenti indicazioni:
- Limite di file : è possibile caricare fino a 15.000 file per sito, inclusi immagini, clip audio, icone e documenti.
- Dimensioni dei file : i singoli file non devono superare i 50 MB.
- Risoluzione dell'immagine : l'area totale di un'immagine non può superare i 3.145.728 pixel (moltiplicare la larghezza per l'altezza per verificare).
- Dimensioni dei file immagine : sebbene il limite generale sia di 50 MB, per ottenere prestazioni ottimali si consiglia di mantenere le immagini al di sotto dei 15 MB.
- Formati supportati : png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon e webp.
Supporto WebP
Le immagini WebP sono supportate da Chrome, Android e dalle versioni più recenti di Safari/Mac. Per iPhone, utilizzare la versione 14 o successiva.
Dimensioni delle immagini ottimizzate per dispositivo
Il sistema crea solo copie di dimensioni inferiori all'originale. Ad esempio, se carichi un'immagine larga 2000 pixel, vengono create cinque copie ottimizzate. Se carichi un'immagine di 100 pixel, non vengono create nuove versioni.
Tipo di immagine | Larghezza dell'immagine |
|---|---|
| Sfondo | 2880px |
| Desktop | 1920px |
| Tablet | 1280px |
| Mobile | 640px |
| Miniatura del blog | 300px |
| Miniatura | 160px |
Disabilitazione dell'ottimizzazione
È possibile disabilitare l'ottimizzazione per le immagini di sfondo, il widget Immagine e il widget Galleria fotografica. Tuttavia, ciò potrebbe rallentare significativamente la velocità e le prestazioni della pagina.
Linee guida per le immagini per widget
Segui questi consigli per garantire che le tue immagini abbiano un aspetto professionale e si adattino al design del tuo sito.
Cursore
I cursori spesso si estendono per tutta la larghezza dello schermo, quindi le immagini larghe funzionano meglio.
- Proporzioni : 16:9 o 3:4.
- Risoluzioni : 1600x900 o 1280x720 px.
- Suggerimento di design : utilizza immagini con un'ampia spaziatura in modo che il soggetto principale non venga tagliato quando le dimensioni dello schermo cambiano.
Galleria fotografica
La galleria è flessibile e supporta diverse configurazioni, come ad esempio a piastrelle o a mosaico.
- Proporzioni : utilizzare 1:1 per gallerie quadrate o 2:5 per gallerie verticali.
- Risoluzione : Mantieni le immagini al di sotto dei 1500 pixel per garantire un'elevata velocità di caricamento della pagina.
- Suggerimento di design : mantieni proporzioni uniformi in tutta la galleria per un aspetto pulito.
Icone
Le icone fungono da indicatori visivi e possono essere caricate come file PNG, JPEG o SVG trasparenti.
- Rapporto d'aspetto : Generalmente 1:1.
- Risoluzioni : 200x200 o 80x80 px.
SVG identità
I file SVG sono costituiti da codice. L'utilizzo di molti file SVG complessi può aggiungere migliaia di righe di codice alla pagina e causare rallentamenti nel caricamento. Se si utilizzano più icone, è consigliabile convertirne alcune in formato PNG o JPEG.
Favicon
Le favicon vengono visualizzate nella scheda del browser anziché nella pagina stessa. Per ottenere risultati ottimali, utilizza il formato ICO.
- Proporzioni : 1:1.
- Risoluzioni : 24x24, 36x36 o 48x48 px.
Loghi
Per i loghi, utilizza il formato SVG. Poiché i file SVG non vengono ridimensionati come altri tipi di immagine, il tuo logo rimarrà nitido anche in dimensioni ridotte.
Le migliori pratiche per l'ottimizzazione delle immagini
Comprendere la differenza tra rapporto d'aspetto e risoluzione.
Il rapporto d'aspetto indica la relazione tra larghezza e altezza. Un rapporto 16:9 descrive la forma, ovvero se l'immagine è di 16x9 pixel o 1600x900 pixel. [Immagine: Confronto affiancato tra un rapporto d'aspetto quadrato 1:1 e un rapporto d'aspetto widescreen 16:9.]
Adatta ai dispositivi mobili
Un'immagine in formato 16:9 ha un aspetto fantastico su un desktop con schermo largo, ma può apparire molto piccola su uno schermo mobile verticale. Per risolvere questo problema:
- Ridimensiona l'immagine in modo specifico per i dispositivi mobili.
- Utilizza la funzione "nascondi sul dispositivo" per mostrare agli utenti di dispositivi mobili una versione diversa, ritagliata verticalmente.
Bilanciare qualità e velocità
Le immagini ad alta risoluzione sono esteticamente gradevoli, ma rallentano drasticamente il sito. Gli utenti raramente notano la differenza tra un'immagine ad altissima risoluzione e una ridimensionata correttamente. Carica le immagini nelle dimensioni per cui sono state progettate. Ad esempio, se un'immagine viene visualizzata a 300x300 pixel sul tuo sito, non caricare un file da 4000x4000 pixel.
