search

CSS-Tricks / coding-fonts

https://coding-fonts.css-tricks.com/
MIT License
460 stars 67 forks source link

Screenshot resolution #68

Closed rubjo closed 3 years ago

rubjo commented 3 years ago

Suggestion: if you are going to go with screenshots for the font samples, double the resolution (or come up with some other trick), so they can stay sharp on high-dpi displays.

andion commented 3 years ago

In my case I see them sharp on my Macbook Pro retina display, but not on my DELL external monitor.

chriscoyier commented 3 years ago

I think this is related: https://github.com/chriscoyier/coding-fonts/issues/59

I'm gonna close this to consolidate image quality to that thread. If you make that suggested change in DevTools, does it look good on your DELL monitor @andion?

landjonathan commented 3 years ago

The image width maxes out approximately at the width of the original image. On my retina MacBook Pro it always looks sharp. I've noticed that when moving an existing tab from the retina to a standard display it gets a bit blurry, but then if I reload that tab it looks fine. @andion have you tried reloading once the tab is moved? I think Safari does a better job of switching densities than Chrome and Firefox. I haven't tested on Windows, though.

rubjo commented 3 years ago

FWIW, the original issue was opened because of how the screenshots looked on an iPhone. 🙂

landjonathan commented 3 years ago

@rubjo Ah, that explains it — since the images are requested at different sizes based on the viewport, the image will look pixelated on the iPhone if you pinch zoom. Hmm, I don't think there's a trivial solution to this.

rubjo commented 3 years ago

Well:

Load in landscape orientation -> flip to portrait => relatively sharp image

Load in portrait => relatively fuzzy