So I was asked a question the other day, ‘what image size should I be using for my post thumbnail as mine are getting cropped’ it got me thinking mine are too but I hadn't been looking too closely at this. I think it's time to do a little investigation and see what size images we should be using across the network.

So I have recently been looking into condenser code base for some other work and it appears there are only two defining sizes that relate to images, these are for image thumbnail size which is a fixed size in the css and the second is the maximum content area size.

So let's start poking it a little...

The Image Thumbnail

So if we take a look at the code we can see it's a CSS style which actually sets our thumbnail image sizes.

overflow: hidden;
width: 130px;
height: 77px;
position: relative;
display: inline-block;

The image is then positioned inside this element again through CSS to use its original aspect ratio but fill the width to 130px but cropping off any height over the 77px by shaving the top and bottom off in equal parts. So portrait pictures will be much worse off here.

This means if we want to create the perfect thumbnail we need to calculate the aspect ratio and then upscale it to the size we want our post image to be from which the thumbnail is generated.

To calculate an aspect ratio we divide the width by the height

W / H = AR
130 / 77 = 1.6883

Usually, we would make these nice round numbers as we do with TV’s ie 16:9 or 4:3 which we are very familiar with. Unfortunately due to the unusual numbers in our case 130:77 is the lowest common denominator so I am going just going to round off the aspect ratio calculation to two decimal places.

This becomes an aspect ratio of 1.69:1

Now we have our aspect ratio let's take a look at the content width to apply our aspect ratio and calculate image height.

The content area width

The maximum size of the content area in condenser is 640px as defined in both CSS and javascript. With this fixed maximum we can apply our aspect ratio and knowing that width is our constant we can now work out or perfect thumbnail source image.

Rather than work this out myself I just make a new image in my image software at the original size and resize the document to the new size and let it do all the heavy lifting.

Tapping it into my programme I now know that 130x77px at 640 is a height of 379.1px which I will round up to 380 because otherwise, we will get a slightly fuzzy edge to our image as our browser tries to calculate the sub-pixel of .1px and I know the extra will be cropped by the overflow: hidden in the css without any noticeable loss.

In summary, for our first image of a post which is the one condenser uses to generate the thumbnail we should use 640x380px for a full size image in order to not crop our image for thumbnails.

But wait there is more to images than just pixels, what about pixel density....

High Definition Displays AKA Retina screens

I use an iMac for much of my content creation and these have retina screens as do most mobile devices as standard, no matter who the manufacturer is. Unfortunately, windows seem to be behind the curve on this but luckily Microsoft and desktop computing no longer rule the IT world.

So what does this mean for our little thumbnail and why does it affect us? And the answer is that high-definition displays cram more pixels into the same space and it makes your screen and your images very sharp hence the high definition.

The good news is all we need to do for Steemit posts is upload the highest quality image we can and it will make all the versions below it for us and add the code to have the user download the best version for them.

So in order to create the perfect image we should consider this by scaling our content width up to the 2x and 3x sizes. This is exactly as it sounds the image is 2 and 3 times the size of the displayed size.

Baseline Image : 640x380px
Baseline Image 2x : 1280x760px
Baseline Image 3x : 1920x1140px

So there we have it the best post image for our aspect ratio and scaled up to 3x high definition devices is to use an image at 1920x1140 pixels.

We can do more!

So now that we have our mathematically accurate thumbnails and post image size it made me think about what other images do we use in condenser and only two spring to mind, our avatar and our profile cover image.

Cover Image

When we upload a cover image it tells us to use an image at 2048 x 512 pixels however looking at the codebase I can see that these dimensions or its 4:1 aspect ratio are never actually passed to the front end.

The only number that is fixed is a min-height of 155px but this can be more on very small screens when the overlay text wraps onto multiple lines.

However, 155px height compared to the recommended 512px allows for a lot of latitude. The 2048 pixels however strikes me as odd and seems targetsed at tablets or small laptops, I would make a case to go larger though, 2k monitors are not uncommon nowadays on desktops and these devices have 2560x1440px screen sizes so I would make an argument to make the 2560x512 the default image size.

I would even go one stage further and say we can lower the height as I could not find a single example of where a header hit this 512px limit in fact I never found one that exceeded 300px but for safety, let's go with 320px which is over double that of the minimum height requirement, and this reduced height offset the increased width to create smaller files.

Looking at the code there is no current support for retina images here, probably due to the already large base sizes so for now so we don't need to scale these further.

Profile Picture / Avatar

Searching through the code the largest I can find that is needed here is 48px though I would not recommend finding an image this small. Normal avatars go anywhere up to 512x512px but there is no reason to exceed this, smallest I would recommend is 128x128px this is a good size and would work with retina support if it was added to the code.

Discord

I know a lot of communities also use discord, so as a state of completeness I have included a list of image sizes best used on that platform.

Profile Picture : 128x128px
Discord Sever Icon : 512x512px
Emoji Size : 108x108px
Banner : 940x540px (upload up to 1920x1080px and it will resize it accordingly)
Server Invite Background : 1920x1080px

The following information has been extracted from either in-app descriptions or the Discord Support pages

Summary

So in this article hopefully I have covered all the image sizes we are likely to need but to sum it all up in a tl:dr format here is a list:

Steemit

Avatar : 128x128px
Cover - Official : 2048 x 512px
Cover - My personal recommendation : 2560x320px;
First post image for thumbnail generation : 1920x1140

Discord

Profile Picture : 128x128px
Discord Server Icon : 512x512px
Emoji Size : 108x108px
Banner : 940x540px (upload up to 1920x1080px and it will resize it accordingly)
Server Invite Background : 1920x1080px

SteemWOW

If you would like to show your appreciation please support the @steemwow team and vote for our steemwow witness, you can do this by heading over to the Steemit Wallet Witness list, and scroll to the form at the bottom of the page. Just type steemwow into the box and hit vote as illustrated below.