2 ms·
The only way to prevent reflow is to give the browser your image dimensions or aspect ratio: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio http
by mceachen 5y ago
The only way to prevent reflow is to give the browser your image dimensions or aspect ratio:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...
Using a css flexbox or grid layout means you don't have to recalculate image div widths and heights when the browser viewport width changes, but you still need to give it enough information to back into the correct aspect ratio.
Also, using a srcset helps only load the necessary bytes, but means you'll need to either build the resized image on the fly (which is cpu-expensive) or prebuild them (which takes up some disk space).
In the interests of a performant UI, PhotoStructure extracts and remembers width and height of photos and videos during imports, but if you're only loading a couple images in a gallery, your could fetch this metadata on the fly as well.