4 ms·

> What I've noticed is many new sites are using huge high-res images as some kind of maximum-common-denominator to ensure things look great on high dpi screens

> What I've noticed is many new sites are using huge high-res images as some kind of maximum-common-denominator to ensure things look great on high dpi screens Obviously this is far from good but what's the practical solution for this? As far as I know, doing this with HTML + CSS alone by yourself is tedious and error-prone e.g. figure out manually the maximum size of each image, generate all variations of the image sizes yourself, then use HTML/CSS to load the right ones. There's CDN, web server and CMS specific solutions that dynamically resize + cache images on demand but they're far from common place so I'm not surprised most website owners don't do this well.

watchdogtimer 7y ago
Isn't the <srcset> element supposed to solve this problem?
- seanwilson 7y ago
  How do you generate the image files srcset is meant to load? How many different width and DPI variations do you make? How do you generate the srcset markup to load the right image file? What's your workflow when you want to update an image and change its width?
  - newnewpdro 7y ago
    I presume you're expected to work in the highest dpi, then have a post process stage for publishing the site which then generates the variants for you.
adventured 7y ago
The solution was arrived at a long time ago. It looks like this: https://text.npr.org https://text.npr.org Or: https://lite.cnn.io https://lite.cnn.io With better formatting. You make a text only or otherwise very reduced version of your site available to visitors. Ideally in that version you drop the images entirely. You can optionally attempt to measure the capabilities of a visitor, how they're experiencing your site, and actively present them with the reduced option (the far easier thing to do, is to just make a reduced version available and let visitors know it exists somewhere prominent enough). Visitors want the content, not the ridiculous SEO image. If you build for this from the beginning of a site, it's extremely easy to deliver and maintain.
- kemps4 7y ago
  Try this link for info about reducing bandwidth and energy usage.. https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low...

watchdogtimer 7y ago

Isn't the <srcset> element supposed to solve this problem?

seanwilson 7y ago
How do you generate the image files srcset is meant to load? How many different width and DPI variations do you make? How do you generate the srcset markup to load the right image file? What's your workflow when you want to update an image and change its width?
- newnewpdro 7y ago
  I presume you're expected to work in the highest dpi, then have a post process stage for publishing the site which then generates the variants for you.

adventured 7y ago

The solution was arrived at a long time ago. It looks like this: https://text.npr.org https://text.npr.org Or: https://lite.cnn.io https://lite.cnn.io With better formatting. You make a text only or otherwise very reduced version of your site available to visitors. Ideally in that version you drop the images entirely. You can optionally attempt to measure the capabilities of a visitor, how they're experiencing your site, and actively present them with the reduced option (the far easier thing to do, is to just make a reduced version available and let visitors know it exists somewhere prominent enough). Visitors want the content, not the ridiculous SEO image. If you build for this from the beginning of a site, it's extremely easy to deliver and maintain.

kemps4 7y ago
Try this link for info about reducing bandwidth and energy usage.. https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low...