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 resize 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 600x2000 image and resizes it to 243x810 to achieve a maximum height of 810 pixels. Then, because the original width was at least 300 pixels, it takes the resized 243x810 image and stretches it to 540x1800, 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 28x810 - but since the original image was at least 300 pixels wide, it would promptly stretch that 28x810 image to 540x15621, 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.)
In lieu of a huge dash-stretching twitter screenshot thread I’m just gonna copy/paste the tweets I made:
We all make fun of tumblr and say it’s worthless but literally no other site lets you make and interact with posts like that
Longform writing with cutoffs, images, audio with text comments, video, the ability to add inline images
Twitter has 2 of those things and no easy way to view comments
The culture around adding a comment for your followers but not anyone
else’s is also gone now, since tags on tiwtter are embedded into the
tweet itself and not a supplemental addon.
Tumblr is my favorite social network for precisely how much freedom you
have in how you make a post and in how easy it is to share said posts
Also: Chronological timeline and private likes and following lists with
built-in separation of various accounts means that I didn’t have to have
3 fucking emails if I wanted to keep my horny off main
Fully customization themes and tag filtering ALSO means that artists
have lost a really good way to have an all-inclusive gallery that lets
them interact with their followers while filtering the art by finished
pieces, sketches, stupid doodles, etc
Tumblr is a genuinely great social network and it’s really fucking
saddening to watch the staff annihilate it with the orbital laser
Thank you tumblr user hustlerose for summarizing and also allowing me to show off two things I’m gonna miss about tumblr: inline images and links
None of Gosho’s newer stuff has the mad energy of old Magic Kaito, where literally just any fucking thing was happening.
single chapter premise is insane with no ramping up period whatsoever. Every single character is as freakishly competent as they are
incredibly stupid. The actual levels of danger and violence in Gosho’s
work have remained the same, but the tone shifted from ‘adventure
serial’ to ‘7 gruesome brain tinglers to enjoy in front of the fire’,
and I enjoy the former more.
The old art was good, too. It wasn’t as polished, but the cartoony look had a ton of energy that was traded in for the stiff, glossy realism of Gosho’s later style. I enjoy looking at it.
(Fuck this door specifically.)
The physical comedy and sight gags were also Choice.
classic MK was a fucking Mess, but its modern form is a
sleeker-looking, less exciting mess. We’re still knocking Aoko out for
plot convenience, but it’s not even happening on an exploding pirate
submarine to balance it out.
I understand the impetus to smooth out the property to align with the tried and true Detective Conan Brand™ (and maybe
the mangaka’s shifting tastes, though that can’t account for
adaptations), but I also feel like everybody is sleeping on how camp and
stupid MK is. The cast when the lead is in class is “a teen phantom
thief with a stage magic gimmick, a police inpector’s daughter, an
English detective with a trained hawk who dresses like it’s 1890, and a
literal magical witch.” Who’s going to take full advantage of this. I understand that og MK must have been a difficult level of deranged insanity to maintain, but still. Press F.
Tumblr Inline Image Width Limits: Inserting an inline image into the caption of your post? If your image is fewer than 300 pixels wide, Tumblr shows your image at its exact width on the Dashboard. But if it’s 300 pixels or more wide, Tumblr resizes the image to span the full 540-pixel width on the Dashboard. That means a 300-pixel-wide image would bloat to 540 pixels wide, degrading image quality on the Dashboard. (Some blog themes, such as Optica, will also expand inline images.) For best results, either embrace the 540-pixel width or keep inline image widths at 299 pixels or fewer.
I wanted to try and make a theme checklist encompassing everything I’ve typically forgotten when making themes. This list is not exhaustive. I’m going to update this as I discover more bugs, but hopefully this will help somewhat. Please add to this if you feel I’ve forgotten something, and refer to tumblr’s custom theme documentation for more specifics. Items I consider optional will be italicized.
formatted all kinds of posts
post info (date, tags, via/source)
link to permalink page somewhere
reblog and like buttons
all meta tags and options have been accounted for
photos/videos/general posts are all the same width and aren’t pixelated/stretched
included fonts have bold/italic options
size of sidebar image(s) adjust automatically/aren’t stretched
any other images are not pixelated/stretched
line height has been specified
blockquotes, lists, and titles have all been stylized
pre has been stylized so it doesn’t run off the post
links have been differentiated
any stylistic differences between the index and permalink pages are specified and accounted for
inline iframe videos and images have been width/height adjusted
items like post info/reblog buttons/like buttons are not on pages like ask and submit pages
tumblr’s built in via/source have been removed or stylized
custom bold/italic stylizing
iframe tumblr controls have been stylized
Good Coding Practices:
no “dead code”
classes/ids are clearly labeled
all divs, spans, and other tags are closed
code is indented and easy to read
code is commented with helpful labels and/or terms of service