L'Importanza di ridimensionare le immagini da caricare sul web

[dalsnibba]

Volevo sottolineare l'importanza di ridimensionare tutte le immagini da caricare nel web, che siano foto per diari di viaggio, immagini generiche o altro in generale.

In una delle pagine principali del sito di crocieristi c'e' proprio un tutorial su come ridimensionare le foto tramite un software freeware per windows


https://www.crocieristi.it/come-ridi...iu-fotografie/



Sarebbe auspicabile ridimensionare le foto ad un formato non troppo grande ad es. 1024x768 o 1600x1200 pixel e con peso di centinaia di Kb 100 - 300 Kb e non megabytes

per non appesantire troppo tutto il sistema sia server, client e di conseguenza gli utenti che devono scaricare le immagini che non sempre hanno a disposizione fibra / adsl ma solo connessione dati da cellulare.

Oltre al fatto che lo spazio di archiviazione delle suddette immagini non e' infinito...




riporto qui anche l'intervento di Marco (Marbor) da altro thread:

CUT


Approfitto di questo mio post per darTi un consiglio e darlo a tutti quanti Noi:
"Credo sia necessario selezionare le fotografie in quanto alcune di queste, ne converrai con me, sono "quasi" duplicate o ridondanti e, in ogni caso cercherei, prima di postarle, di ridurle nelle loro dimensioni e occupazioni con un programma di gestione fotografie reperibile gratuitamente su internet;
questo, soprattutto, per ridurne le dimensioni.
Tieni presente che 5.183x3.456 pixel sono un'enormità in fatto di "risoluzione" ... in alcuni forum il limite imposto dagli Amministratori si aggira attorno agli 800 pixel massimi per un lato della singola foto; inoltre una risoluzione media dello schermo di un PC è di 1.920x1.080 pixel, quindi vuol dire che il Browser deve caricare per intero una foto e poi "ridurla" per visualizzarla"...

In estrema sintesi; uno spreco di Risorse del PC e di tempi di caricamento della pagina stessa; al primo caricamento la pagina resta bianca salvo caricare lentamente le immagini, dalla seconda volta in poi le immagini sono nella Cache del Browser, questo vuol dire che il caricamento della pagina sarà più veloce, ma occupo spazio sull'Hard Disk del mio PC; se periodicamente scuoto la Cache del Browser (operazione per altro raccomandabile...) ritorniamo all'inizio di questo ultimo ragionamento....
Quindi, in parole povere non ne usciamo...

Il mio consiglio, credo che gli Amministratori Tecnici del Forum ne convengano, è quello di;
1. Selezionare le immagini limitando il numero delle stesse da inserire in ogni pagina
2. Evitare foto simili tra loro.
3. Ultimo, ma non per ultimo, "trattare con uno specifico programma", le immagini per ridurne la dimensione prima di postarle.

CUT

Marco

 

[Blueyes]

Nel mio piccolo non posso fare altro che avvallare la cosa, essendo di una logica ineccepibile.

L'alternativa sarebbe impostare un limite di pixel per lato o di "peso" dell'immagine sul Forum, ma voglio sperare che tutti noi Utenti agiremo "cum grano salis" (o come diamine si scriva).

Blue

 

[giada50]

Per chi non ne fosse a conoscenza si possono ridimensionare le foto anche utilizzando Paint il cui software è già installato sul PC.

1) Per aprire Paint, fare clic con il tasto destro sull’immagine che vuoi ridimensionare;

2) Fare clic sul pulsante "Apri con" dal menu a tendina fare clic su Paint;

3) Aperto il software, dal menu Home fare clic su" Ridimensiona";

4) Nella finestra di dialogo "Ridimensiona" selezionare la casella di controllo "Mantieni proporzioni" per fare in modo che restino le stesse proporzioni dell’immagine originale;

5) Se la casella di controllo "Mantieni proporzioni" è selezionata, è necessario immettere solo il valore orizzontale (larghezza) o verticale (altezza). L’altra casella nell’area Ridimensionamento viene aggiornata automaticamente;

