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
```shell
pip install django-img-cache
```

## Usage
### Project Setting
* After installation, register the app in INSTALLED_APPS section of your project settings.
```
INSTALLED_APPS = (
'blog',
'news',
'all_auth',

'img_cache',
)
```
### 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_CLASS='img-responsive'
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`
```html
<html>
{% load imgcache %}
<body>
<!---
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 %}
<h2>Description</h2>
<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.
2.you 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}}" />
</body>
<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 medium.com, the blur effect on low quality image initialy and then full high quality image
window.onload = function() {
var images = document.querySelectorAll('.img-blur');
images.forEach(function(img){
var largeImage = new Image();
largeImage.src = img.dataset.src;
largeImage.onload = function(){
img.src = largeImage.src;
img.classList.remove('img-blur');
}
})
}
</script>
</html>
```
* 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.

Filename, size & hash SHA256 hash help File type Python version Upload date
django-img-cache-0.2.tar.gz (6.7 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page