Unnecessary loading image for gallery cover twice?

[eugeneandrienko]

I do not clearly understand this lines of code added in this commit f12587b:

prosopopee/prosopopee/themes/exposure/templates/index.html

Lines 56 to 58 in 0c6e83f

	<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
	{% else %}
	<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x1366") }}'), url('{{ cover.generate_thumbnail("x900") }}');"></div>

Based on the information from MDN about background-image CSS property — browser loads first specified image in this property and puts it on the top of the «stack» of images. After that it loads second image from background-image property — and puts it behind first image.

So, looks like we load (and process with gm) the same image for the gallery cover on main page twice. But we can see only first specified image (x1366), because second (x900) is smaller and fully covered by first image.

I've tested — in my installation of prosopopee with removed loading of first (bigger) image — I've got 4.21 Mb of data transferred with all request when loading main page. And I waiting 196 ms before all requests completed.

With default index.html, without my changes — I've got 14.84 Mb and 519 ms.
Of course, all tests were without browser cache.

If twice image loading is not needed — I can submit a pull request with removed loading of bigger (first) image for gallery cover.