When you need to brand and promote yourself, social networking communities help get your name out. Using the right image sizes for your branding to look clean and professional is what we are going to talk about here.
Creating avatars and good looking background images differs across each platform. So you must create one baseline that is adaptable to resizing. All major social networking websites use responsive layouts to conform to the screen device of the user. Use Adobe Photoshop CC, Corel PaintShop Pro X9 Ultimate, or Gimp to edit the images.
Screen Device Aspect Ratios
Before discussing each website’s image sizes, lets look at various screen device resolutions:
- 720p is 1280 x 720; HD; 16:9 aspect ratio
- 1080p is 1920 x 1080; Full HD; 16:9 aspect ratio
- 1440p is 2560 x 1440; Quad HD; 16:9 aspect ratio
- 2160p is 3840 x 2160; 4K, UHD, Ultra HD; 16:9 aspect ratio
- 4320p is 7680 x 4320; 8K; 16:9 aspect ratio
Apple, for example:
- iPhone 6/7 is 1344 x 750; 16:9 aspect ratio
- iPhone 6/7 Plus is 1920 x 1080; 16:9 aspect ratio
- iPad Mini, 3, 4, Air; 2048 x 1536; 4:3 aspect ratio
- iPad Pro; 2732 x 2048; 4:3 aspect ratio
- Macbook Pro 15″; 2880 x 1800; 16:10 aspect ratio
- iMac Retina 4K; 4096 x 2304; 16:9 aspect ratio
- iMac Retina 5K; 5120 x 2880; 16:9 aspect ratio
What to take from this is that 16:9 is the common aspect ratio. Out of the major social networking websites below, Google+ (16:9 cover) and YouTube (16:9 channel art) requires artwork mirroring screen device resolution.
The rest come up with own rules that are geared more towards their layouts.
Google+ and YouTube do this as their apps and website is used across many devices including large screen TVs. If you ever watched YouTube on a large 4K UHD screen, you would understand this.
YouTube Graphic Sizes
Profile icon: 800 x 800
Channel art: 2560 x 1440
For the channel art, notice that YouTube uses a perfect 16:9 1440p resolution. As 4K screens become dominant and device RAM and CPU processing power improves, the 4K format will be used in the future.
For now, make sure you center all your visual elements in the image vertically and horizontally or they will be clipped on smaller devices. For example, on the desktop, the visuals must fit in a height of around 200 pixels from vertical center. Avoid putting objects on the left hand side as the avatar will cover it.
All channel art will be resized according to the device it is being rendered on. The icon will be resized also and generated in various sizes to fit the device as well.
Google+ Graphic Sizes
Profile icon: 250 x 250
Cover photo: 2120 x 1192
Twitter Graphic Sizes
Profile icon: 400 x 400
Header image: 1500 x 500
Stream photos: 440 xx 220 to 1024 x 512
The profile icon will be resized to fit at 200 x 200. All photos that appear in your stream that you submit will be rescaled. Optimal minimum is 440 x 220 up to 1024 x 512.
Tumblr Graphic Sizes
Profile icon: 64 x 64
Photo: 540 x 810
Tall photo: 300 x 810
Photoset images: 540 width; 268 width; 177 width
Tumblr uses a 80% ratio to rescale photo and tall photo sizes.
We learned about the different aspect ratios and display resolution sizes for today’s myriad of screen devices. We saw how some social networking sites, especially Google+ and YouTube, scale images to a 16:9 aspect ratio. Finally, we know what image sizes to use for our profile icons, headers, covers, and channel art.