logo-github.png looks bad on HiDPI/Retina screens

Question

j-f1 opened this issue 2 years ago · comments

Since logo-github.png is 200×200 and is rendered at 200×200 CSS pixels, high-DPI screens render it with pixellation. Two potential solutions:

since screens today go up to 3× pixel density, change the logo-github.png image to be 600×600 and set explicit width=200 and height=200 on any <img> tag that references it
reference an SVG version of the image so it will look good at any screen resolution (you can also specify an explicit width/height here if you want)

The SVG (https://github.com/11ty/11ty-logo/blob/master/img/logo.svg) is actually smaller than the 200×200 PNG image, so this change would actually save bandwidth (slightly).

screenshot: (click to expand)

Zach Leatherman · Answer 1 · Fri Mar 18 2022 05:36:56 GMT+0800 (China Standard Time)

Fixed, thank you!

Zach Leatherman · Answer 2 · Fri Mar 18 2022 05:46:32 GMT+0800 (China Standard Time)

Updated on all the repos linked up from https://github.com/11ty