From 9d8e5bb480826e789428bcea5f225701c7744314 Mon Sep 17 00:00:00 2001
From: noth8 <42228810+noth8@users.noreply.github.com>
Date: Mon, 12 Nov 2018 17:30:41 +0100
Subject: [PATCH] Fix incorrect sizes calculations causing loading overhead
 image from srcset

If display has less width than height (like on mobile) then Math.round(slide.width / slide.height * 100)) can produce incorrect view port value for sizes attribute.

For example :
Device has width 689 and height 744. Image has 700 width and 506 height.
So according to the code condition  :
700/506 > 1 = true
689/744 > 1 = false
then :
700/506*100 = 0.0138

So this generate sizes="138vw" which will be incorrect and a browser load a correct image from a srcset and also load another candidate from srcset which appropriate specified. But browser doesn't set this second candidate and everything looks normal except the thing that browser load this second image and therefore using additional traffic.
You can check this in Dev Tools > Network
---
 src/js/core.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/js/core.js b/src/js/core.js
index 6e842a68..285b86f4 100644
--- a/src/js/core.js
+++ b/src/js/core.js
@@ -1915,9 +1915,7 @@
             sizes = slide.opts.sizes;
 
             if (!sizes || sizes === "auto") {
-              sizes =
-                (slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round((slide.width / slide.height) * 100)) +
-                "vw";
+              sizes = "100vw";
             }
 
             $img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);