Immagini responsive in HTML senza usare CSS

Quando creiamo qualcosa di responsive in HTML, siamo soliti usare i CSS con le media queries.

Ma per quanto riaguarda le immagini, possiamo farne a meno usando il tag picture!

Qui sotto un esempio:

<picture>
   <source media="(max-width: 800px)" srcset="piccola.jpg">
   <img src="grande.jpg" alt="Test">
</picture>

Come vedete abbiamo impostato una immagine nella maniera classica (che sarà quella di default).

E poi abbiamo usato source indicando quando usarla (in questo caso una larghezza massima di 800px).

Ovviamente possiamo usare altri tag source per indicare immagini da usare in altre misure.

Enjoy!