Skip to content

Instantly share code, notes, and snippets.

@cathyxz

cathyxz/srcset-and-sizes.md

Created April 29, 2019 20:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cathyxz/f17d12c07d60bcef52591e64e5e684fb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cathyxz/f17d12c07d60bcef52591e64e5e684fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cathyxz created this gist Apr 29, 2019.
    88 changes: 88 additions & 0 deletions srcset-and-sizes.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    # Srcset and Sizes

    Did some experimentation to figure out how different browsers behave with regards to the `srcset` and `sizes` attribute in various browsers. Documented below.

    ## srcset + sizes behavior

    Vanilla No AMP No CSS Example: https://codepen.io/cathyxz/pen/vbLrrE
    ```
    <img srcset="https://placekitten.com/200/200 200w,
    https://placekitten.com/300/300 300w,
    https://placekitten.com/400/400 400w,
    https://placekitten.com/600/600 600w
    https://placekitten.com/800/800 800w"
    sizes="(max-width: 320px) 200px,
    (max-width: 480px) 300px,
    (max-width: 640px) 400px,
    (max-width: 800px) 600px,
    100vw">
    </img>
    ```
    ### Chrome
    Fetches a new image on viewport increase. Does not re-fetch anything on viewport size decrease.

    | Screen width (breakpoint) | Image natural width | Image actual width | Media query matched |
    |---------------------------|---------------------|--------------------|---------------------|
    | < 320 px | 400px | 200px | Max-width: 320px |
    | < 480 px | 600px | 300px | Max-width: 480px |
    | < 640 px | 800px | 400px | Max-width: 480px |
    | >= 640 px | 800px | 600px | |


    ### Safari
    Doesn’t refetch on viewport change at all. Fetches as follows on refresh only.

    | Screen width (breakpoint) | Image natural width | Image actual width | Media query matched |
    |---------------------------|---------------------|--------------------|---------------------|
    | < 321 px | 400px | 200px | Max-width: 320px |
    | < 482 px (+/-1) | 600px | 300px | Max-width: 480px |
    | < 641 px | 800px | 400px | Max-width: 480px |
    | >= 641 px | 800px | 600px | |

    ### Firefox
    Refetches on viewport change at every breakpoint, regardless of increase or decrease.

    | Screen width (breakpoint) | Image natural width | Image actual width | Media query matched |
    |---------------------------|---------------------|--------------------|---------------------|
    | < 321 px | 400px | 200px | Max-width: 320px |
    | < 481 px | 600px | 300px | Max-width: 480px |
    | < 641 px | 800px | 400px | Max-width: 480px |
    | >= 641 px | 800px | 600px | |


    ## srcset without sizes behavior

    Sample code here: https://codepen.io/cathyxz/full/KEVPKG
    ```
    <img srcset="https://placekitten.com/200/200 200w,
    https://placekitten.com/300/300 300w,
    https://placekitten.com/400/400 400w,
    https://placekitten.com/600/600 600w
    https://placekitten.com/800/800 800w">
    </img>
    ```

    ### Chrome
    Fetches a new image on viewport increase. Does not re-fetch anything on viewport size decrease. Basically assumes image is 100vw and fetches image accordingly.

    | Screen width (breakpoint) | Image natural width | Image actual width |
    |---------------------------|---------------------|--------------------|
    | < 125 px | 200px | 100vw |
    | < 175 px | 300px | 100vw |
    | < 250 px | 400px | 100vw |
    | < 350 px | 600px | 100vw |
    | >= 350px | 800px | 100vw |

    ### Firefox
    Regardless of screen size, always picks the largest src in the srcset. Does not update on viewport change. Does not update on refresh.

    ### Safari
    Regardless of screen size, always picks the largest src in the srcset. Does not update on viewport change. Does not update on refresh.


    ## Browser Specifications
    Note that the relevant browser spec for this is: https://html.spec.whatwg.org/multipage/images.html#reacting-to-environment-changes

    The user agent may at any time run the following algorithm to update an img element's image in order to react to changes in the environment. (User agents are not required to ever run this algorithm; for example, if the user is not looking at the page anymore, the user agent might want to wait until the user has returned to the page before determining which image to use, in case the environment changes again in the meantime.)