Esportare immagini per web in buona qualità

Buongiorno a tutti!
Ho deciso di abbandonare adobe in favore di GIMP. Elaboro le immagini solo per inserirle nei siti che creo per qualche cliente. Per questo mi servono immagini molto leggere. E qui veniamo al problema:

  1. scarico un’immagine da Freepik - Foto da freepik.jpeg (vedi Cartella Drive)

  2. la apro con GIMP 2.10.32 (revisione 1) su Mac Intel e scelgo di mantenere il profilo (ma con converti il problema rimane) - Apertura.png

  3. scalo l’immagine da così

    a così

  4. Esporto l’immagine con i seguenti settaggi

Il risultato è questo - Foto convertita.jpeg

Come potete vedere l’immagine è molto meno definita. Mi direte: “ovvio! pesa 10 volte meno.” Ma ricordo che con photoshop riuscivo a mantenere un livello di definizione dell’immagine alleggerita maggiore. Sbaglio qualcosa come credo oppure GIMP non è in grado di ottimizzare le immagini per il web?

Grazie a chi vorrà aiutarmi

A dire la verità non capisco bene perché riduci tantissimo la definizione in pixel ma poi esporti con qualità 100%. Un contenuto fotografico ragionevolmente andrà esportato in JPG con qualità tra 85% e 90% (sopra il 90% è pressoché impossibile notare differenze con un 100%, salvo casi particolari).

JPG è un formato lossy, cercare di usarlo in modo da approssimare un lossless porterà solo a sprecare byte.


La tua immagine convertita è larga 900x600 e pesa 396 KB. Questa qui sotto è grande 2048x1365, esportata all’87% di qualità e pesa 337 KB.


Fatta questa premessa, consiglio di usare strumenti specifici per la riduzione del peso. Ce ne sono diversi a riga di comando e anche qualche GUI piuttosto interessante.

Segnalo per esempio Trimage, Pinga e ImageOptim:

https://trimage.org/

Se passo la foto nella versione web di ImageOptim (senza toccare niente, quindi qualità medium) ottengo un file da 152 KB ma non si notano differenze marcate:

2 Mi Piace

Dimenticavo: esportando l’immagine è emerso che aveva un commento lunghissimo, che ho rimosso.

Ti ho modificato il messaggio iniziale, integrando le schermate essenziali.

1 Mi Piace

WOW mi hai fatto un mini-corso! Grazie!
Riduco le dimensioni perchè sul sito mi serve quella dimensione.
Mi consigli quindi di lasciare le dimensioni originali, ridurre il peso con gli strumenti che mi hai consigliato e poi agire da codice html per impostare le giuste dimensioni?

OK, questo è un motivo valido.

Ricordati solo di tenere in considerazione anche chi ha i display a densità 2x. Tecnicamente ci sono pure quelli a 1.5x come 3x ecc… ma a dire il vero io personalmente ritengo che abbia senza puntare a 1x e 2x, giusto per semplicità. Chi ha un display 3x le differenze probabilmente le nota sulla nitidezza dei caratteri ma non sulle foto.

Tieni anche a mente che poi il sito dovrà essere responsive e adattarsi a diversi dispositivi, la foto che su desktop a 1x vedi a 900x600 occuperà 1800x1200 pixel su un display 2x, ma su uno smartphone potrebbe diventare (per esempio) larga 320px a 3x e dunque occupare 960 di larghezza.

Questo è il motivo per cui molti CMS, tra cui WordPress, gestiscono in automatico la generazione dei srcset usando alcune dimensioni preimpostate.

No be’, il mio era più un esempio per mostrarti un peso simile al tuo ma con molti più pixel.

Naturalmente non ha senso mettere una foto larga 5mila o 10mila pixel su un sito. Come mera preferenza personale, io quando lavoro preferisco tenerle un po’ più grandi del 2x e poi lasciare al CMS (uso spesso WordPress) di generare le varianti alternative.

Certamente una passata con gli strumenti di ottimizzazione la darei.

Dico un po’ più grandi perché in futuro le risoluzioni degli schermi potrebbero crescere ancora, quindi mi piace tenere un po’ di margine per gli anni a venire. :slight_smile:

Dal CSS. :wink:


Butto nel calderone un altro argomento ancora. I browser moderni supportano quasi tutti WebP e alcuni anche il formato AVIF. Questi forniscono una qualità maggiore a parità di “peso” del file finale.

Se per ipotesi usi WordPress, puoi includere questo plug-in e usarlo per fornire immagini in WebP a coloro i quali visitano il tuo sito usando un browser che lo gestisce:

Il plug-in agisce in modo “furbo” perché non modifica i link alle immagini, ma fa il suo trucco tramite .htaccess. Quindi la tua immagine ha sempre un URL tipo immagine.jpg, ma lo script controlla qual è il browser che richiede il file e decide se fornire un file JPG o un file WebP. Funziona perché il browser non bada all’estensione del file, guarda solo il tipo di contenuto che viene dichiarato dal server.

PS: Scusa se ho divagato un po’, ma l’argomento mi interessa da un po’ di tempo sia per questioni di lavoro che per il mio stesso sito. :smiley: Ti ho buttato lì un bel po’ di argomenti che ruotano intorno all’ottimizzazione delle immagini, vedi tu poi da cosa partire. :wink:

Che spettacolo!!! Grazie mille
Studierò ogni passaggio di quello che mi hai scritto. Nel frattempo ti offro una birra virtuale :beers: