#actually other than the width of 540px I have no fucking idea about sizes

[icaxrus]

I have been gifing for a respectable amount of time yet is it a good time to admit I have negative knowledge about tumblr post sides and I have yet to see an updated post about it

#aimryax talks #all I can find is when tumblr gif size limit was 1mb astgafriullah #but also its so funny I colourized Zhou Zishu's facew #which I'm damn fucking proud of btw #but I still dunno if its 250px or 177px if you wanna #make split gifs #actually other than the width of 540px I have no fucking idea about sizes #no wonder why my gifs look so bad at times

[retronator]

It annoys me how tumblr's app doesn't display your art in the crisp, HQ beauty that it is. We should all complain about it. I love your work.

Oh boy, this is a topic dear to my heart. I hope you won’t regret hitting my nerve, because this issue and I, we’ve got some history, so buckle up because it’ll be a long, nerdy ride.

Before retina displays came along, if everything else in your OS was set correct, and you would display an image at 100%, then one pixel in your image would map onto one pixel of your (LCD) monitor. There’s only one way to do this, so if the source image was sharp (as it is in pixel art, including manually scaled pixel art) the displayed image was sharp. I’m saying manually scaled, because from a 100×100px pixel art image, you can make a 500×500px image by enlarging it 5x with nearest-neighbor interpolation in your drawing software, which creates a big, but still sharp version of your pixel art. If on the other hand you let the browser do automatic scaling (you give it 100×100px image and instruct it to display it at 500px width), browsers by default use higher order interpolation (bilinear, bicubic etc). This smooths out the edges, which is great for photos, but not so great for pixel art. The result is a blurry image.

So if you enlarged the image manually for Tumblr’s 500px wide dashboard (today it’s 540px), Tumblr didn’t have to change the image’s size, so it left it as it was, keeping pixels sharp. Everyone is happy. Back in those days I spent a lot of time and effort cropping images to 500/540px so that on the dashboard they would appear crisp as fuck.

Enter retina displays. Now each pixel in the OS was displayed by 4 pixels of the LCD display (2×2). Great for vector things, such as text. Great for photos, where you see 4x more details at the same physical display size. Bad for pixel art, because a 540px image uses 1080 retina pixels per row, interpolation needs to get turned on, and its the blurry, bilinear kind. 

“OK, Retro,” you say, “then we will upload a 1080px image, and interpolation won’t happen.” Nice idea, but what Tumblr does is, it takes the image you uploaded, saves the HD version (which can be up to 1280px wide), but also makes a number of variants for sizes at 540px, 500px, 400px, 250px … And yes, it does this downsampling by using interpolation = blurry pixel art. The way Tumblr displays images on the dashboard, they show the 540px image, even if you’re on retina and you could technically see up to 1080px of information. It saves on bandwidth, but also renders the 1080px upload idea impossible.

Now this is all desktop, computer version, in your browser. What they do in apps is harder to tell, because there are many more screen sizes they have to worry about and I’m guessing things vary between apps. What I can say is that on my iPhone 5s, it’s just as bad as on the website. The 540px native image that Tumblr didn’t scale gets fucked up due to app/iOS scaling, and the 1080px image gets scaled by Tumblr first to 540px (and then again up by the OS scaling) so it’s all the same crap.

Could Tumblr do any better? Yes, but it would require a convention. Because higher-order image interpolation produces better quality in general, it makes sense for it to be turned on by default. They would have to agree on a tag, for example “pixel art” or “crisp-edges”/“pixelated” (if they wanted to mimic the CSS image-rendering directive), that would trigger rendering using nearest neighbor interpolation. As of now, I don’t know any general website that does this. Even DeviantArt, where you semantically choose your image to be pixel art, they don’t use this information to change the way they render the image.

What can you do yourself? You can force your browser to use nearest neighbor interpolation. I made an extension for Safari that does this (called Pixelize), and I think there should be others for other browsers. Obviously I don’t want it turned on all the time, so it’s a button in your toolbar that you can hit when you need it.

For your mobile app, you don’t have any such power. The best I can say is to upload images as big as possible and let the browsers just do the downsizing. This doesn’t apply to tumblr, because it manually creates the shitty 540px version that it then displays enlarged, but for any other network, if they actually display the high-res original (or at least x2 the OS pixels, as it should be on retina displays), you’ll get decent enough quality. 

Quick note for Twitter: inserting at least a pixel of (semi) transparency forces it to save the image as png, which uses lossless compression. If there is no transparency, they will default to saving it as jpg, which creates blurriness/noise due to lossy compression, which is another topic altogether. Don’t even get me started on the idiotic decision to convert GIFs to videos. I’m glad I was able to convince Medium to change back (yes, you can thank me for that, because I am passionate about this).

One final thing needs to be said, of which I was reminded by Cyangmou. Pixel art, or better said old game graphics, were never sharp to begin with. They were displayed on blurry CRTs where pixels bled into each other. Dithering, for example, worked extra well due to this. So when I see ZX Spectrum art today, I’m not even mad if I see it with bilinear image interpolation. It’s actually closer to the original than sharp pixels. Sharp, big pixels are a unique idea to pixel art as an art style and it’s just that, an art style. We love it because of its own inherent interesting look, but it’s not actually something we’d have a nostalgic attachment to, because things never looked like this back then. We do have a nostalgic connection with the characters, the sprites, but their modern pixel art rendering is a new construct. That doesn’t mean it’s not good to display old sprites sharp (as you can see I spend much effort to do so), it’s just an interesting thing to keep in mind.

Bottom line: Don’t worry about it. Looking at art on Tumblr, Twitter, Facebook, etc. is like looking at Mona Lisa in Walmart. Besides, you might care, but 99% of people, including your fans, don’t. In 5 seconds they’ll be 3 screens away from your image already. The way we consume art on the Internet today is (especially on social media): we see an image, we acknowledge it, “Oh, that’s nice,” we double tap for a like, and we move on. Less than 3 seconds. I might sound bitter, but I’m not. I do this too. But I also want places dedicated to looking at art, just like I go to an art gallery once in a while. It’s why you can see images in my new blog design without any distractions (click on them). It’s why you can do the same in my Pixel Dailies archive. It’s why Pixel Art Academy will take this even further. I care. Just not on social media. Long are the days when I spent 1h cropping images so they’d appear sharp on the Tumblr dashboard.

#Meta #Pixel Art #Tumblr