This repository was archived by the owner on Feb 23, 2023. It is now read-only.
Fix incorrect sizes calculations causing loading overhead image from …#2118
Open
noth8 wants to merge 1 commit intofancyapps:masterfrom
Open
Fix incorrect sizes calculations causing loading overhead image from …#2118noth8 wants to merge 1 commit intofancyapps:masterfrom
noth8 wants to merge 1 commit intofancyapps:masterfrom
Conversation
…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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…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