Non sei sicuro del motivo per cui il tuo sito non si posiziona bene su Google o perché i consumatori non si impegnano con esso? Le dimensioni delle immagini per i siti Web e la velocità del sito Web e i problemi SEO sono spesso visti che influenzano le frequenze di rimbalzo e le classifiche.
Per molte persone, salvare le immagini per il web è sempre stato un mistero. Le immagini pesanti (dimensioni dell’immagine originale a 5000px di larghezza, immagini non ottimizzate) non solo degradano l’esperienza dell’utente sul tuo sito, ma avranno anche un impatto negativo sulla tua strategia SEO (velocità di caricamento, frequenza di rimbalzo, classifica, ecc.).
Scomponiamo l’elenco delle linee guida sulle dimensioni dell’immagine del sito web.
Perché le dimensioni delle immagini e le prestazioni del sito Web sono importanti?
I siti Web richiedono più tempo per essere caricati quando la grafica non è ottimizzata. Siti web lenti si traducono in una scarsa esperienza utente, una minore probabilità di posizionamento nelle ricerche di Google, e, di conseguenza, un minor numero di query e consumatori.
Sito web di immagine dimensione linee guida menzione che il salvataggio delle tue foto nelle giuste proporzioni e la loro ottimizzazione per il web può aiutare con una varietà di cose, tra cui:
• Velocità
Secondo la ricerca di Google, se una pagina web impiega più di 5 secondi per caricare, la probabilità di un mobile visitatore abbandonare la pagina aumenta del 90%. Puoi velocizzare le pagine del tuo sito web riducendo e abbassando le dimensioni dell’immagine.
• Esperienza utente
I visitatori avranno un’esperienza più coinvolgente durante la navigazione del tuo sito web se si utilizzano immagini di alta qualità e accattivanti. Stai fornendo un’esperienza senza soluzione di continuità e liscia per i tuoi visitatori mantenendo quelle foto ottimizzate e caricate rapidamente, il che li incoraggia a trascorrere più tempo sul tuo sito ed esplorare i tuoi contenuti.
• SEO Ranking
Prima il tuo sito viene caricato, più alto è possibile classificare. Su dispositivi desktop e mobili, le pagine web con grafica ottimizzata si caricano notevolmente più velocemente.
• Vendite
Velocità di caricamento più veloci e una migliore SEO possono aiutare ad attirare più visitatori sul tuo sito, aumentando le possibilità di essere contattati e prenotati.
Quali sono le dimensioni delle immagini più appropriate per i siti Web?
Strikingly è costruito per funzionare con una vasta gamma di dimensioni dell’immagine per diverse dimensioni dello schermo, sezioni, stili e disegni. Tuttavia, a volte è utile avere un concetto approssimativo di quali dimensioni caricare.
Ecco alcune linee guida generali sulle dimensioni dell’immagine del sito web da seguire!
L’immagine è tratta da Sorprendentemente
1. Immagini per lo sfondo
Le foto sullo sfondo di Strikingly sono progettate per adattarsi a un’ampia gamma di dimensioni dello schermo, dal monitor al tablet al telefono. Per garantire che il tuo sfondo appaia eccellente su tutti gli schermi, ti consigliamo una dimensione di 1600 pixel di larghezza per 900 pixel di altezza. Includere non-sfondo foto di persone, marchi, e altre informazioni con cautela!
2. Impostazioni per lo sfondo
Per ridimensionare / allineare lo sfondo, hai alcune alternative.
Stretch/Cover default: questa opzione allunga l’immagine per riempire l’intero schermo, sia in altezza che in larghezza. Poiché l’immagine funzionerà come sfondo su qualsiasi dimensione dello schermo, questa è di solito la soluzione migliore. Tuttavia, se la tua immagine ha contenuti sui lati (specialmente a sinistra ea destra), potrebbe non essere visibile sui telefoni cellulari.
Contain: Contain mostrerà l’immagine completa, assicurandosi che nessuna parte di essa venga tagliata. Su alcuni dispositivi, però, questo può causare un po ‘ di spazio bianco.
Centro: L’immagine verrà mostrata al centro della sezione e non verrà ridimensionata se si sceglie il centro. D’altra parte, lo sfondo mostrerà lo spazio bianco intorno ai bordi dell’immagine è troppo piccolo. Alcuni elementi dell’immagine possono essere tagliati fuori se è troppo grande, soprattutto su schermi più piccoli.
Tile: Tile centrerà e quindi ripeterà un’immagine, utile per creare modelli.
Per iniziare le linee guida sulle dimensioni dell’immagine del sito web, prendere nota di quanto ampia appare l’immagine sulla pagina.
L’immagine è presa da Sorprendentemente
• Immagini di sfondo
Le dimensioni ideali delle immagini di sfondo sono 1600x900px
• Immagini a larghezza intera
Dovrebbero essere larghe almeno 1400 pixel per ottenere i migliori risultati. Secondo le linee guida sulle dimensioni dell’immagine del sito web
Le immagini a metà larghezza devono essere larghe almeno 700px per la migliore qualità.
• images width images
Le immagini devono essere larghe almeno 480px per la migliore qualità di 1/3 di larghezza.
• Immagini di larghezza ¼
Per la migliore qualità delle immagini di larghezza 1/4, devono essere larghe almeno 360 pixel.
• Piccole icone e loghi
Devono avere una larghezza di almeno 100 pixel.
• Immagini galleria
Qualsiasi dimensione va bene per le immagini galleria! Le immagini nella galleria si apriranno in una lightbox in cima al tuo sito web.
Quale immagine è richiesta per il tuo sito Web?
Le immagini devono essere grandi quanto necessario per adattarsi ai loro “contenitori” per le massime prestazioni del sito Web, a seconda del layout della pagina. Le foto della presentazione, ad esempio, sono spesso più grandi; le immagini del blog sono di medie dimensioni (con una larghezza uguale alla larghezza della pagina meno la barra laterale); le miniature sono più piccole e così via.
Secondo le linee guida sulle dimensioni dell’immagine del sito Web, è fondamentale accertare prima le dimensioni dell’immagine per calcolare la larghezza dell’area dei contenuti del tuo sito. Puoi utilizzare un plugin per browser ” page ruler “per aiutarti a prendere le misure, oppure puoi utilizzare gli strumenti di sviluppo integrati nel tuo browser Web se hai esperienza: fai clic con il pulsante destro del mouse su qualsiasi elemento della pagina e seleziona” Inspect ” dal menu a discesa.
Immagine è presa dal Sorprendentemente
Quindi, nella barra degli strumenti, utilizzare il selettore di elementi strumento per passare il mouse sopra la foto o il contenuto sezione ti interessa:
Immagine è presa dal Sorprendentemente
Immagine è presa dal Sorprendentemente
In questo caso, la colonna di cui sopra richiede un’immagine con una larghezza di almeno 525 pixel.
Diciamo ” almeno “perché le immagini nei nuovi smartphone con schermi” retina ” ad alta densità devono essere più grandi di quelle per apparire il più nitide possibile.
Considerare i seguenti scenari:
A. Slideshow a larghezza intera Dimensione immagine Web
Le linee guida sulle dimensioni immagine del sito web raccomandano 2560 pixel di larghezza per le presentazioni a larghezza intera (che si estendono automaticamente alle dimensioni complete del browser). Questa è la solita larghezza di risoluzione per monitor da 27 “e 30”.
Le immagini possono essere alte quanto vuoi che siano per ottenere le proporzioni che scegli. Le presentazioni a pagina intera, ad esempio, che sono comuni sui siti Web di fotografia di matrimonio, mantengono le proporzioni originali delle fotografie. Altri siti web fanno uso di una presentazione che si estende su tutta la larghezza della pagina, ma è meno in altezza (che porta ad un rapporto di aspetto di circa 3:1).
Di seguito è riportato un esempio di presentazioni “panoramiche” da siti web fotografici:
L’immagine è presa dal sito web di usre
Le immagini dovrebbero essere larghe 2560 (arrotondate a 2500px) pixel e qualsiasi altezza tu scelga per le immagini che coprono l’intera larghezza del browser (a seconda che tu voglia preservare le proporzioni native delle tue immagini o optare per un taglio più panoramico).
Questo non è un caso in cui abbiamo bisogno di raddoppiare le dimensioni dell’immagine per i display retina perché ciò comporterebbe enormi immagini 5000px (per non aggiungere i pericoli del furto di immagini, con file di grandi dimensioni).
Regola la dimensione dell’immagine richiesta per presentazioni più piccole che non occupano l’intera larghezza della pagina, ma solo una parte di essa (forse 2000px o 1800px, ecc.)
L’immagine è presa dal sito web di usre
B. Dimensioni delle immagini nelle gallerie (e miniature che si ingrandiscono in una vista Lightbox)
Le gallerie di miniature sono situazioni uniche in cui la dimensione delle miniature viene ignorata a favore di garantire che le foto siano abbastanza grandi quando ingrandite.
Una griglia di foto in miniatura che, se cliccata, si apre in una presentazione a schermo intero (in genere con una sovrapposizione semitrasparente sotto) viene definita “vista lightbox”:
Poiché tali fotografie si apriranno in modalità a schermo intero, le linee guida sulle dimensioni dell’immagine del sito web raccomandano di farle avere una larghezza di almeno 1500 pixel (sul bordo più lungo) per farle apparire bene su desktop e tablet.
Puoi persino arrivare a 2000 pixel se vuoi aggiungere qualche “fattore wow” in più, anche se di solito non è così.
Le immagini vengono comunque regolate dal browser sui dispositivi mobili e 1500px è abbastanza grande da sembrare nitido su smartphone con schermi “retina” ad alto PPI.
Le immagini verticali/verticali con un’altezza massima di 1200 pixel (ad esempio 800×1200 pixel per un’immagine verticale 2:3 o 900×1200 pixel per un’immagine verticale 3:4) possono essere ancora più piccole.
Se la presentazione permette la navigazione tra le foto usando il lato frecce, proiettili, strisciando sul cellulare, o le frecce della tastiera su desktop, limitando l’immagine dimensioni come questo sarà mantenere la dimensione del file ragionevolmente brevi, riducendo i tempi di caricamento dell’immagine:
C. Raccomandato per le Dimensioni delle Immagini per i Post del Blog e Altre Immagini Statiche in Layout di Pagina
Se il tuo blog le foto non richiedono un clic per ingrandire (o “lightbox”) dispongono, essi devono essere dimensionati in base alla colonna area di contenuto o larghezza.
Prendi il seguente esempio di un singolo post sul blog:
Immagine è presa dal Sorprendentemente usre sito web
È possibile accertare la reale larghezza dell’area di contenuto, misurando ogni paragrafo di testo utilizzando i metodi di cui sopra, per esempio:
Immagine è presa dal Sorprendentemente usre sito web
in Alternativa, se si dispone già di immagini, si può vedere di che dimensione è il browser è il ridimensionamento di loro.
Per acquisire le stesse informazioni, è possibile utilizzare un plugin per il browser come View Image Info (properties).
Con queste informazioni (ad esempio 825 pixel), è ora possibile raddoppiare le dimensioni per tenere conto dei display retina (quindi 1650 pixel di larghezza).
A seconda del tema del tuo sito e della tolleranza al rischio per il furto di immagini, puoi ridurre tale quantità a 1200 pixel più sensibili sul bordo più lungo (quindi le immagini orizzontali dovrebbero essere larghe 1200px e le immagini verticali dovrebbero essere alte 1200px, mantenendo le proporzioni originali).
Le foto più piccole utilizzate come miniature (che non devono essere espanse) sono soggette allo stesso processo decisionale.
Conclusione
Queste linee guida sulle dimensioni delle immagini del sito Web non si applicano ai servizi di archiviazione di foto come PhotoShelter o SmugMug (che hanno misure di sicurezza integrate e generano miniature a bassa risoluzione dai file originali ad alta risoluzione come necessario per il sito), o quando vendi quelle immagini come download o stampe, come menzionato all’inizio.
Seguendo queste pratiche di linee guida sulle dimensioni dell’immagine del sito Web è un must se si dispone di un sito self-hosted e solo bisogno di presentare le tue fotografie sul web.
La scelta delle immagini corrette è un aspetto importante della creazione di un sito web visivamente accattivante e veloce. C’è, senza dubbio, una curva di apprendimento. Tuttavia, ci sono altri vantaggi da avere, ed è tutto parte dell’emozione di creare e mantenere un sito web!