pip install pillow django-imagekit

Open and add imagekit to the INSTALLED_APPS list:



# Path from where the images are served (like
MEDIA_URL = '/media/'
# Physical path to the images
MEDIA_ROOT = 'media/'

To serve user-uploaded media files during development (in debug mode), use the static function in your file:

from django.contrib import admin
from django.conf.urls.static import static # < this

urlpatterns = [
    url(r'^', include('base.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # < this

Add Thumbnail Fields

Open the file that has an image field.

Let's use ImageSpecField to create thumbnails:

from imagekit.models import ImageSpecField # < import this
from imagekit.processors import ResizeToFill # < import this

image = models.ImageField(upload_to="post_images") # Regular image field
image_thumbnail = ImageSpecField(source='image',
                                 processors=[ResizeToFill(100, 50)],
                                 options={'quality': 60})
Name Description
source Source field. We want to create thumbnails from the image field images.
ResizeToFill Resizes and crops the image to the specified width and height.
JPEG Image is stored as JPEG.
60 Compression quality.

Use the thumbnail path in a template to generate the thumbnail:

{{ post.image_thumbnail.url }}

And example with the original image:

  <div class="post__image post__item">
    <img class="post__image__img" src="/media/{{ post.image }}">
  <div class="post__thumbnail post__item">
    <img class="post__thumbnail__img" src="{{ post.image_thumbnail.url }}">

So now the original image is stored in:


And its thumbnail is stored in:


So in the CACHE folder there are now folders named with the image (01 in this case) and inside that folder is the generated image.

Add Additional Thumbnails With Different Sizes

You can add more image fields with different configurations:

image_thumbnail_2 = ImageSpecField(source='image',
                                   processors=[ResizeToFill(200, 100)],
                                   options={'quality': 60})
  <div class="post__thumbnail__2 post__item">
    <img class="post__thumbnail__2__img" src="{{ post.image_thumbnail_2.url }}">

Now you can see the second thumbnail stored in the same 01 folder:


Process The Original Image

If you don't want to store the original image, replace the image field with ProcessedImageField:

from imagekit.models import ImageSpecField, ProcessedImageField

    # image = models.ImageField(upload_to="post_images")

    image = ProcessedImageField(upload_to='post_images',
                                processors=[ResizeToFill(400, 200)],
                                options={'quality': 60})

The original image is now stored in the same place as before, but it is processed to smaller size:


You can do a lot more with the package like rotate the images and create black and white photos, so check out the official documentation for more info.