You are here

Rapporto tra qualità immagine e prestazioni del sito

Inviato da giovanninews on Ven, 23/10/2015 - 12:53

Quella che segue è una piccola parte della documentazione fornita per un sito web che a breve andrà in produzione.

Il sito web è studiato in particolare per fotografi, pittori, scultori e artisti vari, ma può essere ben utilizzabile, con le dovute modifiche, anche da altre categorie di utenti.

Premessa a questo articolo

L' articolo non riproduce alcune parti del sito, quali la home page con la flexslider e le immagini di 400px e di 300px di larghezza, ma riproduce un contenuto con immagini di 250px, di 220px e di 100px di larghezza, senza colorbox ( o lightbox) e senza slideshow per l' ingrandimento e la riproduzione delle immagini, in quanto strumenti non presenti su questo sito web.

Possibile homepage di un sito

PREMESSA NELLA DOCUMENTAZIONE: Partendo dal presupposto che le immagini corrette da caricare su un sito web, che ingrandisce l’ immagine in una colorbox o lightbox di 800px, devono avere una larghezza di 640 pixel ( 800px è la larghezza con cui un monitor con larghezza di 800 pixel, vede l’ immagine ingrandita a tutto schermo; è anche vero che non esistono più desktop a 800 pixel, ma ve ne sono ancora tanti a 1024 pixel dove l’ immagine caricata a 640px è ingrandita a 800px ed è visualizzata in modo ottimale), la compressione dell’ immagine agisce in modo significativo sulla qualità della immagine ingrandita, ma contribuisce anche, in maniera determinante, alle prestazioni del sito web.

La home page del sito web

Immaginiamo un sito web con una home page dove sono posizionate:

  • 1 flexslider che contiene una immagine a 720 pixel di larghezza e che visualizza l’ immagine di tre categorie;
  • 3 viste che contengono 3 immagini da 400px  di larghezza (1 per categoria);
  • 4 viste che contengono 4 immagini da 300px di larghezza (1 per categoria +1 di una ulteriore categoria).

Il contenuto del sito web

Louvre Parigi I contenuti possono visualizzare l’ immagine a 250px, a 220px oppure a 100px e che ingrandisce ogni immagine in una colorbox o una lightbox di 800px di larghezza.

Partendo da una immagine originale con dimensioni di 3456x2304 pixel, di peso pari a 6,25MB, potremmo avere:

- una immagine da caricare di 640px di peso pari a 46,9KB se compressa al 30%;

- una immagine da caricare di 640px di peso pari a 86,2KB se compressa al 10%.

Una immagine con il solo ridimensionamento a 640px senza compressione è improponibile perchè supererebbe i 240KB di peso.

La gestione delle immagini da parte del sistema

Il sistema, partendo dalla immagine di 640px caricata, genera in automatico e al bisogno, ridimensionate e compresse, le seguenti immagini:

  • 1 immagine di 800px (per l' ingrandimento)
  • 1 immagine di 720px (per la flexslider)
  • 1 immagine di 250px (per il contenuto)
  • 1 immagine di 220px (per il contenuto)
  • 1 immagine di 100px (per il contenuto)
  • 1 immagine di 400px (per la home)
  • 1 immagine di 300px (per la home)

Come si sviluppano le immagini nel sito web

Se ad esempio carichiamo nel contenuto 8 immagini da 640px di esempio 1 (46,9KB per immagine), visualizzate nel contenuto come segue, nel contenuto avremo:

  • 1 immagine da 250px, di peso pari a 9,25KB (la seconda immagine di questo articolo)
  • 3 immagini da 220px, di peso pari a 7,58x3 = 22,74KB (le 3 immagini sotto)
  • 4 immagini da 100px, di peso pari a 2,39x4 = 9,56KB (le 4 immagini in fondo all' articolo)
  • l' ingrandimento dell' immagine a 800px di peso pari a 65,48KB (visualizzata nella slideshow se si clicca su qualsiasi immagine)

strada new yorktour eiffel parigigiardino scozzese

Avremo quindi per il contenuto, un peso immagini pari a 41,55KB, escludendo l' ingrandimento che viene aperto in un' altra pagina sovrapposta alla precedente (effetto lightbox + slideshow non presenti qui).

Nella home page avremo:

  • 1 flexslider di peso pari a 30,63KB
  • 3 immagini di viste di peso pari a (anche queste differiscono di poco)
  • 4 immagini di viste di peso pari a (anche queste differiscono di poco)

Se carichiamo nel contenuto 8 immagini da 640px di esempio 2 (86,2KB per immagine), visualizzate nel contenuto come segue, nel contenuto avremo:

  • 1 immagine da 250px, di peso pari a 9,27KB
  • 3 immagini da 220px, di peso pari a 7,57x3 = 22,71KB
  • 4 immagini da 100px, di peso pari a 2,4x4 = 9,6KB
  • l' ingrandimento dell' immagine a 800px di peso pari a 66,17KB

Avremo quindi per il contenuto, un peso immagini pari a 41,58KB, escludendo l' ingrandimento che viene aperto in un' altra pagina sovrapposta alla precedente (effetto lightbox + slideshow).

porto canale pescarachiesa a pennechiesa carmine pennefontana a penne

Conclusioni sul caricamento delle immagini

Per ottenere una immagine che ingrandita non perde di qualità (percepibile all' occhio umano), è quasi indifferente caricare immagini di peso pari a 46KB o immagini di 86KB.

Al fine di non perdere qualità sulla immagine ingrandita, si consiglia di caricare una immagine ridimensionata di larghezza pari a 640pixel con un fattore di compressione compreso tra il 10 ed il 30%. Il peso dell' immagine deve essere compreso tra i 45KB ed i 90KB. Ho inserito un blocco che non permette di caricare immagini superiori a 100KB.

Al fine di mantenere gradevole il contenuto in tutte le visualizzazioni, si consiglia di aprire il contenuto con la visualizzazione di una immagine in testa a 250px e continuare con immagini più piccole (220px e 100px).

Per l' ottimizzazione delle prestazioni si consiglia di non superare il totale di 8 immagini per contenuto (di qualsiasi dimensione); ogni immagine è una chiamata http in più che rallenta il sistema.