Sorl thumbnail is the package which is being widely used to generate thumbnail in Django. It will create a thumbnail of given size for the given image. The following is a sample code to create the thumbnail in Django template.

{% thumbnail item.image "100x100" as im %}
    <img src="{{ im.url }}">
{% endthumbnail %}

The above syntax will create a thumbnail in cache folder of your folder structure. But the only problem with this is, the thumbnail won’t be consistent for the responsive designs. For example, if we create a thumbnail of size 100x100, if the responsive blocks for the thumbnail are of various sizes like 100x100, 200x250 and 50x50, then the thumbnail generated will be apt for the screens which are of size 100x100 but when it comes to other two screens the thumbnail will get compressed or stretched.

srcset:

Html5 has a solution for the above problem in terms of images. Html5’s srcset attribute of the image tag(<img>) is the appropriate solution for the above problem. Here is an example of how to use ‘srcset’ attribute.

Suppose we want a different size (height, width) image on a larger or smaller viewport. Consider this example:

<img src="images/image1.jpg"
srcset="images/image1.jpg 200w, images/image2.jpg 400w, images/image3.jpg 600w">

w descriptor: This describes the width of the image being referenced. 

In the above example, the browser will decide which image to pick from above for a specific display because of srcset attribute. We can give any images with any size separated by a comma(,).

Sorl thumbnail with srcset:

<img src="{% thumbnail <image_url> "280x175" padding=True as im %}
               {{ im.url }}
          {% endthumbnail %}"
     srcset="{% thumbnail <image_url> "280x175" padding=True as im %}
                {{ im.url }} {{ im.x }}w
             {% endthumbnail %},
             {% thumbnail <image_url> "350x250" padding=True as im %}
                 {{ im.url }} {{ im.x }}w
             {% endthumbnail %}" >

The above snippet will be rendered to the following in your  template.

<img src="images/image1.jpg" srcset="images/image1.jpg 280w, images/image2.jpg 350w">

From the above-rendered template, srcset will automatically assign the corresponding image to the src attribute of the image.

For low resolutions, it will take image1.jpg  and for high resolutions, it will take image2.jpg

Note: Make sure there is whitespace between image name and w descriptor.

We will provide Django Development Services. To Know more about our services and developers contact [email protected]