שימוש בתמונות פוסטר בתוכן פלאגין

לפני מספר שבועות, Chrome הכריז על הגדרת תוכן חדשה שמשהה באופן אוטומטי תוכן של יישומי פלאגין שהיא מזהה כציוד היקפי לתוכן העיקרי של האתר. השינוי ייכנס לתוקף עבור כל המשתמשים ב-Chrome 45 ואילך (ספטמבר 2015 יציב). מבחינת השימוש במעבד (CPU) ובצריכת החשמל, המשתמשים הם ניצחו, אבל יכול להיות שהם לא יראו את כל התוכן שהאתר שלכם מספק.

למרבה המזל, ההגדרה גם מכבדת את פרמטר הפוסטר באופן דומה לזה של רכיבי הסרטון. כך אפשר לציין תמונה שצריך להשתמש בה במקום הפלאגין המושהה, במקום הפריים שבו Chrome ישהה את תוכן הפלאגין.

הדוגמה הבאה ממחישה איך להשתמש בו בפועל. אם Chrome יחליט להשהות את flash.swf, הפוסט poster.png יוצג במקומו. אם המשתמש לוחץ על הפוסטר מאשר תוכן ה-Flash יופעל כרגיל.

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

הערך של הפרמטר poster מפורש כמו המאפיין srcset של תג img, ולכן הוא יכול לתמוך גם במסכים עם DPI גבוה. דוגמה לתחביר של srcset:

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

חשוב שהתמונה תהיה במידות זהות לאלה של תוכן הפלאגין, אחרת התמונה עלולה להיות מעוותת במסך המשתמש