nhoizey’s avatarnhoizey’s Twitter Archive—№ 108,972

  1. …in reply to @zachleat
    @zachleat Currently reading your article, I'm really surprised by "The 100% in max-width refers to the image’s dimensions". IMHO, these 100% refer to the container width.
    On twitter.com Twitter logo nhoizey’s avatar ❤️ 2 Favorites Mood 0
    1. …in reply to @nhoizey
      @zachleat Also, in your "srcset and width: 100%" section, images have a srcset-w but no sizes, so the browser understands it needs an image as large as the viewport, and downloads the 400px images for the 4 examples.
      Permalink On twitter.com Twitter logo nhoizey’s avatar ❤️ 2 Favorites Mood -1 🙁
      1. …in reply to @nhoizey
        @zachleat In the fourth image in section "srcset and max-width: 100%", the sizes="300px" makes the browser download the 400px image (on a 1dppx screen), and width="200" renders it at 200px wide. I don't understand the idea to add a width: auto to prevent this, as it is "normal".
        Permalink On twitter.com Twitter logo nhoizey’s avatar ❤️ 1 Favorite Mood -1 🙁
        1. …in reply to @nhoizey
          @zachleat BTW, to answer your question at the end, I do use the dimensions of the pristine image for the width and height attributes. It's mainly to get the ratio right, and prevent enlarging small images. Actually, my build gets the dimensions: github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_11ty/images-responsiver-config.js#L23-L32
          Permalink On twitter.com Twitter logo nhoizey’s avatar Mood -1 🙁