6) Eseguire una delle operazioni seguenti nell’area Ridimensionamento e quindi fare clic su OK :
- Per ridimensionare l’immagine di una determinata percentuale, fare clic su "Percentuale" e quindi immettere una percentuale nella casella Orizzontalmente per ridurre in base alla larghezza o nella casella Verticalmente per ridurre in base all’altezza.
- Per ridimensionare l’immagine secondo una dimensione specifica, fare clic su "Pixel" e quindi immettere una nuova larghezza nella casella "Orizzontalmente" o una nuova altezza nella casella "Verticalmente".

7) Fare clic sul pulsante "File", scegliere "Salva" con nome e quindi fare clic sul tipo di file immagine per l’immagine ridimensionata;

8) Digitare un nuovo nome di file nella casella "Nome file" e quindi fare clic su "Salva".

Gianni

 

[MarBor]

Premessa

La gestione di ogni fotografia con semplici programmi di grafica consente di ridurre sensibilmente il loro “peso” sia in termini di dimensioni effettive della fotografia (Pixel) sia in termini di occupazione dello spazio sui Sistemi ospitanti (MByte); è altrettanto vero che una fotografia “modificata” riduce sensibilmente anche tempo di caricamento dell’immagine stessa durante la visualizzazione da parte del Browser che utilizziamo per navigare in Internet(es.Chrome®).
Per quanto riguarda l’occupazione dello spazio fisico (MByte), questo assume un valore ancora più importante qualora decidessimo di memorizzare le nostre fotografie su Piattaforme, Server esterni oppure sul Sistemi di Crocieristi.it; come Utente Gmail® ho ricevuto nei giorni scorsi un avviso da parte di Google® in cui mi veniva notificata la variazione delle condizioni di utilizzo in merito all’occupazione dello spazio di archiviazione.
Per cui, “più piccole” saranno le immagini che andremo a memorizzare, maggiore sarà il loro numero e maggiori saranno i benefici per le Persone con cui le andremo a condividere, Utenti del Forum compresi.

