# Updated img\_url helper: convert image formats automatically

**URL:** <https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760>\
**Category:** Themes\
**Created:** [August 4, 2022, 3:12pm UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760 "2022-08-04T15:12:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [August 4, 2022, 3:12pm UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/1 "2022-08-04T15:12:31Z")

</div>

In Ghost 5.7.0, we updated the functionality of the `img_url` helper: it now can convert image formats automatically! This update is perfect for theme developers who are serious about performance 🏎

## Why it’s important

Images are the heaviest part of your website. The new helper automatically converts an image from PNG, GIF, or JPEG to WebP, which reduces its size by ~25% without any visible loss of quality. Using the new helper will make your website faster, positively impact SEO, and give your users a better experience.

## How it works

Simply add the `format` attribute to the `img_url` helper.

**Basic example**

```handlebars
{{img_url feature_image size="s" format="webp"}}

```

**Full example with `picture` tag**

```handlebars
<picture>
    <!-- Serve the AVIF format if the browser supports it -->
    <!-- Remove this block when using animated images as feature images -->
    <source 
        srcset="{{img_url feature_image size="s" format="avif"}} 300w,
                {{img_url feature_image size="m" format="avif"}} 600w,
                {{img_url feature_image size="l" format="avif"}} 1000w,
                {{img_url feature_image size="xl" format="avif"}} 2000w"
        sizes="(min-width: 1400px) 1400px, 92vw" 
        type="image/avif"
    >
    <!-- Serve the WebP format if the browser supports it -->
    <source 
        srcset="{{img_url feature_image size="s" format="webp"}} 300w,
                {{img_url feature_image size="m" format="webp"}} 600w,
                {{img_url feature_image size="l" format="webp"}} 1000w,
                {{img_url feature_image size="xl" format="webp"}} 2000w"
        sizes="(min-width: 1400px) 1400px, 92vw" 
        type="image/webp"
    >
    <!-- Serve original file format as a fallback -->
    <img
        srcset="{{img_url feature_image size="s"}} 300w,
                {{img_url feature_image size="m"}} 600w,
                {{img_url feature_image size="l"}} 1000w,
                {{img_url feature_image size="xl"}} 2000w"
        sizes="(min-width: 1400px) 1400px, 92vw"
        src="{{img_url feature_image size="xl"}}"
        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
    >
</picture>

```

For more details on how to use the updated helper, see the docs:

> **[img\_url - Ghost Developer Docs](https://docs.ghost.org/themes/helpers/data/img_url)**
>
> Usage: \`{{img\_url value}}\`

---

<div class="post-metadata">

**Author:** ![Leepish](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Leepish](https://forum.ghost.org/u/Leepish)\
**Post date:** [November 6, 2022, 7:37am UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/4 "2022-11-06T07:37:05Z")

</div>

Amazing! I was bored of converting images manually myself.

Is this already included in the Headline theme?

---

<div class="post-metadata">

**Author:** ![Leepish](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Leepish](https://forum.ghost.org/u/Leepish)\
**Post date:** [November 13, 2022, 9:07pm UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/5 "2022-11-13T21:07:35Z")

</div>

@RyanF so glad to see native support for webp - has this automatic file conversion rolled out to the Headline theme?

---

<div class="post-metadata">

**Author:** ![vdrive6](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vdrive6/32/24309_2.png) [@vdrive6](https://forum.ghost.org/u/vdrive6)\
**Post date:** [May 18, 2023, 6:52pm UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/7 "2023-05-18T18:52:21Z")

</div>

How to implement this feature to Headline theme?

---

<div class="post-metadata">

**Author:** ![themeupstudio](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/themeupstudio/32/40083_2.png) [@themeupstudio](https://forum.ghost.org/u/themeupstudio)\
**Post date:** [May 19, 2023, 3:41am UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/8 "2023-05-19T03:41:08Z")

</div>

Thank you @RyanF ,

In addition, if certain themes do not yet support the WebP format, website owners have the option to utilize a simple online tool for converting their images to WebP by accessing the following application:

> **[Bulk Images to WebP Converter](https://nsspot.herokuapp.com/imagetowebp/)**
>
> This online app allows you to convert jpg, png, bmp, gif images photos easily to WebP image files. Simple and easy to use. Convert your images to WebP files with this app. You can reduce image size through this WebP conversion.

We have the option to upload multiple JPEG/PNG images simultaneously and convert them all into the WebP format.

This serves as a more convenient alternative for individuals who prefer not to utilize the command line interface offered by Google’s tool - [Getting Started &nbsp;|&nbsp; WebP &nbsp;|&nbsp; Google for Developers](https://developers.google.com/speed/webp/docs/using)

We can also adjust the quality and resize them on the fly.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/b/0/b05c4b950f9e56b3dfb0990a4a1abe05d2670f0b.png)

_Please note that I am not affiliated, associated, or linked in any way with the above tool. Any information or opinions I may have shared regarding this tool are purely based on my personal experience or understanding, and should not be considered as an official endorsement or representation._

---

<div class="post-metadata">

**Author:** ![Leepish](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Leepish](https://forum.ghost.org/u/Leepish)\
**Post date:** [May 24, 2023, 10:00pm UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/9 "2023-05-24T22:00:58Z")

</div>

I would like to know too! From what I can see on Ghost Explore many publications are using Headline theme (dare I say more than Casper!)

---

<div class="post-metadata">

**Author:** ![themeupstudio](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/themeupstudio/32/40083_2.png) [@themeupstudio](https://forum.ghost.org/u/themeupstudio)\
**Post date:** [May 25, 2023, 6:10am UTC](https://forum.ghost.org/t/updated-img-url-helper-convert-image-formats-automatically/31760/10 "2023-05-25T06:10:51Z")

</div>

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:

```auto
<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

```auto
"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.

| FORMAT | SIZE (kB) | TIME (ms) | SIZE DIFF | TIME DIFF |
| --- | --- | --- | --- | --- |
| PNG | 1200 | 57 | 0% | 0% |
| WEBP | 126 | 41 | 89.5% | 28% |
| AVIF | 88 | 34 | 92.67% | 40.35% |

PNG

 ![PNG](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/f/7/f7d3dc3b6bbe21341d1e8fe0980ad6bf0c538b2e.jpeg)

WEBP

 ![WEBP](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/3/8311a5d28a55073a06cda98a16f6e6ca5da50c8f.jpeg)

AVIF

 ![AVIF](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/7/1/7110cbff0837b3c98d31a7dcbac12e5e9626cb6f.jpeg)

_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.