Utilizzo delle immagini poster nei contenuti dei plug-in

Diverse settimane fa Chrome ha annunciato una nuova impostazione dei contenuti che mette automaticamente in pausa i contenuti dei plug-in che ritiene essere periferici rispetto ai contenuti principali del sito per tutti gli utenti di Chrome 45 in poi (stabile da settembre 2015). Si tratta di una soluzione vincente per gli utenti in termini di utilizzo della CPU e consumo energetico, ma potrebbe comportare la mancata visualizzazione dei contenuti completi offerti dal tuo sito web.

Fortunatamente, l'impostazione rispetta anche il parametro poster in modo simile agli elementi video. Ciò ti consente di specificare un'immagine da utilizzare al posto del plug-in in pausa, anziché il frame su cui Chrome mette in pausa i contenuti del plug-in.

Ecco un esempio di utilizzo pratico. Se Chrome decide di mettere in pausa flash.swf, al suo posto viene visualizzato il file poster.png. Se l'utente fa clic sul poster, i contenuti Flash verranno riprodotti normalmente.

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="poster.png">
</object>

Il valore del parametro poster viene interpretato allo stesso modo dell'attributo srcset di un tag img, quindi può supportare anche visualizzazioni con DPI elevato. Di seguito è riportato un esempio della sintassi srcset:

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="snapshot1x.png 1x, snapshot2x.png 2x">
</object>

È importante che l'immagine utilizzata abbia le stesse dimensioni dei contenuti del plug-in, altrimenti l'immagine potrebbe risultare distorta sullo schermo dell'utente