Updated img_url helper: convert image formats automatically

For Headline theme, you need to make changes where the feature image is used.

One of the hbs file is feature-image.hbs which will load the image for posts/pages.
Other ones are:
loop-grid.hbs, custom-full-feature-image.hbs, tag.hbs

Considering feature-image.hbs, you can check the default configuration, which is withing the <figure class="gh-article-image"> ... </figure> tag.

You need to change this to:

<figure class="gh-article-image">
      <picture>
          <source srcset="{{img_url feature_image size="xxs" format="avif"}} 50w,
              {{img_url feature_image size="xs" format="avif"}} 100w,
              {{img_url feature_image size="s" format="avif"}} 300w,
              {{img_url feature_image size="m" format="avif"}} 500w,
              {{img_url feature_image size="l" format="avif"}} 700w,
              {{img_url feature_image size="xl" format="avif"}} 1000w,
              {{img_url feature_image size="xxl" format="avif"}} 2000w" 
              sizes="((max-width: 100px)) 100px,
              ((min-width: 100px) and (max-width: 500px)) 500px,
              ((min-width: 500px) and (max-width: 1000px)) 1000px,
              (min-width: 1000px) 1000px" type="image/avif">
          <source srcset="{{img_url feature_image size="xxs" format="webp"}} 50w,
              {{img_url feature_image size="xs" format="webp"}} 100w,
              {{img_url feature_image size="s" format="webp"}} 300w,
              {{img_url feature_image size="m" format="webp"}} 500w,
              {{img_url feature_image size="l" format="webp"}} 700w,
              {{img_url feature_image size="xl" format="webp"}} 1000w,
              {{img_url feature_image size="xxl" format="webp"}} 2000w" 
              sizes="((max-width: 100px)) 100px,
              ((min-width: 100px) and (max-width: 500px)) 500px,
              ((min-width: 500px) and (max-width: 1000px)) 1000px,
              (min-width: 1000px) 1000px" type="image/webp">
          <img srcset="{{img_url feature_image size="xxs"}} 50w,
              {{img_url feature_image size="xs"}} 100w,
              {{img_url feature_image size="s"}} 300w,
              {{img_url feature_image size="m"}} 500w,
              {{img_url feature_image size="l"}} 700w,
              {{img_url feature_image size="xl"}} 1000w,
              {{img_url feature_image size="xxl"}} 2000w" 
             src="{{img_url feature_image size="xl"}}" sizes="((max-width: 100px)) 100px,
              ((min-width: 100px) and (max-width: 500px)) 500px,
              ((min-width: 500px) and (max-width: 1000px)) 1000px,
              (min-width: 1000px) 1000px" 
              class="img-fluid feature-image" 
              alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
      </picture>
      {{#if feature_image_caption}}
          {{!-- Show caption if feature image caption is set --}}
          <figcaption>{{feature_image_caption}}</figcaption>
      {{/if}}
  </figure>

The exact size to use will depend on your configuration in package.json. For the above case, this is what is defined in package.json

"image_sizes": {
    "xxs": {
        "width": 50
    },
    "xs": {
        "width": 100
    },
    "s": {
        "width": 300
    },
    "m": {
        "width": 500
    },
    "l": {
        "width": 700
    },
    "xl": {
        "width": 1000
    },
    "xxl": {
        "width": 2000
    }
}

This configuration targets sizes from 50px to 2000px so you have more control over the exact image size to render based on available width.

You can see the difference in size and time it takes to load the image with and without conversion.

PNG

WEBP

AVIF

The above test was done on localhost. Actual results on server may differ.

This difference is minute as compared to just a single image’s load time. But this will affect greatly when you have multiple images and when you are loading numerous posts in loop.

Read full topic