Używanie obrazów plakatów w treści wtyczki

Kilka tygodni temu Chrome ogłosiliśmy wprowadzenie nowego ustawienia treści, które automatycznie wstrzymuje treści z wtyczek, które uzna, że są one peryferyjne w odniesieniu do głównej zawartości witryny, i będą widoczne dla wszystkich użytkowników Chrome od wersji 45 (wersja stabilna – wrzesień 2015 r.). W przypadku użytkowników jest to korzystne pod względem wykorzystania procesora i energii, ale może sprawić, że nie będą widzieć całej zawartości Twojej witryny.

Na szczęście to ustawienie uwzględnia też parametr poster (plakat) w podobny sposób jak elementy wideo. Dzięki temu można wskazać obraz, który ma być używany zamiast wstrzymanej wtyczki, zamiast tej ramki, na której Chrome ma wstrzymać treść wtyczki.

Oto przykład zastosowania tej funkcji w praktyce. Jeśli Chrome wstrzyma plik flash.swf, w jego miejsce pojawi się poster.png. Po kliknięciu plakatu zawartość Flash odtworzy się normalnie.

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

Wartość parametru poster jest interpretowana w taki sam sposób jak atrybut srcset tagu img, więc może też obsługiwać wyświetlacze o wysokiej rozdzielczości. Oto przykład składni srcset:

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

Ważne jest, by użyty obraz miał te same wymiary co treść wtyczki. W przeciwnym razie obraz na ekranie użytkownika może być zniekształcony.