https://badge.fury.io/py/wagtail-srcset.svg https://travis-ci.org/ephes/wagtail_srcset.svg?branch=master https://codecov.io/gh/ephes/wagtail_srcset/branch/master/graph/badge.svg https://img.shields.io/badge/code%20style-black-000000.svg

HTML5 image srcset support for Wagtail


Install wagtail-srcset:

pip install wagtail-srcset

Add it to your INSTALLED_APPS:


Use it in your templates:

{% load wagtail_srcset_tags %}
{% srcset_image img width-600 %}

Or via wagtails “as” syntax:

{% load wagtail_srcset_tags %}
{% srcset_image img width-60 as thumbnail %}
<a href="{{ thumbnail.original }}">
  <img id="img-{{ img.pk }}" src="{{ thumbnail.url }}" srcset="{{ thumbnail.srcset }}" />


  • Generate srcset attribute dynamically, based on the size of an image and the width attribute of the template tag if SRCSET_DYNAMIC is True
  • You can specify default images sizes in DEFAULT_SRCSET_RENDITIONS
  • wagtails WAGTAILIMAGES_JPEG_QUALITY is used for jpeg quality when set


  • Dont just support the width resize-rule add fill, max, min etc


The full documentation is at https://wagtail-srcset.readthedocs.io.

What is this all about?

I tried to use wagtail as a basis for a personal blog engine (yeah I know). Playing around with some images I noticed that they looked not as sharp as on my old page and I wondered why. Finally I found out that wagtail images with width-600 for example are implicitly upscaled on modern display devices. For a more detailed description and demonstration with an actual image, take a look at the image below and maybe view it at 100% scale.


Here are two amplified sections, to make the difference more visible:

https://github.com/ephes/wagtail_srcset/raw/master/example/media/ape_blurry.jpg https://github.com/ephes/wagtail_srcset/raw/master/example/media/ape_sharp.jpg

This package aims to provide a new image tag for wagtail that produces sharp looking images by generating a srcset attribute that includes larger images for higher pixel density devices.

If you are concerned about the increased image size I would recommend to use more aggressive lossy compression instead of upscaling.

Running Tests

Does the code actually work?

git clone https://github.com/ephes/wagtail_srcset.git
cd wagtail_srcset
poetry install
poetry run test

Running the Example App

poetry shell
python manage.py runserver --settings example.settings 0.0:8000


Tools used in rendering this package: