Package: django-progressiveimagefield
Progressive Image Model Field for DjangoRequires:Python 3.6+Pillow 4.0+Django 2.0+The Problem: So, you have build a website (portfolio, news, eshop
etc), you have optimized your static files (css, js, fonts, images) but
still, the webpage loads quite slow due to lots of images being rendered
(however, there might be other reasons, but right now, let’s focus on
the image rendering).The Solution: Based onJosé Manuel
Pérez’s article aboutHow
Medium does progressive image
loading,
I have created a Django ModelField, which I calledProgressiveImageField. All it does is this: when an instance’s
progressiveimagefield is created (saved, most commonly via the admin
interface), it automatically creates a very small blurred thumbnail
(maximum dimensions10x10px) next to the original image. When this
large image is rendered, thesrcattribute of theimgelement
points to the thumbnail and not the large image. So, the user,
initially, sees the blurred thumbnail. Behind the scenes, javascript
takes place and gradually downloads the original image. Once the
original image is downloaded, the blurred thumbnail is replaced through
a nice-looking-CSS-fade effect. That’s all!InstallationInstall it using pip:pip installdjango-progressiveimagefieldAdd it to yourINSTALLED_APPSinside yoursettingsfile:INSTALLED_APPS += ['progressiveimagefield']How to useInside yourmodels.py, simply:fromdjango.dbimportmodelsfromprogressiveimagefield.fieldsimportProgressiveImageFieldclassMyModel(models.Model):# Other fields hereimg=ProgressiveImageField(upload_to="somewhere")Inside yourbase.htmltemplate:{% load static %}<!DOCTYPE html><html><head><!-- other meta tags here etc --><linkrel="stylesheet"media="all"href="{% static 'progressiveimagefield/css/pif.css' %}"></head><body>{% block content %}{% endblock %}<scriptsrc="{% static 'progressiveimagefield/js/pif.js' %}"></script></body></html>Finally, inside another HTML template where you want to render your image
progressively, you have two options depending on which template engine is used to render your template:Using the DTL (Django Template Language){% load progressive_tags %}

{% block content %}
    {% render_progressive_field instance.img %}
{% endblock %}Using theJinja2 Template LanguageAdd the filter inside the file (i.ejinja.py) where Jinja2 Environment is definedfromjinja2importEnvironmentdefenvironment(**options):env=Environment(**options)env.filters.update({'progressive':'progressiveimagefield.jinja.progressive',})returnenvAdd the dotted path to the above function in yoursettings’sTEMPLATESsettingOPTIONSdict as the value to theenvironmentkey. OK, here is the code:TEMPLATES=[{'BACKEND':'django.template.backends.jinja2.Jinja2','DIRS':# setting for DIRS here,'APP_DIRS':True,'OPTIONS':{'environment':'path.to.jinja.environment.function',},},...]Use it in your HTML template like this (just like a regular Django filter):{% block content %}
    {{ instance.img|progressive }}
{% endblock %}TestingIn order to test this application, you shouldClone the repoCreate a virtualenv
(mkvirtualenv-p$(which python3.6) progressiveimagefield) and
activate it (once created, it’ll be activated by default)Install the requirements
(pip install-rtests/test_requirements.txt)Runpython runtests.pyFurther ReadingPage Load Optimization by Progressive Image Loading (like
Medium)