How to speed up loading lot of images in django templates?

Question

I want to speed up the process of loading images in django templates. Now, i'm in a situation that the page will "GET" all the images and then render the page.

part of index.html:

{% extends 'base.html' %}
{% load thumbnail %}

{% block content %}
{% for new in news_list %}
    <div class="card">
    {% thumbnail new.image "250x250"  as im %}
       <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
    {% endthumbnail %}
    </div>
{% endfor %}
{% endblock %}

part of view.py

from .models import News

def home(request):
   news_list = News.objects.all()
   return render(request, 'index.html', news_list)

i used chrome "F12" to see what is happened. It takes so long for 'GET' all images. I think it's not the issue of getting a large models. Is there another way to display some images in templates instead of get all the images? Thankyou so much.

Answer 1

When you have really a lot of images, solution here is to load images on demand. Like user scrolls down and get new images downloaded.

Like jquery-loadscroll plugin could be used

UPD As @Kurohige mentioned below, you have to optimize images for web as well. By optimizing he means looseless image size compression