Skip to main content

A simple django app for faster image caching

Project description

# django-img-cache
> A quick hack for faster image caching at back-end for progressive image loading on django website.

## Features
* supports image resizing for all formats
* faster image caching at backend on redis/memcached db
* saving your CDN cost ;)
* Tested on django >=1.10

## Installation
pip install django-img-cache

## Usage
### Project Setting
* After installation, register the app in INSTALLED_APPS section of your project settings.

### Default Settings for app
* These are default `settings`, you can overwrite them in Project `settings` as per requirement.
IMGCACHE_DEFAULT_STYLE='width:100%' # used in imgcache and imgcache_src
IMGCACHE_DEFAULT_Q='10' # default resizing percent
IMGCACHE_TMP_DIR='img-cache' # full path will be /tmp/img-cache
IMGCACHE_KEY_PREFIX='django-img-cache' # cache key prefix
IMGCACHE_DEFAULT_CONTENT_CLASS='img-blur' # used in imgcache_content
IMGCACHE_DEFAULT_CONTENT_STYLE='width:100%' # used in imgcache_content
* Resizing Percent `Q or q` Explaination:
intial image of width(W) and height(H) after resizing to Q percent say 20
final image will be of 0.2W and 0.2H, keeping aspect ratio same.
* You can also pass required width and height in pixels instead of resizing percentage.
### Template Usage
* first load the template tag:
{% load imgcache %}
* there are `imgcache` tag and two filter tag `imgcache_src` and `imgcache_content`
{% load imgcache %}
safe tag for rendering html of img,
q=10 -> resize to 10% img width and height
{% imgcache blog.image.url q="10" as img %}
{{img | safe}}
{% endimgcache %}
<img class="img-responsive img-blur" src="{{blog.header_image.url | imgcache_src:'10' }}" data-src="{{blog.header_image.url}}" />
<p>This is blog contents....</p>
1. blog.content is full of html markup containing images and divs, so imgcache_content tag will replace existing img tags with img tags containing cached_img src and that is there is also safe filter after that to render html in browser. can class and style for imgcache_content in settings e.g: IMGCACHE_DEFAULT_CONTENT_CLASS='your-desired-class-of-css'
{{blog.content | imgcache_content | safe}}

imgcache_src:'3'; here 3 is q(resizing percent)
<img class="img-responsive img-blur" src="{{blog.footer_image.url | imgcache_src:'3' }}" data-src="{{blog.footer_image.url}}" />
<script type="text/javascript">
// show cached images of low quality with blur effect and do lazy loading of HQ img
// and replace them on loading.
// similar to, the blur effect on low quality image initialy and then full high quality image
window.onload = function() {
var images = document.querySelectorAll('.img-blur');
var largeImage = new Image();
largeImage.src = img.dataset.src;
largeImage.onload = function(){
img.src = largeImage.src;
* There will be initially slow loading of page because it will take sometime to download and cache all those images, on successive loading it will be blazing fast.

* Screenshot of Redis-DB afer page loading:

<img src="./redis_snap.png">

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-img-cache-0.2.tar.gz (6.7 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page