Why Do My Images Look Pixelated?

Created on Friday, September 25, 2020 8:20 AM Updated 3 months ago 1.42 K views

Pixelated images on custom pages? It's a known issue.


Tumblr automatically sets your uploaded image to be 500px wide - no matter how high resolution your image is. This is a known issue on Tumblr theme garden, and it's been around for years. Currently, there's no workaround to change your image resolution uploaded to Tumblr. Well, that's too bad, but don't worry about it. Use the following tricks


Fix your image URL structure to make it sharp.


Tumblr also stores the high resolution version of your image too – it's just not showing up by default. We will go over a quick instruction for your workaround, but before that make sure you know how to view your customize page first, and some knowledge of HTML. If you are not familiar with any HTML tags, you can use a simple javascript integration. Find the last step of this page.


Getting back to fixing the URL structure of your image: on your custom page editor, open up the code view. (Click ‘HTML’ in your custom page editor). Find any image tag you would like to change. Your image may have a width data code '500', replace it with '1280' like the image link below.


// Here's the example. Change '500' to '1280'

https://78.media.tumblr.com/fe983472349rjkfn/tumblr_image_38e93ejd_500.jpg https://78.media.tumblr.com/fe983472349rjkfn/tumblr_image_38e93ejd_1280.jpg



Using a script to change it automatically.


You may be not a big fan of editing it every time when you upload an image, or not familiar with HTML at all. Don't worry. We have a script that works automatically for your custom pages. Place this code before </html>, or after </body> in your theme code.

{block:permalinkpage}<script src="http://static.tumblr.com/l6lgv4c/lzHoxme6w/refix.js”></script>{/block:permalinkpage}


This is it! :) Have any questions? Feel free to comment below!