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

91–100 of 116 posts

Re: Challenge: Pixel perfect design

#91

Post by jonassalen »

warpech wrote: post #87

It's interesting that the nostalgia for "pixel-perfect design" comes from a company that seems to have been on a mission to remove pixels from the user's perception for the last 20 years. 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 goal…

Correct me if I'm wrong, but Steve Jobs didn't believe in responsive webdesign and the browser on iPhone originally didn't support RWD. He believed people should access the full website and use gestures to zoom in and out on the website. Part of the reason apple.com was so late adapting to mobile breakpoints.

So saying that the iPhone was responsible for RWD is too much credit I think.

Re: Challenge: Pixel perfect design

#92

Post by warpech »

jonassalen wrote: post #91
warpech wrote: post #87

It's interesting that the nostalgia for "pixel-perfect design" comes from a company that seems to have been on a mission to remove pixels from the user's perception for the last 20 years. 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 goal…

Correct me if I'm wrong, but Steve Jobs didn't believe in responsive webdesign and the browser on iPhone originally didn't support RWD. He believed people should access the full website and use gestures to zoom in and out on the website. Part of the reason apple.com was so late adapting to mobile breakpoints. So saying that the iPhone was responsible for RWD is too much credit I think.

Apple invented the non-standard "viewport" meta tag and gave guidelines on how to use it [1]. The article that has popularized the term RWD mentions iPhone four times [2]. For me it is obvious that RWD started from the iPhone, but maybe our viewpoints (or viewports) differ.

[1] https://developer.apple.com/library/archive/documentation/Ap...

[2] https://alistapart.com/article/responsive-web-design/

Re: Challenge: Pixel perfect design

#93

Post by codedokode »

greggman3 wrote: post #83
cube00 wrote: post #2

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…

> There is actually no perfect solution

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

Re: Challenge: Pixel perfect design

#94

Post by kixiQu »

greggman3 wrote: post #88
kixiQu wrote: post #86

Earlier quoted context omitted.

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

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 sentence you excerpted:

> For each axis, independently determine the integer multiple of its natural size that puts it closest to the target size and is greater than zero.

> Scale it to this integer-multiple-size as for crisp-edges, then scale it the rest of the way to the target size as for smooth.

The first sentence is descriptive; what is prescribed follows directly after it. I'm not sure how it could do more than that to define "what you'll get".

Re: Challenge: Pixel perfect design

#95

Post by doublepg23 »

layer8 wrote: post #84
flowerbeater wrote: post #29

Earlier quoted context omitted.

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.

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.

Re: Challenge: Pixel perfect design

#96

Post by somishere »

chrismorgan wrote: post #25

When it comes to things like favicons, I always design variants for 16×16, 32×32 and larger scalable (or occasionally just 256×256). It perpetually bothers me that no avatar system that I know of supports different images at different sizes; the constraints can be significantly different, as in my own site’s favicon, where at one extreme 16×16 pretty much ignores vertical border to get it as big as possible, and is a…

I've spent a bit of time designing a simplistic (but state-dynamic / rendered on the fly) svg favicon for a firefox extension I'm working on. I started designing at 512², with dimensions/elements carefully calculated for downscale, but the resulting antialias on various screens was so unpredictable that I switched to designing a 16² upscale instead which, while initially restrictive, was much more predictable and came out looking quite nice.

Re: Challenge: Pixel perfect design

#97

Post by Molomby »

stefanv wrote: post #16

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 :)

There are reports that Apple has been exploring a foldable eInk device of some kind, so yeah.

Re: Challenge: Pixel perfect design

#98

Post by joshspankit »

greggman3 wrote: post #83
cube00 wrote: post #2

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…

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.

Re: Challenge: Pixel perfect design

#99

Post by joshspankit »

cube00 wrote: post #2

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…

This is a nonsense suggestion, but what if they used SVG to build and populate the pixel grids?

Re: Challenge: Pixel perfect design

#100

Post by WoodenChair »

A way to get started may be to take a color image and dither it to black and white pixels. Shameless plug, I make software for macOS to do this with seven different algorithms[0] (it can in fact even export to MacPaint format). But most sophisticated graphics programs also have this built-in (PhotoShop, GraphicConverter, etc.).

0: https://oaksnow.com/retrodither/

Post reply on HN