and their breakpoints were chosen for completely diﬀerent reasons than the design (CSS) breakpoints: the former for sensible jumps in file size to match screen dimension and/or density, and the latter for how content modules are visibly designed at given viewport dimensions. —Scott Jehl, Filament Group http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0613.html “
and what is the process for publishing? Is there a big diﬀerence between smallest and largest image size? Resolution switching or art direction? Can we use SVG? Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints? Do we want to support multiple image formats?
SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Partner logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Iconography SVG — <img> — Brand logos PNG8 (future SVG) regular, Retina <img> Assumes little variance between the wide and small screen image sizes. Property photography JPG (conditional WebP) Dynamically resized and compressed srcset and sizes Templates specify breakpoints. Promo images w/ text (art direction) Whichever is appropriate As many sizes as needed. <picture> Content producer defines images and breakpoints in CMS. Example of images audit for a large site