Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Challenge: Pixel perfect design

developer.apple.com

Post reply on HN
Print view View original

101–110 of 116 posts

Re: Challenge: Pixel perfect design

#101

Post by greggman3 »

kixiQu wrote: post #94
greggman3 wrote: post #88

Earlier quoted context omitted.

I'm saying it because I've actually read the spec. The spec 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…

It explicitly says in the crisp-edges section: > The image must be scaled with the "nearest neighbor" algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image. and then it explicitly says in the pixelated section, right after the summarizing sentenc…

you're right, the spec changed Feb 2021

https://github.com/w3c/csswg-drafts/issues/6038

That said, my main point stands, Nearest Neighbor looks horrible when you have a non-integer devicePixelRatio which is relatively common. You'll get better results upscaling the image offline and then downscaling in the browser, rather than upscaling in the browser.

Re: Challenge: Pixel perfect design

#102

Post by greggman3 »

codedokode wrote: post #93
greggman3 wrote: post #83

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…

> There is actually no perfect solution There is one: choose the size so that the image is displayed without scaling.

> There is one: choose the size so that the image is displayed without scaling.

You're apparently not paying attention. There is currently no way to do that (except in Chrome via JavaScript maybe)

What size would you choose?

By default a browser will display the image at its natural size * devicePixelRatio. devicePixelRatio can be non-integer values. Further, the devicePixelRatio is fluid in Chrome and Firefox. Press Ctrl/Cmd +/- and it changes.

In Chrome (the only browser that's implemented ResizeObserver with devicePixelContentBoxSize), you can ask exactly how many devicePixels a given element is ... other browsers have not implemented this. And no, elem.getBoundingClientRect will not do it.

But, even if you have the API it would still be a pita. You'd have to take the size of your original image, figure out some integer-multiple that matches the current devicePixelRatio, pray that it still fits your design, create an element that large, then use the ResizeObverser to see if you really got that size. If not, adjust up or down a pixel at time until you do.

"pray that it still fits your design" means assume you had a 200x100 image you want displayed at 2x so 400x200 and the users DPI is 1.33. If you ask for 400x200 you'll actually get 532x266. Your 200x100 image will not scale pixel perfect to 532x266. You could, via JavaScript, compute what size to ask for to get 4x scaling. That size with a DPI of 1.33 is 300.7518796992481. You can't ask for a fractional size (well you can, but it's going to get rounded) But now your design no longer works. You expected the image to take 400 CSS units but it's only taking 300, too small. And, further, there's no guarantee you'll get 300. You might get 301. To find out requires the devicePixelContentBoxSize mentioned above

Re: Challenge: Pixel perfect design

#103

Post by dmitriid »

doublepg23 wrote: post #95
layer8 wrote: post #84

Earlier quoted context omitted.

Full-HD monitors and laptops are still very common in the corporate world and for non-affluent PC gamers. I don’t see this lower-cost segment going away anytime soon, since display yield drops quadratically with DPI, and therefore the associated cost increases quadratically with DPI.

You can get a 4K monitor for ~$300 now - or significantly less if you shop deals. I spent that much on a super basic FHD display in 2016. Costs seem to be dropping pretty well even with inflation and the supply chain mess.

4K is still not enough to get rid of pixel perfect icons.

So, another 10-20 years before nor requiring a pixel grid becomes a reality? So why pretend we don't need it now?

Re: Challenge: Pixel perfect design

#104

Post by cylon13 »

toxik wrote: post #65
qubidt wrote: post #36

Earlier quoted context omitted.

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

So it seems you missed the word “perhaps” which essentially makes this correction meaningless.

You can’t just slap “perhaps” on arbitrary statements and expect to not be corrected if they’re inaccurate.

Re: Challenge: Pixel perfect design

#105

Post by greggman3 »

joshspankit wrote: post #98
greggman3 wrote: post #83

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…

Your argument seems to ignore the fact that Apple has their own browser and could put in the time to properly handle pixel-perfect rendering. Yes there are a lot of complexities with that statement, but I personally think they would have a significant win here if they set a new bar of excellence as a part of the challenge.

I'm only pointing out you'll get better results today, in all browser, by upscaling offline and then letting the browser downscale than upscale in the browser via `image-rendering: pixelated`

The question was "Why are they using image that's been upscaled offline" and I have a reasonable explanation why someone might want to do that.

TL,DR; because it looks better across devices.

Re: Challenge: Pixel perfect design

#106

Post by randomsearch »

grishka wrote: post #40
dmix wrote: post #20

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...

Apple gives no shit about being pixel-perfect lately. Try using modern macOS on a non-retina display and your eyes will bleed because every single icon is drawn as if there's no pixel grid whatsoever. Everything is a blurry mess. Steve Jobs would've definitely fired someone over this, yet with Tim Cook it stays unfixed for more than 2 years — I'd guess because pixel-perfect icons don't affect the bottom line.

Na, Steve would probably say “using a crappy external monitor with low res will get you crappy results”

It was never about supporting your own hardware, it was - give us your wallet and we will make it all work.

Re: Challenge: Pixel perfect design

#107

Post by d--b »

I can’t help but think that Apple is harvesting people’s work to get a large collection of modern black and white app icons to train a model that creates these automatically.

Re: Challenge: Pixel perfect design

#108

Post by Brometheus »

solardev wrote: post #41
selykg wrote: post #38

Earlier quoted context omitted.

Apple Watch kind of plays that part. https://support.apple.com/guide/watch/add-music-apd483798d11...

Sorry, dumb question, but does it let me listen to downloaded music on my earphones even when I don't have a phone with me? (Never had a proper smartwatch). Like can I download music directly to the Watch (what about DRM?) and can it connect to Airpods or other bluetooth without a phone?

Recently, my iPhone went dead because it had no charge left and the music started to play from the watch via AirPods

Re: Challenge: Pixel perfect design

#110

Post by 0898 »

It's quite strange (and nice) to see a hint of nostalgia creeping back in to Apple's communications. For a long time, celebrating its history seemed verboten at Apple?

There's that story of Jobs getting rid of the Apple Museum that occupied the foyer. Something about not wanting Apple to be a company that was living in its past.

Post reply on HN