i discovered an awesome hack for hi-DPI/retina displays when you're building websites using lo-dpi displays
one of the downsides of working in lo-dpi is that you're generally working at 72ppi... and while graphics look pixel-perfect on your lo-dpi monitor/browser, they look like shit when a hi-dpi display auto-scales them (bicubically).
this is shown in screenshot #1 taken from a retina display. you end up in an ugly mix of two different resolutions - low-res button images, and high res text. mixed res is super distracting to the eye.
i stumbled upon one solution to this completely by accident. if you render out the image to hi-dpi (say, 300 ppi) and then scale it down to the desired size in html/css (e.g. <img width=25% height = 25%>)... it will render at 72ppi on lo-dpi displays, and 300 ppi on hi-dpi displays at the proper size.
screenshot 2 shows the result on a retina display - a nice sharp icon, with sharp text below it.
@vga256 very cool. My thing right now is that I’m trying to figure out how to serve up the best images I can while still keeping file sizes low. I’m in the hunt for that elusive perfect Lighthouse score for pagespeed and trying to create the CSS to serve up both a variety of image types (e.g. webp and jpg) at different sizes and pixel densities is giving me a migraine.
Add comment