When building this website from hand, I worked through a bunch of CSS methods I’d not used before. I was able to create blocks and set widths, padding, and margins with general ease. In the end, my test posts looked great and I was happy.
Then, after publishing my review of news app Nuzzel for iOS, I notice that the images I was embedding in my text posts were coming out blurry. The text in the image gave it away.
After double checking my original image on my hard disk and uploading the image in several formats to test the results, I found myself with a bug. One that I thought was a result of my limited CSS knowledge.
Turns out, It’s a Tumblr thing. According to the official Tumblr theme building documentation, the recommended image size is 500px. That’s how images are displayed in the dashboard, so that’s how big their servers are going to process them. Good for the dash, bad for your post.
There is an obvious solution. You can upload your images to a CDN or other host like Flickr, Imgur, or Photobucket, but the problem you’ll run into there is a grey box in your dashboard where the image should display. Basically, if it’s not a tumblr hosted image, it’s not going to look great everywhere.
So, I’ve found a work-around. Using this method, you can upload an image to tumblr and use a higher resolution at any size your theme supports. We do this through the photo post option. This uploads your photo at a higher resolution (1280px) than the “upload photo” button in your text and link post toolbars.
Here is the process. First, click to add a photo post from your dashboard. Upload your photo. Then, select “Post privately” from the post button dropdown menu. Then post.
Next, click the image on your dash so that the full image appears in a lightbox pop-up. The background should turn dark to highlight your image. Right click on the image and select “copy image address” from your menu. Exit the viewer and open the post you wish to use the photo in.
In the “<html>” view, insert an image embed code like this:
<img src="https://38.media.tumblr.com/9f9ac18d35787272592edad1aa1e9a9c/tumblr_nhscw50he91skvixuo1_1280.png">Replace the URL above with the link you just copied from the privately uploaded photo.
Preview your post now. The image should appear clearer than before. You can delete the private post at this time. The image will continue to work within your post, pulled from Tumblr’s servers.
Using this method, you will have full, crisp images on both your blog’s pages and in the Tumblr dashboard.
Using the “upload photo” toolbar button:
Using my method:
It’s not perfect. I’m not using a retina screen and there is some data crunching going on server-side. But as you can see, there is a noticeable difference that should improve the way your blog posts appear to your readers.
I hope this helps anyone experiencing this problem. I also hope Tumblr provides some better solutions for text-based posts in the near future.