Prevents blurry anti-aliased borders between picture sampling areas ("pixels") by stretching them so they precisely match (multiples of) physical display points. Adds variable background for transparent images.
!! This style makes sense only for displays with DPI zoom factor set to 150% and Firefox only !!
! For images larger than viewport you have to click it first to resize it to it's natural dimension. !
If you have display set to 150% DPI zoom factor then it is quite impossible to enjoy pixel-art as decently crisp natural squared mosaic. It is result of the fact that web content is operated in "virtual pixel" dimensions, so that virtual page pixel should be roughly same perceived size for intended view distance. That results in unfortunate effect that for most zoom levels image sampling points does not match physical display points, what produces blurry aliased edges between sampling points (a.k.a. image pixels).
This style scales images in "image only pages" (images opened directly) so they fit whole multiples physical display points again, and forces "sharp" (non-aliased) rendering producing crisp outcome.
It heavily alters scaling factors, so at any zoom level you should see crisp image. It means that zoom levels displayed by browser does not match really applied scale factor. (Again, style operates only on "naturally" sized images, i.e. after clicking large ones.)
Scope if this style is restricted to *.gif, *.png and *.ico URLS only, in order to apply it on different format or URL without suffix you can force it by adding `#crisp` to the end of the image's URL.
For a pity this technique most probably cannot work with centered images - for large scale factors anything overlapping origin of viewport would be unreachable with scroll. If you have any idea how to overcome this, kindly let me know.
Also adds variable background under transparent image: dark, light while "hovered", checkerboard while "clicked".
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址
