Immagini responsive

mobile
Nella fase di progettazione di un tema responsive rimane ancora molto complessa la questione di come gestire le immagini.
Si stanno valutando nuovi attributi e nuovi elementi per fornire ad ogni  utente una immagine ottimizzata con il miglior rapporto tra dimensione e risoluzione dello schermo.
 
In un sito oggi si presentano diverse situazioni che ne rendono complessa la gestione.
Possiamo avere immagini in primo piano o le immagini di sfondo. Dobbiamo tenere in considerazione le dimensioni delle immagini, la risoluzione per non parlare poi delle dimensioni degli schermi, dei formati e delle loro risoluzioni, senza poi tralasciare i differenti dispositivi, browser e la banda a disposizione sul desktop e in mobilità.
 
Tutti quanti noi vorremmo una cosa molto semplice: la sola soluzione che invia l’immagine con le dimensioni e la risoluzione più appropriata in base al browser e dispositivo che effettua la richiesta, che può essere reso accessibile.
Una sciocchezza aggiungerei, cosa ci vorrà mai, sicuramente in giro si troverà qualcosa del genere.
 
Effettivamente ho trovato un articolo che parla della tecnica del metodo “Auto Clown” dicono sia la cosa più vicina a quello che stiamo cercando.
Soluzione non perfetta ma che da ottimi risultati. Sinceramente non sono riuscito a venirne a capo.
 
Per le immagini di sfondo ci aiutano le Media query ma per le immagini in primo piano ancora nessuna libreria ci da una mano.
 
Vediamo quindi alcune soluzioni più semplici torvate in rete.
 
La prima utilizza alcuni attributi del tag <img>.
Con questa tecnica si propone Il <picture> elemento che sfrutta la semantica del HTML5 e <video> che con il supporto delle media query possono scambiare file di origine differenti:
 
 < picture alt=”responsive image”> <source src=”large.jpg” media=”(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)”> <source src=”medium.jpg” media=”(min-width:800px), (min-resolution: 136dpi) and (min-width:400px)”> <source src=”small.jpg”> <!– fallback –> <img src=”small.jpg” alt=”responsive image”> </picture> 
 
 
Un altro metodo invece potrebbe essere quello di utilizzare l’attributo srcset :
 <img alt=”responsive image” src=”small.jpg” srcset=”large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x”> 
 
Spero possa l’articolo possa essere di aiuto, cercherò di approfondire e capire meglio la tecnica del “auto clown”.
 

Lascia una risposta