3 ms·
If you yearn to see those icons with crisp zoomed pixels without blurry aliasing, try this makeshift viewer of the source sprite image (https://win98icons.alexm
by myfonj 3y ago
If you yearn to see those icons with crisp zoomed pixels without blurry aliasing, try this makeshift viewer of the source sprite image (https://win98icons.alexmeub.com/css_sprites.png https://win98icons.alexmeub.com/css_sprites.png):
data:text/html;verbatim,<body>
<script>document.body.style.setProperty('--dpr',devicePixelRatio);</script>
<img src="https://win98icons.alexmeub.com/css_sprites.png"
style="image-rendering:crisp-edges;
background-color:grey;
width:calc(1/var(--dpr)*2168px*5);">
It forces it to map to physical device display pixels and use nearest-neighbour scaling; the last number there sets it to display each source pixel as 5×5 square in your browser's window.
- myfonj 3y ago* Oh, for webkit-based browsers, please replace `crisp-edges` with `pixelated`. I've just blindly trusted MDN compatibility data table [1] and did not verify it myself, and obviously there was a catch X[ Here is better cross-browser compatible version with sharp "pixels" for Chrome/Edge: data:text/html;verbatim,<body> <script>document.body.style.setProperty('--dpr',devicePixelRatio);</script> <img src="https://win98icons.alexmeub.com/css_sprites.png" style="background-color:grey; image-rendering:-webkit-optimize-contrast; image-rendering:pixelated; image-rendering:crisp-edges; width:calc(1/var(--dpr)*2168px*5);"> Sorry for the inconvenience! (And welcome to peculiarities of front-end web development. It is the year 2024 and there are still CSS level 3 modules that are not implemented reliably in latest browser versions, apparently.) [1] https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...
- didntcheck 3y agoAre there any image formats that do support a metadata hint instructing the viewer to use NN scaling? It would be useful for pixel artists, versus the current requirement to manually scale your final export (although compression should make the file size difference minimal)