Webp / AVIF on Headline Theme

Ideas
1

Headline theme is growing in popularity, every other site I see on Ghost Explore is using it. So why is Headline not automatically converting images to AVIF / WEBP?

Mentioned in the above post, there is code that can do it but I have NO IDEA how to do this myself. Is anyone willing to contribute to the open source theme?

Or can we vote this high so Ghost colleagues can consider on their roadmap? Thanks

2

It’s a pretty easy fix, Leepish. You’d basically find where the theme loads images, and just add the extra options.

https://github.com/TryGhost/Themes/blob/main/packages/headline/partials/loop-grid.hbs generates most of the post cards, so is a good target:

Currently it has:

        {{#if feature_image}}
            <figure class="gh-card-image">
                <img
                    srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 720w,
                            {{img_url feature_image size="l"}} 960w,
                            {{img_url feature_image size="xl"}} 1200w,
                            {{img_url feature_image size="xxl"}} 2000w"
                    sizes="(max-width: 1200px) 100vw, 1200px"
                    src="{{img_url feature_image size="m"}}"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                >
            </figure>
        {{/if}}

To get AVIF and WEBP options, assuming that the section above already has fairly well-optimized sizes, you’d change it like this:

        {{#if feature_image}}
            <figure class="gh-card-image">
                 <source
                    srcset="{{img_url feature_image size="s" format="avif"}} 300w,
                            {{img_url feature_image size="m" format="avif"}} 720w,
                            {{img_url feature_image size="l" format="avif"}} 960w,
                            {{img_url feature_image size="xl" format="avif"}} 1200w,
                            {{img_url feature_image size="xxl" format="avif"}} 2000w"
                    sizes="(max-width: 1200px) 100vw, 1200px"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                    type="image/avif"
                >
<!-- repeat exactly the same source block as above, but change every avif to webp, then end with the image tag below (which is unchanged-->
                <img
                    srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 720w,
                            {{img_url feature_image size="l"}} 960w,
                            {{img_url feature_image size="xl"}} 1200w,
                            {{img_url feature_image size="xxl"}} 2000w"
                    sizes="(max-width: 1200px) 100vw, 1200px"
                    src="{{img_url feature_image size="m"}}"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                >
            </figure>
        {{/if}}

You’d also want to find where the theme renders the featured images for posts and make a similar change.

3

Thanks for the super quick response @Cathy_Sarisky
I will give this a shot, but I’m no developer. Would be great if this came included in Headline out the box.

1 Like