Uno dei problemi dei siti responsive è la grandezza (size) delle immagini, questo perchè alcune immagini potrebbero sforare a seconda della grandezza dello schermo utilizzato.

Alcuni siti utilizzano i css e modificano l’immagine da visualizzare mediante le media query, altri invece, utilizzano bootstrap per effettuare il semplice resize dell’immagine in base alla grandezza dello schermo.

La prima soluzione potrebbe essere la migliore in quanto permette di avere immagini di grandezze diverse ottimizzate per ogni dispositivo supportato mentre la seconda è sicuramente la scorciatoia più comoda e semplice.

Il problema della prima soluzione è la manutenibilità in quanto è necessario avere immagini di grandezze differenti ed i relativi file css sempre aggiornati. 

La soluzione di adottare gli strumenti messi a disposizione da bootstrap è invece sicuramente la più semplice e facilmente realizzabile.

Infatti utilizzando bootstrap basterà aggiungere la classe img-responsive al nostro tag img e la nostra immagine verrà automaticamente adattata alla grandezza dello schermo in uso (provare per credere!).

Trovate tutta la documentazione qui:

http://getbootstrap.com/css/#images

N.B. Nel caso in cui si abbiano diverse immagini e/o queste immagini non siano state inserite da noi, è possibile utilizzare questo semplice lo script:

function setResponsiveImages() {
            $(".container img").each(function () {
                if (!$(this).hasClass("img-responsive")) {
                    $(this).addClass("img-responsive");
                }
            });
        }
Happy coding 😉