81–90 of 116 posts
Just a thought: what if this some kind of teaser for a new device Apple is preparing? Maybe some e-ink device? Ok, I know we are in 2022, but I would really love to see some “low-tech” device from them. I’ll try to wake up now :)
Earlier quoted context omitted.
True, and pixel art was originally designed for cathode ray tubes. This leads to a funny effect where modern pixel art designers perhaps misunderstand the intended look of actual oldskool pixel art and emulate it anyway. The same is true of old fonts.
Modern pixel artists far from "misunderstand" the legacy of pixel art. They're specifically designing for a sensibility and context that didn't exist when pixel art was originally made. Actually talk to pixel artists and they'll explain this to you themselves perfectly fine
That being said, there were also a couple of years in the 2000’s where pixel-based icons were specifically designed for LCD.
I noticed the images looked a little blurred to me for pixel art. Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs. Putting quality aside and thinking about the poor internet pipes; each image is around 100kb in size and had it been a two bit black and white PNG would have been around 12kb. I know, I know, it's a probably an off the she…
For one, browser's can't agree on what CSS solution to pick. Chrome and Safari have `image-rendering: pixelated` whereas Firefox has `image-rendering: crisp-edges`. The spec used to say pixelated meant "keep it looking pixelated" and that "crisp-edges" meant to keep the edges crisp and so allowed various algorithms. The spec was changed in early 2021 so that crisp-edges means "nearest-neighbor" and "pixelated" still means "keep it looking like pixels" which implies nearest-neighbor + extra.
It gets worse though. What is the web developer's intent?
Example: I put
But, that's not how browsers work. My Windows Desktop has a devicePixelRatio of 1.25 so asking for a 256px by 256px CSS pixel image gives 317x317 device pixels. That means this 128x128 pixel image, scaled to 317x317 with nearest neighbor filtering is going to look really really bad as some pixels get 2x2 and others get 1x1 scaling. This is why `pixelated` = "nearest neighbor" may not actually be what the web designer wants.
Where as, if you manually scale the 128x128 image to say 512x512 using nearest neighbor and then let the browser scale it to 256x256 * devicePixelRatio using the default bilinear filtering it will likely look better.
Note: You can get these non-integer devicePixelRatio values on Chrome or Firefox just by zooming in the browsers (Cmd/Ctrl +/-). On Windows you can also go into the display settings and choose an OS level devicePixelRatio so that OS handled UI widgets and well written apps will adjust how they draw.
See example:
https://jsgist.org/?src=c65dfc4e2ed2e547a2d5aad69360be6d
Zoom in and out and, at least on my machines the right (pre-scaled externally and then scaled down) looks better than the left (original resolution with image-renedering: pixelated
Earlier quoted context omitted.
> will show up cleanly on HiDPI and in the future, 4X or 8X DPI interfaces That future is still as far away as it was 20 years ago.
Why do you think so? 20 years ago, everything was clearly in 1X. Now, the Windows default for many resolutions is 1.5X and my Macbook is 2X by default. iPhones and Androids are at least 2X scaled by default. iPhones in the last 2 years (like iPhone 12 and 13 are scaled 3X. So we've gone from 1X only, to 2X pretty much everywhere for desktop, with 3X on the latest phones.
This is a really good video about how Apple cares about being pixel perfect compared to Windows with something simple and obvious like the mouse cursor icon: https://www.youtube.com/watch?v=YThelfB2fvg The improvements he made are also quite nice, Microsoft should take note...
It's a catastrophe with windows. Make two windows snap to the borders, so together they're fullscreen? 2 pixel gap between the windows; 1 pixel gap at the right, left and upper side; 2 pixel gap to the windows bar at the bottom. How can this be so hard? And even if it's hard, this is so obvious you really want to fix it.
I noticed the images looked a little blurred to me for pixel art. Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs. Putting quality aside and thinking about the poor internet pipes; each image is around 100kb in size and had it been a two bit black and white PNG would have been around 12kb. I know, I know, it's a probably an off the she…
There is actually no perfect solution For one, browser's can't agree on what CSS solution to pick. Chrome and Safari have `image-rendering: pixelated` whereas Firefox has `image-rendering: crisp-edges`. The spec used to say pixelated meant "keep it looking pixelated" and that "crisp-edges" meant to keep the edges crisp and so allowed various algorithms. The spec was changed in early 2021 so that crisp-edges means "ne…
First, Apple promoted skeuomorphism as the most visible difference from the pixelated look of Windows (OS X, 2001).
Secondly, they made pixel-perfect designs irrelevant by making a powerful, small handheld computer. It made the goals of pixel-perfect design futile and triggered the RWD trend instead (iPhone, 2007).
Thirdly, they successfully pushed Hi-DPI screens to the masses, which make the smallest elements on the screen too small for the naked eye to be seen. (Retina, 2010).
I say it with all due respect. These are absolutely brilliant achievements. Still, some "Yeah, thank us for killing pixels" would be in place.
Earlier quoted context omitted.
There is actually no perfect solution For one, browser's can't agree on what CSS solution to pick. Chrome and Safari have `image-rendering: pixelated` whereas Firefox has `image-rendering: crisp-edges`. The spec used to say pixelated meant "keep it looking pixelated" and that "crisp-edges" meant to keep the edges crisp and so allowed various algorithms. The spec was changed in early 2021 so that crisp-edges means "ne…
I'm not sure why you're saying there's "no true" definition: there is a spec difference between pixelated and crisp-edges: https://stackoverflow.com/a/25278886
https://drafts.csswg.org/css-images/#the-image-rendering
says
> pixelated:
> The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary.
The spec does not say "use nearest neighbor". In fact in specifically allows not using nearest neighbor (end of first sentence). And further, it doesn't specify the algorithm used.
So there is no true definition of what you'll get. There is only a general definition of the intent.
This is an interesting challenge. I fire up my Macintosh SE/30 regularly to journal and organize my thoughts using Microsoft Word 5.1 Every time I do it I'm impressed again and again what was possible with a 512x342 black & white screen and a 16 MHz 68030 attached to 8 MB of RAM (which is "overkill" for my use). It's incredible the collective and integrated creativity that was motivated by the constraints of the medi…