Imager X Power Pack

Unlocks a stash of hidden weapons in your quest to optimize images, while simultaneously saving time and reducing cognitive load. It's a good deal!

Wouldn't it be great if you could replace this:

{% set transformsWebpBig = craft.imagerx.transformImage(heroImage, 'articleHeroWebpBig') %}
{% set transformsWebpSmall = craft.imagerx.transformImage(heroImage, 'articleHeroWebpSmall') %}
{% set transformsJpgBig = craft.imagerx.transformImage(heroImage, 'articleHeroFallbackBig') %}
{% set transformsJpgSmall = craft.imagerx.transformImage(heroImage, 'articleHeroFallbackSmall') %}

{% set widthBig = (transformsJpgBig|last).width|default %}
{% set heightBig = (transformsJpgBig|last).height|default %}
{% set width = (transformsJpgSmall|last).width|default %}
{% set height = (transformsJpgSmall|last).height|default %}

<picture>
    <source srcset="{{ transformsWebpBig|srcset }}" media="(min-width: 750px)" type="image/webp" sizes="(min-width: 750px) 50vw, 100vw" />
    <source srcset="{{ transformsJpgBig|srcset }}" media="(min-width: 750px)" sizes="(min-width: 750px) 50vw, 100vw" />
    <source srcset="{{ transformsWebpSmall|srcset }}" type="image/webp" sizes="(min-width: 750px) 50vw, 100vw" />
    <img src="{{ craft.imagerx.placeholder({ width, height }) }}"
         width="{{ width }}"
         height="{{ height }}"
         sizes="(min-width: 750px) 50vw, 100vw"
         srcset="{{ transformsJpgSmall|srcset }}"
         alt="{{ heroImage.altText }}" />
</picture>

With... this?

{{ pppicture([
    [heroImage, 'articleHeroWebpBig', 750, 'webp'],
    [heroImage, 'articleHeroFallbackBig', 750],
    [heroImage, 'articleHeroWebpSmall', 'webp'],
    [heroImage, 'articleHeroFallback']
], {
    sizes: '(min-width: 750px) 50vw, 100vw'
}) }}

The Power Pack comes with several convenient Twig functions that will help you craft optimal responsive images with all best-practices built-in. It won't be a good fit for all use-cases, but aims to turbo charge most of your responsive images needs.

For more details, check out the documentation or the launch blog post.