- Home
- Categorie
- Digital Marketing
- Grafica, Visual Design & UX
- Dimensione immagini
-
Dimensione immagini
Salve!
Ho delle foto ad altissima risoluzione, a che dimensioni è opportuno ridimensionarle come rapporto qualità-peso tenendo conto delle risoluzioni desktop e mobile più utilizzate adesso 2017?
Far rientrare tutto entro 1920x1080? Quindi quando mi trovo con una foto 4104x2736px meglio 1920x1280px o 1620x1080px?
E quando sono verticali? Tengo conto del lato corto 1080px o il lato lungo 1920px?
La risoluzione citata verrà utilizzata in un sito negli ingrandimenti in una gallery.
Grazie!
-
Ciao,
la cosa migliore che puoi fare è fornire immagini a risoluzioni diverse a seconda della risoluzione del dispositivo, questo per ottimizzare i tempi di caricamento.
-
Si, penso anche io che sia la migliore idea, ma forse anche abbastanza lavorata. Se dovessi tu scegliere una dimensione unica che sia abbastanza buona per le risoluzioni più utilizzate del momento, cosa sceglieresti? Tieni presente gli esempi fatti sopra.
-
Diciamo che non mi spingerei oltre il 1920 di larghezza, poi dipende dal tipo di sito, dallo scopo delle immagini e da quanto è importante per te la velocità di download.
-
Sito web di un costruttore edile, quindi gli ingrandimenti dei lavori si devono vedere, forse 1920px lato lungo sono un buon compromesso, ma con le foto verticali, come dovrei comportarmi, altezza 1080px o 1920px?
Dimmi se conoscendo ora il tema del sito è giusto 1920px.
-
Per le foto verticali dipende da dove sono collocate e quanto vuoi che occupino in verticale.
In alternativa puoi mettere delle foto più piccole e consentire il download ad alta risoluzione a chi è interessato. In questo modo la pagina è veloce per tutti e soltanto chi è interessato ad avere la foto in HD la scarica col tempo che ci vuole.
-
Ma io parlo di ingrandimento con effetto lightbox. No al download. Qualità e risoluzione non da stampa, ma da schermo per le risoluzioni del momento desktop e mobile.
Una foto 4104x2736px, più giusto 1920x1280px o 1620x1080px?
E una verticale 2736x4104px, più giusto 1280x1920px o 720x1080px?
Esiste qualche pratica più giusta/più seguita nel campo del web design?
Concluderei dicendo che il sito è tipologia "vetrina".
-
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
