Revisit responsive images

masakudamatsu / line-height-picker

A front-end web app that helps web designers/developers pick the best line-height value for their websites

https://line-height-picker.vercel.app

MIT License

2 stars 1 forks source link

Closed masakudamatsu closed 4 years ago

masakudamatsu commented 4 years ago

Google's PageSpeed Insights shows that we can reduce the loading time by 1.95s with the reduction in image sizes.

Previously, the srcset attribute didn't work. But it turns out that React doesn't interpret srcset but srcSet.

masakudamatsu commented 4 years ago

The sizes attribute:

For the landing page logo: (min-width: 728px) 605px, (min-width: 557px) 518px, 100vw.

For small screens, 100vw is good enough and future-proof in case we change the CSS code. See https://ericportis.com/posts/2014/separated/

masakudamatsu commented 4 years ago

We have to include 4x images: see the list of pixel densities in the market https://www.mydevice.io/#tab1

masakudamatsu commented 4 years ago

We use RespImageLint to check the HTML code for responsive images.

For landing page logo and the images for guide, the narrowest non-retina screens (300-320px) can have half the size of the 1x image. But only iPhone 3 fits into this category in the mydevice.io list. We can ignore it.

masakudamatsu commented 4 years ago

Vercel doesn't support Git LFS, which causes images to be not rendered in the webapp.

We remove the tracking of image files with Git LFS.