- Home
- Categorie
- Digital Marketing
- Grafica, Visual Design & UX
- Dimensione immagini
-
Anche per vederle in lightbox le immagini devono essere scaricate e comunque hai il problema del "peso".
Se un visitatore deve attendere 20-30 secondi per vedere un'immagine dal suo cellulare probabilmente lascerà il tuo sito molto prima di aver completato il download.Parlavo d'immagini ad alta risoluzione da scaricare nel caso tu volessi permettere a qualcuno non solo di vedere l'immagine a schermo pieno, ma anche di fare uno zoom su alcuni dettagli senza perdere qualità.
Secondo me non c'è un formato "giusto" o "sbagliato" in assoluto.
Devi scegliere tu il miglior compromesso tra velocità e qualità dell'immagine, magari basandoti sulle statistiche del tuo sito per vedere che tipo di dispositivi utilizzano i tuoi visitatori oppure basandoti su statistiche di terzi come, per esempio, queste gs.statcounter.com/screen-resolution-stats oppure queste w3schools.com/browsers/browsers_display.asp
Non ho idea di che tipo d'immagini vuoi mostrare ma, forse, far vedere un mattone a 4104x2736px è esagerato e probabilmente una 1280 di larghezza o inferiore è sufficiente.
Per le verticali in lightbox devi farti le stesse domande che ti fai per l'orizzontale: quant'è alto lo schermo del visitatore? T'interessa concedergli di zoomare per ingrandire dei dettagli anche a costo di aumentare sensibilmente i tempi di download?
Le risposte che ti darai ti aiuteranno nella scelta.
-
Sei stato chiarissimo. Ultima considerazione: penso di propendere per 1920x1080px perché con l'ottimizzazione JPG che farò starò sui 300-400 kb, quindi pochi secondi di download live.
Detto questo, poiché ognuno decide come meglio crede ma
Una foto 4104x2736px, tu cosa faresti 1920x1280px o 1620x1080px?
E una verticale 2736x4104px, tu cosa faresti 1280x1920px o 720x1080px?
Grazie!
-
Come ho detto, non c'è una regola, quindi non posso dirti cosa sceglierei perché, non sapendo nulla del sito e del tuo pubblico, qualsiasi cosa io dicessi sarebbe sbagliata.
Dipende dall'esperienza che vuoi offrire al tuo visitatore.
Se deve vederla soltanto a schermo pieno e senza possibilità di zoomare in buona qualità, allora probabilmente 1920 è il massimo che proporrei. Ma se sai che il 90% dei tuoi visitatori ha uno schermo 1366x768 allora è uno spreco di risorse e probabilmente una risoluzione più bassa è accettabile.Inoltre, ricordati che gli schermi hanno aspect ratio diversi e che sui mobile sono quasi sempre verticali.
A te la scelta!
-
No aspetta, non ti darò nessuna colpa nella scelta che mi dirai!
Come detto, se il mio pubblico mi porta a scegliere 1920x1080px, quindi ti stò dicendo io la scelta,
come ti comporti tu con:
Una foto 4104x2736px, tu faresti 1920x1280px o 1620x1080px?
E una verticale 2736x4104px, tu faresti 1280x1920px o 720x1080px?
Esprimiti tranquillamente!
-
Ah ah! Non è ch'io abbia paura di prendermi una responsabilità!
È che veramente non c'è una risposta assoluta!
È come se io chiedessi a te se è meglio un quadro 100x70 o uno 200x140 o se è più bello il rosso o il verde
Come fai a rispondermi?Poi magari sbaglio e qualcun altro saprà essere più esauriente di me dandoti una risposta unica e definitiva.
-
Allora te la pongo diversamente la domanda, ultima, pensando alla maggior parte delle persone in 16:9 orizzontale, 1920x1080px, tu faresti rientrare in questo rettangolo (1920x1080px) sia le foto orizzontali che verticali?
orizzontale: 1620x1080px o 1920x1280px
verticale: 720x1080px o 1280x1920px o 1080x1620px
?
-
Io farei in modo di riempire il più possibile lo schermo senza tagliare le foto.
Quindi 1620x1080px per l'orizzontale e 720x1080px per la verticale.
Questa soluzione però- non lascia possibilità di fare zoom di qualità
- potrebbe essere esagerata per la tipologia di foto a discapito della banda.
-
Ottimo, ti ringrazio dei tuoi suggerimenti! Secondo come la vedo i tuoi punti 1) e 2) non sussistono, zoom non necessario, rapporto-dimensioni peso penso molto buono.
-
Ciao se posso essere utile io consiglio foto orizzontali a 1920 x 1080.
-
Non c'è un giusto o sbagliato, generalmente 1920x1080 mi sembra una dimensione esagerata per delle immagini in un sito, ma se il tuo obiettivo è avere una gallery dove gli utenti possano usufruire di fotografie ad alta qualità per vedere chiaramente ogni dettaglio a discapito dei tempi di caricamento, allora puoi tranquillamente caricare le immagini di quella dimensione.
Se invece il tuo obiettivo è soltanto fornire un ingrandimento di un immagine in modo da renderla visibile più chiaramente, e soprattuto se sai che l'utente medio di quel sito non è disposto ad aspettare per visualizzare un immagine enorme, allora passa a dimensioni più piccole, personalmente non andrei oltre 1280px di larghezza per una gallery lightbox.Oltre alle dimensioni dell'immagine però è importante la compressione, buone compressioni ti permettono di utilizzare immagini di dimensioni grandi senza appesantire troppo la pagina.
Di solito io esporto tutte le immagini in jpeg con photoshop o illustrator con lo strumento salva per web impostando la compressione all'80%
Nel caso invece necessiti di immagini di qualità superiore o con trasparenze allora passo a png.Se il sito in cui devi caricare le immagini è un wordpress ti consiglio il plugin EWWW image optimizer abilitando la compressione WebP, è veramente buono, puoi anche caricare immagini non molto ottimizzate e si occupa lui di tutto il resto.
Nel mio sito smartmix.it ho utilizzato moltissime hero image, belle ma che mi costringono a dimensioni molto grandi, per evitare problemi di lentezza ho appunto ridotto il peso di tutte le foto con photoshop e poi le ho anche date in pasto a EWWW (l'immagine di copertina è larga 1500x1000px ma pesa soltanto 49kb)
Una volta fatto il caricamento delle immagini nel sito puoi verificare che siano ottimizzate correttamente con il tool di google PageSpeed insight e nel caso fosse possibile un ulteriore compressione google ti da la possibilità di scaricare lo zip con le immagini già compresse.
PS. Se il tuo server lo permette abilita http/2, dovresti vedere un incremento di velocità nelle pagine del sito