Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

For better rendering on high-DPI screens and (more subjectively) screens of people that have zoomed in because HN’s text sizes are unreasonably small, add c.style.imageRendering='pixelated'.

I was going to say that the insertion of these 24 bytes allows you to save ten bytes elsewhere by halving the size of the image (making features one pixel in size, rather than two), but then you’d also have to set the doubled image dimensions, and that’d cost more than ten bytes.

(Me, I use HN at 120% on top of a native scaling factor of 150%, which is currently implemented as downsampling of 200% rendering because Firefox hasn’t got fractional scaling right yet under Wayland, and widget.wayland.fractional_buffer_scale has some fairly debilitating side-effects on popup windows including non-rendering and crashes, which is a pity because it improves rendering so very much.)



It's a good point, I did consider using that feature but the problem is it's not very cross browser friendly, so I stuck with simpler DIY pixel scaling.

In fairness I think there is basically two different values for chrome and firefox, although I'm not sure about safari and cannot test it...


Firefox shipped the value "pixelated" five months ago, so you don’t need to worry about a "crisp-edges" fallback any more. Safari, back in 2016. https://caniuse.com/css-crisp-edges

This is valuable for high-DPI and zoomed pages, to avoid bilinear or similar scaling; the matter of halving the canvas size was a red herring.


Ah, good to know it's finally normalised.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: