Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.

Fix incorrect sizes calculations causing loading overhead image from … #2118

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

noth8
Copy link

@noth8 noth8 commented Nov 12, 2018

…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

…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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant