31:[] 2f:{"title":"Responsive Bitmaps in Observable","cells":[{"id":0,"value":"md`# Responsive Bitmaps in Observable\n\nMost of the trouble with [variable-resolution responsive bitmap images](https://cloudinary.com/blog/responsive_images_guide_part_2_variable_image_resolution) in HTML comes down one hard problem: we want browsers to be able to start loading an appropriately-sized resource before they know anything about the layout – which is to say: before they know what “appropriately sized” is.\n\nMost of the time in JavaScript – and all of the time in Observable notebooks – that problem doesn’t exist. Browsers encounter \\`\\` makrup in Observable cells long after they’ve laid out the page. Even better, Observable exposes the layout width that the browser has to fill, directly, via a special reactive variable: \\`width\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`If you have a few different versions of an image, scaled to a few different resolutions (e.g., small, medium, and large), the easiest way to ensure that each visitor will load the most appropriate version for their particular context is to list all of the versions in a \\`srcset\\`, let browsers know their resource widths with \\`w\\` descriptors, and then tell the browser the *layout* width that it needs to fill by sticking Observable’s \\`width\\` variable into the \\`sizes\\` attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html` $\"A$ `","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"// this fails in Safari!? Nothing shows up!? I wonder why!\n// do I want to explain the whole caching behavior of chrome and why this won't work like you probably expect it to – and that that's for the best? maybe...\n// do I want to include an example of what to do if you want to style your image to be smaller than full width? probably?","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`It gets easier if you’re hosting your images somewhere that can scale them on the fly. In that case, instead of giving the browser a set of pre-defined resources, their resource widths, and the layout-width-to-fill – and asking it (the browser) to pick the best resource – we can just request the size we need, ourselves. Like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"// placehold.it example\n// (which has to kind-of-manually maintain a constant aspect ratio)\nhtml` $\"A$ `","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Or this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"// Cloudinary example\n// Round the width to the nearest 128-pixels to limit the number of resources requested.\n// This boosts the likelyhood of cache hits and lightens storage load\nhtml` $\"A$ `","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}