Come riproporzionare un'immagine con Gimp

Nella mia esperienza lavorativa quando si realizza un sito internet con un aspetto professionale, non basta acquistare un template. E’ importante utilizzare belle foto e saperle lavorare, affinché si adattino alla grafica del sito.

Anche quando lavoro su siti vetrina, dove vengono presentati prodotti o servizi.può capitare anche se ognuno di questi ha una pagina che li spiega in dettaglio, all’interno del sito abbiamo un elenco dei servizi o prodotti offerti.

Per rendere più gradevoli alla vista queste pagine a ogni elemento viene associata un’immagine. Infatti hanno diversi vantaggi:

• Rendono la pagina leggibile perché l’occhio usa le immagini per orientarsi all’interno della pagina.
• Hanno un potere evocativo.
• Prodotti e servizi possono essere indicizzati su Google Image dando ancora più possibilità di essere trovati.

Principalmente sul desktop questi servizi vengono disposti in una griglia, e se questa griglia è allineata in orizzontale la pagina del sito ha un aspetto più professionale. Acquistando le immagine dai vari siti non sono mai riuscito a capire perché le immagini non hanno sempre le stesse misure(sarebbe più corretto parlare di proporzioni) facendo un esempio ho bisogno di nove immagini della dimensione 300px x 150px, otto immagini le ho trovate della misura corretta, una era della misura 300px x 250px.

Se gioco a livello di html e css ho due soluzioni:

1. Carico l’immagine con le dimensioni con cui l’ho trovata e forzo l’altezza. Soluzione semplice e veloce che però mi distorce la foto.
2. Soluzione più tecnologica gioco con html e css utilizzando overflow-y questo non mi distorce l’immagine nascondendo i 200px che crescono. Non è una strada completamente sbagliata ma per una sola immagine correggere l’immagine è più veloce.

N.B.
Volendo c’è un’altra soluzione più tecnologica, che si avvale del php(o di altri linguaggi), quando carico l’immagine sul sito questa viene automaticamente riproporzionata in base a dove deve essere utilizzata. Questa tecnica va bene per un Blog o per un e-commerce, ma come l’utilizzo del overflow-y ha un piccolo difetto, taglia la parte dell’immagine che si è deciso di tagliare quando è stato predisposto l’ambiente: la parte alta, la parte bassa oppure una parte in alto e una parte in basso.

Senza valutare com’è composta l’immagine. Ad esempio in un ritratto potrebbe tagliare in collo del soggetto lasciando uno spazio enorme sopra la testa, cosa che facendolo con un programma di grafica valutando caso per caso si può decidere cosa tagliare.

Altro vantaggio nel ritagliare un’immagine e non lasciarla a dimensioni piene è il fatto che questa è più leggera, quindi più veloce da caricare offrendo un’esperienza migliore ai visitatore del sito.

Ma come si fa a riproporzionare un’immagine con gimp?

Una prima soluzione è quella di selezionare una parte dell’immagine con lo strumento selezione rettangolare e incollarla in una nuova immagine, ne avevo parlato nell’articolo Come ritagliare immagini con Gimp. Ma se il problema è che ho un’immagine o troppo alta o troppa larga, è scomodo perché in fase di selezione bisogna fare più fatica a selezionare la giusta altezza o larghezza. per questo in questi casi preferisco usare lo strumento “Configura la dimensione della superficie".

Per prima cosa apriamo il file con Gimp e andiamo nel menù Immagini, clicchiamo sulla voce dimensione superficie, apparirà la seguente finestra.

Sotto certi aspetti è molto simile a quella per scalare le immagini. Togliamo il riproporzionamento tra l’altezza e la larghezza dell’immagine grazie all’apposito pulsante (Vedi immagine seguente).

Dopo aver slegato l’altezza e la larghezza possiamo variarle a nostro piacimento. In questo caso modificherò l’altezza, da 352 px la porterò a 320, inserirò il valore 320 nel campo altezza.

Fatto questo dobbiamo dire a Gimp quale porzione dell’immagine ci interessa e quale no, e lo faremo con lo scostamento, che è impostabile nella parte bassa della finestra Configura la dimensione della superficie.

In questo caso mi interessa la parte centrale dell’immagine, quindi mi basterà cliccare sul pulsante Centra, e Gimp mi mostrerà nell’anteprima l’immagine riquadrata con la porzione che rimarrà dopo il ridimensionamento.

Nel caso in cui non ci interessasse la parte centrale dell’immagine, ma un’altra porzione, cliccando con il mouse sull’anteprima e spostandoci, possiamo scegliere in piena libertà l’area di nostro interesse.

Cliccando poi sul tasto Ridimensiona vedremo a video l’immagine ridimensionarsi. Non ci rimane che salvare l’immagine con i comandi Esporta come…

Come procedere a riproporzionare una serie di immagini

Nell’esempio che ho fatto ho detto di aver bisogno di usare immagini 300x150 e le ho trovate di 300x250.

Quando costruisco la griglia in base al numero di immagini che uso su una singola riga e la larghezza della pagina le immagini dovranno avere una certa larghezza, diciamo 300, l’altezza siamo noi a deciderla.

Solitamente recupero tutte le immagini che mi servono. Le immagini non le trovo mai delle giuste dimensioni. Cerco un’immagine di 300x150 ma la trovo di questa misura potrei trovarla di 2100 x 1050.

Prima cosa che faccio è scalare le immagine con la funzione di Gimp “Scala immagine” impostando a tutte le immagini la larghezza 300 mantenendo le proporzione originale tra larghezza e altezza.

A questo punto ho tutte le immagini con la larghezza corretta, ma ognuna avrà un’altezza diversa. Mi passo tutte le immagini che ho scalato e mi segno su un foglio le varie altezza. Quella più bassa è quella che uso per le mie miniature es 150px. In questo modo ho determinato l’altezza che avranno.

Con la procedura sopra descritta utilizzando “Configura la dimensione della superficie” imposto a tutte le immagini l’altezza di 150px.