Twitter is primarily about text and links. But in recent years they’ve also been adding more visual elements directly into the core Twitter service. So there are now several ways you can use photos and images directly in Twitter without resorting to third-party extensions, as you used to have to do.
There are several places where you can use images on Twitter, including the header photo (also known as the banner image), your profile picture, thumbnail previews for links, and sharing images directly in the feed.
Twitter’s current layout gives some different options for displaying images. I’m focusing here on display in web browsers. The Twitter mobile app is more of a controlled universe with less room to move in terms of image layout. But any of the size recommendations here hold true for the mobile app as well.
Twitter’s web interface is designed to be responsive, which means it fluidly adjusts for different displays, and it’s flexible enough to deal with desktops as well as mobiles. But while there are some specific guidelines in terms of dimensions to use, it’s also a bit trickier than it might seem at first.
So here are some recommendations for making the most of your Twitter header photo and profile picture. Starting with the header photo . . .
Twitter Header Size
I have a more detailed post on Twitter banner size, but here’s the quick version:
- The ideal dimensions are 1500 pixels wide by 500 pixels tall.
- File types you can use: JPG, PNG, GIF (non-animated), WebP
- Files should be under 2MB
That seems easier enough, right? Well, it is and it isn’t. Those 1500px by 500px images will generally work well, but that doesn’t mean they’re going to work perfectly in every case. That’s because of the way Twitter displays the header photo.
The overall dimensions work well, but the placement of elements within the frame can be a bit more complicated, because there are some extra considerations to factor in.
- Avoid the profile picture. The profile picture is the circular image at the bottom left. It overlays the banner image and will obscure anything there.
- The top section can be obscured on some mobile devices, so avoid putting any important text or visual information along a thin band along the top of the header image.
- The display size is reduced, so avoid small text or fine detail that can get lost at smaller display sizes.
Retina and High-Density Displays
Twitter’s images don’t factor in retina or high-density displays on the desktop view. So uploading an image that’s twice the size doesn’t end up with a crisper result.
Image File Formats
You can upload JPG, PNG, GIF (non-animated), and WebP files. They’ll be compressed and converted to JPG automatically.
The file should be under 2MB in file size.
Twitter Profile Picture Size, Shape, & Dimensions
The profile picture is the smaller image at the bottom left. It’s usually a photo of the person or a logo. It’s now displayed as a circle with a white rim.
For displaying on a desktop browser, it uses what’s called intrinsic CSS sizing, which basically means that the image fits within a container. In this case, the container is 400 pixels by 400 pixels. It’s cropped to a circle automatically.
The recommended sizes to upload are:
Profile picture: 400px by 400px. It’s displayed as a round image with a thin white border. If you upload an image that’s not a perfect square, you’ll be given the option to reposition the image when you go to change it.
When the browser window resizes, the profile picture size stays constant.
Twitter Feed Images
There are a couple of different ways you can include images on your timeline.
If you manually add an image to a post, the image is displayed to fit within a square box that’s 506 pixels wide and 506 pixels high.
If you add an image that’s in horizontal orientation (ie. landscape orientation, or wider than it is tall), it will display the whole image and scale it down to 506 pixels wide. Here’s an illustration using a wide panorama:
If you add an image that’s vertical (ie. portrait orientation, or taller than it is wide), it will fill the width but crop equally from the top and bottom of the image to fill a square. Here’s an example using this image:
It displays on the Twitter timeline like this:
In both cases, all of the corners are rounded automatically with a border radius of 12px.
Link Thumbnails via Twitter Cards
You can include an image as part of a link to a post. If you (or, more precisely, the site you’re linking from) is set up with Twitter Cards, it’ll pull in an image automatically and display it constrained within a Twitter Card container. Those images display at 506 pixels by 254 pixels, like this:
The top corners are rounded automatically with a border radius of 12px.
Twitter Image Quality Issues
When you upload, Twitter applies some very heavy JPG compression to your images. They do this to make the website as fast as possible for users and to conserve bandwidth.
The effects are particularly noticeable with the Profile Header image. The upshot is that the image that gets displayed might not look as good as the one you uploaded.
There are some things you can do to minimize the effect of that and reduce the chances of unsightly JPEG artifacts.
Firstly, upload an image with little or no compression. Every time you save a JPG image, you lose quality. That gets compounded the more times you do it.
If you’re saving an image from something like Photoshop or GIMP or any other imaging software, use the highest setting you can (e.g., a quality setting of 10 or 100%). Twitter is going to crunch whatever you send anyway. Starting with the highest quality version will help. You can even upload a PNG-24 if you want (although JPG is usually a better bet).
Secondly, because of the way JPG compression works, images with lots of different tones and smooth gradients are going to get hit especially hard. A rule of thumb is that images with fewer colors and fewer gradients suffer less from aggressive JPG compression.
Text, Logos, and Watermarks on Twitter Profile Images
The heavy JPG compression applied to the images you upload does some pretty ugly things to text, logos, and watermarks. Here’s an example, a 100% crop from one image with a logo that I experimented with. You can see the very noticeable JPG compression artifacts surround the letters as well as some clear banding in the natural tonal gradient of the blue sky.
Again, to minimize the problem, aim for simple. Clean, high contrast lines and fonts are going to be less of a problem than subtle, complicated lines and fonts with things like partial transparency and drop shadows, etc. Sans-serif fonts will often work better than serif.
And if you’re putting your logo or other text on the image, don’t put it at the very edges of the image where they’re likely to get cropped off in some browser displays. The safest zone of Twitter’s new profile header image is the center. The closer you can keep it to there, the less chance there is of it being cropped out with different web browser display sizes and aspect ratios.
There’s also a good reason not to include text or logos in the cover photo. The same cover photo is used for mobile apps like the official Twitter app. When it’s displayed in that, your Twitter profile picture and handle are automatically overlaid over the center of the cover photo, so it would obscure any logo that’s there. If you want to include a logo, putting it as the profile picture might give you better results across different displays.
Making Your Images Accessible
Twitter added a feature that lets you make your images more accessible to the visually impaired by way of adding text descriptions. It’s along the lines of ALT tags on web pages.
It’s a feature you need to enable to access–go to your account settings and enable the “Compose Image Descriptions” feature.
I have a more detailed post on making your Twitter images more accessible here.
Other Twitter Image Sizes
There are, of course, other areas of Twitter where you can use images. Here are the dimensions of some of the core ones:
- Profile Picture: 400 x 400 pixels
- Link with Image: 800 x 418 pixels
- Share Image: 1200 x 675 pixels
- Website Card: 1024 x 512 pixels
- In-stream Photo: 440 x 220 pixels
- Twitter Ad: 1600 x 900 pixels
- Twitter Post: 1600 x 900 pixels
- Twitter Video: 1600 x 900 pixels
- Twitter Banner Size for Events: 1500 x 500 pixels