We’re really glad you asked this question, as we love getting the opportunity to share the tips and tricks that are applicable in this area.
First off, here are the rules of our image stretching:
- On mobile apps and mobile sites, we always stretch images to the full width of the post—since a small image on a small screen doesn’t make for an easy viewing experience.
- On the desktop site, we only stretch images to the full width of the post if the image is at least 300px wide and/or 600px tall.
- Any images that are placed side-by-side are always stretched to fit their frames, no matter the image’s dimensions or the viewer’s platform.
However, the vast majority of devices and browsers use antialiasing in their default image scaling algorithms. This, as you point out, doesn’t play nicely with pixel art at all. Boooooo!
So, how can you preserve your sharp pixels with 100% consistency for your viewers? The answer is simply to upscale the image yourself before uploading. To keep the pixels square, you’ll need to resize by factors of 100% (200%, 500%, etc.) and use a simple upscaling algorithm that doesn’t use antialiasing. For example, in Paint.NET’s image resize dialog, you can use “Resampling: Nearest Neighbor”, or in GIMP’s, “Interpolation: None”.
The trick here is to resize your pixel art to dimensions above 540px wide so that every viewer’s device is actually forced to downscale the resultant image instead. That way, instead of the resizing algorithm making up details by blurring the pixels, each original pixel is preserved as a perfect square.
We really hope this helps you and the other pixel artists out there. Please, have a great day, week, and month. No, in fact—a great rest of your Tumblr experience, however long it may last. Of course, if you have any other questions on this subject, we will be happy to answer those too!
