Come pubblicare immagini Responsive con Blogger.

Come pubblicare immagini Responsive con Blogger utilizzando i tag HTML5 figure e picture.

Quando si apre un post di Blogger con un tablet o con uno smartphone le immagini che vi sono pubblicate in linea di massima si adattano alla larghezza del layout del dispositivo con cui vengono visualizzate. Questo non accade sempre con tutte le immagini e con tutti i modelli.

Ricordo a quei pochi che ancora non lo sapessero che il Responsive Design è una tecnica per adattare la grafica di una pagina web alla larghezza del dispositivo con cui viene visualizzata. Si possono installare Modelli Responsive per Blogger oppure scegliere tra i tanti Temi Responsive per Wordpress.

Nel linguaggio HTML5  sono stati introdotti i tag figure e picture per postare immagini responsive cioè che adattino la loro larghezza al dispositivo. Poniamo che volessimo pubblicare una foto di grandi dimensioni per esempio in una pagina statica che sia stata debitamente allargata. Se si carica una foto su Picasa per averne il link diretto dobbiamo cliccarci sopra, andare sulla destra

e cliccare su Link a questa foto. Si aprirà un tool per incorporare l'immagine. Si mette la spunta a Solo immagine (nessun link) per copiare l'indirizzo della foto. Su dimensioni si visualizzeranno cinque opzioni: Miniatura 144px, Piccola 288px, Media-400 400px, Media-640 640px e Grande 800px. Quando l'immagine è più piccola di 800 pixel c'è anche l'opzione Dimensione originale. 

COME AVERE IL LINK DI IMMAGINI PIÙ LARGHE

Si possono avere anche URL di immagini più larghe di 800 pixel. Dopo aver copiato l'URL 

lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s800-Ic42/ponte.jpg

si modifica la parte della stringa che ne determina la larghezza. Nell'esempio precedente si sostituisce s800 con s1368 per portare la larghezza della foto da 800 pixel a 1368 pixel

lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg

Vediamo adesso che codice usare per rendere responsive questa immagine di 1368 pixel in modo che venga visualizzata correttamente da tutti i dispositivi mobili.

<figure>
  <img style="width:100%"
       alt="Ponte su torrente"
      src="https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg"
      srcset="https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s689-Ic42/ponte.jpg 689w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg 1368w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s500-Ic42/ponte.jpg 500w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1000-Ic42/ponte.jpg 1000w"
       sizes="(min-width: 1066px) 689px,
              (min-width: 800px) calc(75vw - 137px),
              (min-width: 530px) calc(100vw - 96px),
              100vw">
</figure>

dove nell'attributo src=".." metteremo l'URL della immagine originale per farla visualizzare nei browser che non supportano HTML5 e utilizzeremo il tag srcset per settare le varie dimensioni per i diversi dispositivi. Questo codice può essere pubblicato in un post insieme agli altri contenuti