prokopetz:

As an FYI, Tumblr doesn’t make your inline images blurry randomly or for no reason. It’s a predictable outcome of two conflicting rules fighting each other (because Tumblr is a well designed site).

1. If you try to post an inline image that’s more than 810 pixels tall, Tumblr will resizie it so that it’s 810 pixels tall, adjusting the width proportionately. On the face of it this is reasonable; if this rule didn’t exist, assholes could bork your dash by posting an image that’s one pixel wide and a million pixels tall, forcing you to scroll forever.

e.g., if you post an inline image that’s 600 pixels wide and 2000 pixels tall, it will be resized to 243 pixels wide and 810 pixels tall, enforcing a maximum height of 810 pixels while retaining the same relative dimensions.

2. If you post an image that’s at least 300 pixels wide, Tumblr stretches it to be exactly as wide as the main column (currently 540 pixels), adjusting the height proportionately. This rule seems to exist in order to give Tumblr the freedom to tinker with the width of the main column without creating weird gaps at the sides of historical posts; whether this is a reasonable solution to that problem or not is… debateable.

e.g., if you post an inline image that’s 350 pixels wide and 500 pixels tall, it will be stretched to 540 pixels wide and 771 pixels tall, setting the width exactly equal to the main column width while retaining the same relative dimensions.

Now here’s the trick: rule 2 does not take any resizing performed due to rule 1 into account; it decides whether or not to stretch the image based on whether the original width was at least 300 pixels wide.

So let’s take that first example a step further. First, it takes your 600×2000 image and resizes it to 243×810 to achieve a maximum height of 810 pixels. Then, because the original width was at least 300 pixels, it takes the resized 243×810 image and stretches it to 540×1800, an effective “zoom” of over 220% – hence the blurriness.

This rules conflict can lead to some entertainingly stupid results in certain edge cases. For example, suppose that you posted an inline image 350 pixels wide by 10000 pixels tall – a real dash-buster! Tumblr would resize it to 28×810 – but since the original image was at least 300 pixels wide, it would promptly stretch that 28×810 image to 540×15621, resulting in an even more obnoxious image than you started out with, while also rendering its contents almost entirely indecipherable due to the effective 1900% zoom.

Of course, you can avoid all this simply by keeping any inline images that are taller than they are wide under 810 pixels in height and either under 300 pixels or at least 540 pixels in width, which is probably the best way to go unless you enjoy doing math. (With the caveat that it could all break hilarious the next time @staff dinks with how undersize and oversize images are handled, of course, but that would have been true anyway.)

Technology is fun!