# How to automatically add WebP post banners to Jekyll for faster load times

DevFeed: [How to automatically add WebP post banners to Jekyll for faster load times](<https://devfeed.tech/articles/how-to-automatically-add-webp-post-banners-to-jekyll-for-faster-load-times-38568.md>)

Original publisher: [Read original article](<https://blog.jakelee.co.uk/adding-automated-webp-banners-to-jekyll/>)

Author: Jake Lee

Published: 2024-11-30T00:00:00Z

Content type: tutorial

Language: en

Sources: [Jake Lee's Programming Blog](<https://devfeed.tech/sources/jake-lee-s-programming-blog.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [images](<https://devfeed.tech/tags/images.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [liquid](<https://devfeed.tech/tags/liquid.md>), [optimisation](<https://devfeed.tech/tags/optimisation.md>), [times](<https://devfeed.tech/tags/times.md>)

## AI overview

A tutorial on automating WebP banner generation and delivery in Jekyll. It explains configuring a conversion library, generating WebP files, serving them conditionally with Liquid and picture/source elements, and providing alternative text. The article also notes possible color-rendering issues with the converter.

## Source excerpt

Most modern browsers can handle the smaller & speedier WebP versions of images, yet generating them manually can be a pain! Here's how to do it automatically in Jekyll.