- Image gets encoded at first byte, so page doesn't render the final image unless a layout is triggered.
- Triggering a layout with JS either downloads a new image (and still renders too soon) or doesn't update at all.
- Initially discovered
foreignObject
via https://gist.github.com/basecode/3241579 - Turns out we don't need the extra
feMerge
. It's just a timing issue with the render cycle. - Based on the DevTools Timeline, the image is decoded and rendered once the first byte is returned. Nothing tells Chrome to repaint after the image is fully downloaded, so you get the pixelated first byte version. The full quality image is repainted once you resize the page.
- The first byte image is most noticeable when referencing an external image. If you load a local image immediately, the problem is resolved.
- I really wish DevTools could record Network and Timeline data simultaneously.
- For whatever reason, it looks Chrome is downloading
image
despite theswitch
statement. And Firefox loads the defaultsrc
no matter what. So does Safari. And IE doesn't supportpicture
orsrcset
at all, so we need a fallback for that. Woof.