Responzivní obrázky ve WordPress 4.4

V novém WordPressu 4.4, bude přidána nativní podpora responsivních obrázků, pomocí atributů srcset a sizes. Jak přesně to bude fungovat?

Při každém nahrání obrázku do médií, vytváří WordPress sadu obrázků o různých rozměrech. Díky vložení dostupných velikostí do atributu srcset, mohou si prohlížeč zvolit nejvhodnější velikost obrázku, který budou stahovat a díky tomu se rychlost načítání stránky velmi zrychlí.

Aby si mohl prohlížeč lépe vybrat vhodný obrázek, bude vkládán „sizes“ atribut, který je ekvivalent k „(max-width: {{image-width}}px) 100vw, {{image-width}}px“. Přestože by tento postup měl fungovat ve většině prohlížečů, šablona má možnost upravovat výchozí sizes atribut, pomocí „wp_calculate_image_sizes“ filtru.

Nové funkce a hooky

• wp_get_attachment_image_srcset() – vrací hodnotu srcset atributu pro obrázek.
• wp_calculate_image_srcset() – pomocná funkce pro vytvoření atributu srcset.
• wp_get_attachment_image_sizes() – vrací hodnotu sizes atributu pro obrázek.
• wp_calculate_image_sizes() – pomocná funkce pro vytvoření atributu sizes.
• wp_make_content_images_responsive() – filter, pomocí kterého můžete ovlivnit přidání sizes a srcset pro obrázky v obsahu.
• wp_image_add_srcset_and_sizes() –přidá atributy szes a srcset pro již existující obrázky.

Příklad použítí

<img src=""
     srcset=""
     sizes="(max-width: 50em) 87vw, 680px" alt="Oprásek">

Pokud se chcete dozvědět o použití atributů srcset a sizes, doporučuji web Vzhůru dolů.cz