Layout shifts caused by not having explicit width and height attributes on image tags

picosh / pico

hacker labs - open source and managed web services leveraging SSH

https://pico.sh

MIT License

741 stars 25 forks source link

Layout shifts caused by not having explicit width and height attributes on image tags #137

Open stepbrobd opened 3 weeks ago

stepbrobd commented 3 weeks ago

To reproduce, add an image (preferably one with relatively large size, perhaps 1000x1000) to any page, then deploy to prose.sh

You should be able to see the layout shift pretty prominently. Lighthouse can also detect CLS (https://pagespeed.web.dev/ if you are not using a Chromium based browser).

Since all images uploaded to pico are static, can height and width attributes be automatically set based on the image metadata?

neurosnap commented 3 weeks ago

Hi thanks for submitting this issue! I'll look into ways to reduce layout shifting from images and report back in this thread. Thanks again!