Le fotografie diurne (le notturne, ovviamente, hanno “un numero ridotto" di colori) presenti nei miei diari sono tutte scattate in formato 16:9 e alla massima risoluzione consentita dalla fotocamera dello Smartphone (mediamente attorno ai 7-10MByte ciascuna), gestite con un programma di grafica, la stessa immagine potrebbe pesare circa la ventesima parte (300-450Kbyte) senza che, per questa operazione, l’occhio umano ne percepisca la differenza sulla “perdita di qualità”.

Fig.01

Ricordo che, un “caricamento massivo di fotografie ad alta risoluzione” quale potrebbe essere la stesura di un diario, porterebbe in breve tempo a una occupazione importante degli archivi dei Sistemi oltre al fatto che molte fotografie presenti all’interno di una singola pagina influirebbero notevolmente sui tempi di caricamento e sulla conseguente visualizzazione della pagina stessa laddove le connessioni telefoniche non siano propriamente di ultima generazione (Fibra Ottica).

Come considerazione di carattere generale sono consigliate fotografie in formato JPG mentre sono da “evitare come la peste” le stesse immagini in formato GIF e BMP.



Programmi di Gestione Immagini

Tra i vari Programmi Windows® per la Gestione delle Immagini, uno tra quelli che reputo piuttosto semplice da utilizzare è IrfanView® il cui scaricamento (Download) è possibile effettuarlo dall’Home Page del sito Irfanview (https://www.irfanview.com/) che presenterà sia la versione a 32bit che a 64 bit dipendentemente dal Sistema Operativo del proprio PC.

Il programma è Freeware ovvero di utilizzo personale gratuito; ovviamente non deve essere utilizzato per scopi commerciali.

Opzionalmente, consiglio di scaricare anche una sua variante (Plug-in) qualora si volesse il programma in versione Italiana (https://www.irfanview.com/languages.htm); all’interno di questa pagina ricercare:
…..» Italian Installer or ZIP
per semplicità selezionare “Installer”.

Effettuate le operazioni di cui sopra, o solo la prima, troverete nella Cartella Download (o dove generalmente Windows® effettua le operazioni di scaricamento dei file e dei documenti da Internet) il o i seguenti file:
1. iview456_x64_setup (la versione attuale corrisponde alla 4.56, da qua il numero 456 nel nome del file)
2. irfanview_lang_italian

Il primo file è il programma di installazione vero e proprio di Irfanview®e il secondo, se ritenuto necessario, il Plug-in per la Lingua Italiana.

Installazione del Programma InfanView
Selezionare il file iview456_x64_setup (o eventuali altri numeri al posto di “456”) e confermare ogni domanda proposta.

Installazione della Lingua Italiana (opzionale)
Al termine del passaggio precedente, selezionare il file irfanview_lang_italian e, anche in questo caso, confermare ogni domanda proposta.

Effettuata la prima operazione tra tutti i programmi installati sul nostro PC apparirà anche IrvanView 64 ovvero una icona rossa rappresentata da una “specie di orsacchiotto rosso posto a pancia in su” alla cui selezione:

Fig.02

il programma è già in grado di elaborare qualsiasi immagine già memorizzata negli archivi del nostro PC; se si è interessati alla Lingua Italiana, selezionare: “Options” e successivamente “Change language…” ovvero:

Fig.03

……. e, nella schermata successiva, ricercare ITALIAN.DLL (o ITALIAN2.DLL) e confermare con “Ok”; ora il Programma IrfanView® si presenterà nella nostra madrelingua (se installata con irfanview_lang_italian).



Gestione delle Immagini

IrfanView® è un Programma di Grafica molto semplice ma piuttosto potente e versatile e permette di gestire al meglio le nostre fotografie e immagini; tra i vari comandi disponibili abbiamo quelli che ne permettono la rotazione, il riflesso, la scala di grigi, il cambio colore,… e chi più ne ha, più ne metta (> Immagini):

Fig.04

Selezioniamo quindi l’immagine di nostro interesse tra tutte quelle archiviate nella Cartella (Folder) del nostro PC (> File > Apri…):

Fig.05

Fig.06

Tra tutti i Comandi presenti nel Menù Immagine, quello che a noi interessa maggiormente in questo momento è “Ridimensiona/ricampiona… (Ctrl+R)”:

Fig.07

con il quale sarà possibile, partendo dalle informazioni relative alla nostra fotografia (es.4032x226,8) modificarne le dimensioni; nel nostro caso, dovendo ridurle, occorrerà inserire i valori di proprio interesse (es.1140x641, il programma applicherà in modo automatico la proporzione corretta per l’altra dimensione - Parametro "Mantieni le proporzioni" selezionato in Fig.08) oppure nella parte destra di questa nuova finestra selezionare una tra le dimensioni proposte dal programma stesso (es.800x600 – 1024x768) mantenendo il parametro “pixel” ovvero il numero di puntini colorati che costituiscono la larghezza e l’altezza della nostra fotografia:

Fig.08

In questa prima fase, eviterei di "toccare" altri parametri lasciando inalterati i valori proposti da IrfanView®, successivamente potreste sbizzarrirVi con tutte le prove possibili e immaginabili...; l’operazione successiva sarà quella di salvare la “nostra nuova immagine”:

Fig.09

Un consiglio personale che posso fornirVi consiste nel mantenere lo stesso nome della fotografia originale aggiungendo un prefisso o un suffisso che ne evidenzi un "qualsiasi" intervento:

2020-10-19_14-50-11-Modificata

Come ultimo punto, ricordo di convertire la fotografia (se già non lo fosse) nel formato JPG e di “evitare” le immagini in formato GIF e BMP.

A questo punto, provate a fare un semplice "esercizio visivo" tra le Fig.07 e Fig.09... sono così tanto differenti?
Eppure se guardate attentamente negli angoli in basso a sinistra di entrambe le immagini noterete che l'originale è di 4032x2268 pixel mentre quella modificata è di 1140x641 pixel.... è di circa tre volte più piccola come dimensioni ma "pesa" in termini di occupazione sui Sistemi (quindi in MB) la ventesima parte (Fig.01).


Per le altre varie opzioni e comandi del programma IrfanView®, non Vi resta che divertirvi con un po’ di prove…

Buon Lavoro,
Marco

 

[Alessandro23_g4]

Avendo un blog personale, non posso che sostenere l'idea che le immagini siano il principale killer della velocità del sito.

Alcune immagini esagerate e il tuo sito avranno bisogno di un'eternità per caricare una pagina.

Il mio sito era così lento prima di avermi rivolto a un****** per ottimizzarlo.
La prima cosa che i ragazzi hanno fatto è stata sbarazzarsi delle foto che stavo usando. Semplicemente cambiando le immagini ha ottimizzato di parecchi secondi il tempo di caricamento.