2 ms·
Layout shift due to responsive images is now easy to prevent, because most up-to-date browsers now correctly set the aspect ratio of a responsive img element if
by tshaddox 5y ago
Layout shift due to responsive images is now easy to prevent, because most up-to-date browsers now correctly set the aspect ratio of a responsive img element if you add the height and width attributes. Before a year or so ago, you had to use hacks like padding percentages to correctly set the aspect ratio.
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...
- sirshmooey 5y agoYou can automate this in VSCode, very handy. https://christianheilmann.com/2021/04/14/quick-vs-code-tip-automatically-add-image-width-and-height-to-images/ https://christianheilmann.com/2021/04/14/quick-vs-code-tip-a...
- dredmorbius 5y agoDepends. There are extensions (Dark Reader, a dark/light mode extension for Firefox, is an example) which trigger multiple redraws of a page on load. On an e-ink device (my principle driver these days), the extension is a near necessity (ironically, to force black-on-white themes on sites, much more readable on e-ink), and page re-paints are all the more jarring and expensive. Simple pages still load quickly and without disruption. Many complex sites don't. (NPR's website comes particularly to mind.)