Package: django-lazy-srcset
Django Lazy srcsetLazy srcset and responsive image generation for Django. Minimum effort required. No database required.Django Lazy srcset will create the markup and generate the images you need to provide responsive images via thesrcset and sizes attributes for the img tag.  All you need to do is install it, configure your breakpoints and use the{% srcset %}template tag.All of the hard work (image generation and cacheing) is done by django-imagekit, by default this means images are generated just in time - lazily. Please see thedjango-imagekit docsfor more info and configuration options.Width and height attributes are generated to help avoid layout shifts. Make sure you set these in CSS so they are only used by the browser for aspect ratio.SVG images are supported, they will not be converted or resized but width and height attributes are still added as well as therole="img"attribute.You will also need Django and Pillow.Installation & UsageInstall with pip:$pipinstalldjango-lazy-srcsetAdd"imagekit"and"lazy_srcset"toINSTALLED_APPS:INSTALLED_APPS=[# ..."imagekit","lazy_srcset",# ...]Configure your breakpoints and stuff (most/all of this is optional):# When disabled src, width and height attributes are returned so images still work but no srcset or image# generation will happen. By default, lazy-srcset is disabled when debug is True.LAZY_SRCSET_ENABLED=notdjango_settings.DEBUG# The default threshold to use when not specified in the config.LAZY_SRCSET_THRESHOLD=69# The default generator to use when not specified in the config.LAZY_SRCSET_GENERATOR_ID="lazy_srcset:srcset_image"LAZY_SRCSET={"default":{# breakpoints is the only setting you must define"breakpoints":[1920,1580,1280,1024,640],# If max_width is not provided the source image width is used.# It's a good idea to set this."max_width":2560,# If quality is not provided PIL will choose a default"quality":91,# If format is not provided the source image format is used"format":"WEBP",# The difference in width (px) required to generate a new image# This prevents images being created which are too similar in size"threshold":LAZY_SRCSET_THRESHOLD,# If generator_id is not provided LAZY_SRCSET_GENERATOR_ID is used"generator_id":LAZY_SRCSET_GENERATOR_ID,}}Use the{% srcset %}template tag:{%loadlazy_srcset%}{# image is an ImageField. With no args or kwargs provided all sizes are assumed to be 100vw #}<img{%srcsetimage%}alt="Lovely and lazy" />{# You can provide a path to a static file instead of an ImageField. #}<img{%srcset'path/to/my/image.png'%}/>{# You can provide relative (vw) image widths e.g. for a 4 - 3 - 2 - 1 col degradation #}{# These are used to calculate the width of the generated images for each breakpoint #}<img{%srcsetimage253350%}/>{# Kwargs can be used to define breakpoints and some settings #}<img{%srcsetimage1920=251580=331024=50640=100max_width=1920%}/>{# Fixed width images can be defined with px units. These are always made regardless of threshold #}<img{%srcsetimage'500px''400px''300px'%}/>Whilst not required it is advisable to take a nap at this stage.For further documentation and examples of all the options please see the huge and obvious docstring in the source code forlazy_srcset/templatetags/lazy_srcset.py.How it WorksIf the source image is wider than themax_widthit is resized tomax_width. Otherwise it is converted as is. This image is then used in the srcset and src attributes.For each breakpoint we calculate the target width of the image required and iterate from biggest to smallest. Images are then generated if the required width is:Smaller than the source width (no upscaling!).Smaller than the previously generated image by more thanthresholdpx unless the size was defined with px units.Once imagekit has generated an image it won’t create it again and it will store this fact in the cache to further speed up subsequent renders.AdvancedDue to the awesomeness of django-imagekit it’s possible to configure django-lazy-srcset to use any image generator you have registered on a per config basis. Take a look atlazy_srcset/conf.pyto see how to change thegenerator_idsetting. For an example image generator look atlazy_srcset/imagegenerators.py. This is completely optional but I thought I’d mention it as there are potential artistic uses here; for example you could use a generator to add filters to some images.Currently imagekitSourceGrouphas not been implemented therefore the imagekitgenerateimagesmanagement command will not generate images for django-lazy-srcset. If you want to pre-generate images you canrender_to_string()your templates in an appropriate save method or signal.  If you are usingdjango-content-blocksthis happens on publish anyway.Clean up of old, unused files created by django-lazy-srcset is down to you, if you require it at all.Development Status & RoadmapDjango lazy srcset is in beta. There are currently no plans for further development.Dependencies & Thank Youhttps://github.com/matthewwithanm/django-imagekit/Other Packages to Considerhttps://github.com/codingjoe/django-pictures