Come ridimensionare immagini

[ivano85]

Introduzione
Questo vuole essere un how-to di interesse e uso generale, quindi anche se userò il PHP per mostrare praticamente cosa fare, i concetti descritti non sono affatto legati al linguaggio e potrete usarli anche se dovete programmare in Java, C, C++ o qual si voglia altro linguaggio e per qualunque scopo.

Perchè quest'articolo?
Molto spesso si vedono siti web in cui le immagini sono lente da caricare oppure sono presentate in modo distorto poichè non sono state ridimensionate rispettandone le proporzioni, per esempio con codice html di questo genere

<img src="immagine blabla" width="150" height="150" />

Questo codice mostrerà un'immagine correttamente se la larghezza dell'immagine è uguale alla sua altezza. In caso contrario, l'immagine verrà distorta.

Focalizziamo il problema
Il problema del ridimensionamento consiste sostanzialmente nel mantenere le proporzioni dell'immagine. Spesso si definiscono infatti, delle dimensioni massime che le immagini possono avere: in pratica si necessita di far rientrare tutta l'immagine in un determinato rettangolo.

La soluzione
Da quanto detto, risulta evidente che il fattore discriminante è determinato dal rapporto tra larghezza e altezza dell'immagine e del rettangolo in cui bisognerà visualizzare l'immagine. Dobbiamo quindi confrontare i due rapporti: nel seguete codice useremo i prefissi o_img_, n_img_ e rett_ per indicare variabili relative rispettivamente all'immagine originale, all'immagine ridimensionata e al rettangolo.
Di seguito propongo un possibile codice in PHP per definire le nuove dimensioni dell'immagine (i valori delle variabili che iniziano con il prefisso o_img_ dovrete ricavarli a monte, mentre quelli delle variabili che iniziano con rett_ dovrete impostarli a monte):

Codice PHP:

if ($o_img_width / $o_img_height > $rett_width / $rett_height) {  // Caso 1
    $n_img_width = $rett_width;
    $n_img_height = $n_img_width / $o_img_width * $o_img_height;
}
else {  // Caso 2
    $n_img_height = $rett_height;
    $n_img_width = $n_img_height / $o_img_height * $o_img_width;
} 


Da questo codice dovreste aver capito che se il rapporto larghezza / altezza dell'immagine è maggiore di quello del rettangolo, allora vuol dire che l'immagine è più larga del rettangolo, quindi bisogna innanzi tutto ridimensionare la larghezza (caso 1); nel caso opposto invece, l'immagine è più alta del rettangolo, quindi bisogna innanzi tutto ridimensionare l'altezza. In entrambi i casi viene calcolata la proporzione tra le dimensioni dell'immagine e del rettangolo e tale rapporto viene utilizzato per dimensionare l'altra dimensione.

Conclusioni
Questo è il mio piccolo tributo a questa comunità dalla quale manco da moltissimo tempo e dove spero di trovarmi bene d'ora in poi. Inoltre so che è un argomento piuttosto semplice da trattare (forse troppo), però data la tarda ora e il fatto che nonostante la sua semplicità viene spesso trascurato, ho pensato di farvi questo regalino che spero venga comunque apprezzato. Per quanto riguarda l'how-to, se qualche punto non vi è chiaro, fatemelo sapere così cerco di migliorarlo.