Rimani Aggiornato
Poiché dedichiamo molto tempo alla creazione di immagini belle e significative ovviamente vogliamo che vengano mostrate nel modo più professionale possibile. Per questo si deve prestare molta cura alla creazione del proprio portfolio e all’inserimento in esso delle nostre immagini.
Proprio su quest’ultimo punto si hanno le esperienze peggiori, perché purtroppo caricare le foto online è una questione di compromessi.
Le foto ad alta risoluzione richiedono tempo per essere caricate e questo alla fine può portare i visitatori del sito a uscire senza nemmeno guardare quello che abbiamo realizzato, d’altro canto, cercando di “alleggerire” i file si perde qualità. Quindi, la questione principale è come preservare la qualità delle proprie immagini senza danneggiare le prestazioni del portfolio online. La risposta a questa equazione può essere risolta adottando alcune buone pratiche. Scopriamo più approfonditamente i problemi e le soluzioni di ottimizzazione delle immagini per il web.
Ottimizzazione dell’immagine: qual è il problema?
Per poter visualizzare le immagini su un sito web, che si tratti di dispositivi mobili o desktop, il browser Internet deve scaricare ogni singolo file. Pertanto, più grandi sono i file, più tempo ci vorrà per caricare le pagine. Uno studio ha mostrato che il 40% delle persone abbandona la pagina se essa impiega più di 3 secondi per caricarsi. Inoltre, la velocità può avere conseguenze terribili per il tuo SEO. Visto che l’esperienza utente è considerata un importante fattore di ranking per Google (e altri motori di ricerca), i siti Web lenti tendono ad essere associati a posizioni più basse nei risultati di ricerca. Questo è fondamentale se vuoi che il tuo pubblico ti trovi facilmente online.
Un’ulteriore sfida deriva dai dispositivi mobili, contando per oltre il 50% del traffico web. La larghezza di banda degli smartphone e dei tablet è generalmente inferiore rispetto alle reti domestiche cablate, il che rende più difficile la visualizzazione delle immagini ad alta risoluzione sugli schermi dei visitatori.
La compressione
La prima tecnica di ottimizzazione dell’immagine per il web è chiamata compressione. Si basa sul fatto che il software riesca a trovare informazioni ridondanti sulle immagini e le ometterà dal file. Poiché meno dati significano meno byte, questo processo consente di ridurre le dimensioni delle immagini, rendendo il caricamento del sito molto più veloce. Uno degli algoritmi di compressione più diffusi e conosciuti è il JPEG.
Più potente è la compressione, minore sarà la dimensione del file. Tuttavia, se una leggera compressione è difficilmente visibile a occhio nudo, l’applicazione di una compressione molto spinta porta a un abbassamento della qualità abbastanza visibile, per esempio le immagini appariranno significativamente meno nitide. Qui di seguito un esempio pratico di compressione.
L’immagine alla vostra sinistra è stata esportata con photoshop a qualità massima (e ridimensionata per uso web), il suo peso è di 112Kb, mentre la versione alla vostra destra è stata esportata a qualità minima e pesa 34Kb.
La foto ad alta risoluzione, che sul blog per ovvi motivi non posso caricare, in JPEG a qualità massima arriva a pesare 12,4Mb mentre a qualità minima 490,4Kb, subendo però una notevole perdita di qualità.
Il ridimensionamento
Oggi, la maggior parte delle fotocamere e dei dispositivi mobili è in grado di scattare foto ad alta risoluzione, le quali vanno obbligatoriamente ridimensionate, poiché anche la risoluzione influisce sulle dimensioni del file. Il principio è semplice: più piccola è un’immagine (in termini di risoluzione) più leggero sarà il file.
Tornando all’esempio precedente, mantenendo la qualità al massimo e ridimensionando l’immagine da una risoluzione di 5184x3888px a 1920x1440px il file passa rispettivamente a pesare da 12,4Mb a 1,7Mb.
Foto ridimensionata a 1920x1440px
Su uno smartphone, il ridimensionamento non è molto percepibile. Il problema si verifica quando l’immagine viene visualizzata su schermi più grandi. Un ridimensionamento eccessivo potrebbe far apparire le immagini pixelate e quindi poco professionali.
La soluzione
Quando ridimensiono e comprimo una foto per il mio portfolio online cerco di non farle superare i 400Kb, impostando una qualità di compressione media (che su Photoshop coincide con i valori da 5 a 7) e una risoluzione che nel caso di foto orizzontali è di 1920px di larghezza mentre per le foto verticali è di 1080px di altezza. Come già scritto precedentemente anche risoluzioni molto inferiori a queste andrebbero bene sui dispositivi mobili, ma voglio che il mio portfolio sia visibile a una qualità e a una risoluzione accettabili anche tramite monitor per pc.
Infine, per rendere il caricamento delle nostre foto il più rapido possibile, dovremmo scegliere un buon servizio di hosting web e un’offerta che ci consenta di avere dei server prestanti sui quali far girare il nostro sito. Per quanto andremo ad ottimizzare un’immagine se il nostro sito si trova su server lenti e affollati verrà caricato lentamente da chi vorrà consultarlo.
Se invece di un sito web volete impiegare una pagina faebook a tale scopo vi consiglio di andare al seguente articolo: Guida su come ottimizzare e salvare le foto per facebook, tutorial per photoshop
Rimani Aggiornato
