3 ms·

tl;dr: <picture> tag. It contains an <img> tag inside for backwards compatibility, and allows you to define multiple <source> tags for different sizes.

• est 12y ago
  Which is kinda lame IMHO. Why can't we use progressive JPEG, with offsets? The first rough scan for small size image, a second scan for normal image, a third scan for retina sized image? One file, one URL, different offset for different dimensions, done.
  • cbhl 12y ago
    You may want to show a different icon with different viewport sizes. For example, compare the different sizes of the Google Calendar icon here: http://setup.googleapps.com/Home/user-resources/google-icons-and-logos http://setup.googleapps.com/Home/user-resources/google-icons... You'll note the 16px icon uses square corners, while the other sizes have rounded corners. There are other considerations as well, such as causing unintentional Moiré effects, and scaling DPIs in not-quite-powers-of-two (basically all of Android).
  • Groxx 12y ago
    Still doesn't solve the design-problem of showing e.g. a differently-cropped (or entirely different) image to different viewports.
  • rrouse 12y ago
    Doesn't that mean I would be downloading all of the image data and only using part of it?
    • Sanddancer 12y ago
      No. Part of the http spec is the ability to download only a specific range of bytes in a file.