Recently, we implemented a Service Worker for an image-heavy website. Since it’s not a good idea to precache every single image and also runtime caching has its limits, we needed a fallback image. Fortunately, there is an that serves a resolution-independent, accessible SVG for image requests that fail. But after we implemented the SVG, we noticed a couple of issues as you can see in this abstract example: elegant solution We use lazy loading in combination with intrinsic ratios to minimize reflows, which means that the offline image will not fit the reserved space most of the time. Besides, many image wrappers have a placeholder background color that matches the image. This is especially important if a white text overlays a dark image, since we want to make sure the text is legible while the image is loading. So we needed a fallback image that works with any aspect ratio and adapts to the existing background color. After some experimenting, we came up with an improved SVG that looks like this: We used a semi-transparent gray and black as fill-colors, so that any existing placeholder background color is just slightly grayed out and white text on a dark background is still legible. The most important change is the following attribute: <svg preserveAspectRatio="xMidYMid slice" ...> It forces the to scale uniformly from the center and cover the entire SVG viewport. viewBox SVG code Codepen Note: No Service Worker, just the SVG image in the layout from the above. screenshot https://codepen.io/sebastianeberlein/pen/gxGgXe In our Service Worker: Since Firefox version 47 (released in June 2016), the looks like this: . So if you are using this header to check if the request is an image … Side note: Accept header of image requests */* if (request.headers.get('Accept').indexOf('image') !== -1) {// ...} … it will work in Chrome, but not in Firefox. That’s why we switched to file extension matching.
