Concept: Create your visual content for web 70% faster.

February 27, 2022

chris

Motivation

Now where CSS aspect-ratio is being cross-browser supported (Link) and the global coverage is quite high (caniuse) it’s time to use this advantage for your Website or Product!

The idea is to speed up your daily workflow when it comes to creating visuals by minimizing the amount of assets you have to create. Because why not use a size that you can easily reuse? Either it’s for your social media channels or Website.

Repeating pains

Besides of creating visuals and content for your Website, you also have to check the image specs of your various social media channels:

Are there new features that need new images, including new sizes?
How many images do we need to create for a campaign if we want to display it in several social media channels?
Have the sizes changed?
Are there new social media platforms that marketing would like to tap into?
Why am I finding different pixels sizes for the same asset (cover, profile photo)?

Unfortunately other sites are displacing the official guides through googles ads. So these are often used instead. So I uses them as well for my concept of proof. Therefore, it may happen that the resolutions I list in this article are not always correct.

How are other areas handling sizes or resolutions?

There are already systems in place in other areas like:

Video resolutions (Web): 240p, 360p, 480p, 720p, 1080p, 1440p etc. (most are follwoing an 16:9 or 19:10 ascpect ratio )
Video aspect ratios (TV, Cinema): 3:2, 4:3, 5:4, 16:9, 16:10, 21:9, … etc.
Photography aspect ratios: 4:3, 3:2, 16:9, 5:3, 5:4, 1:1, … etc.
Paper size aspect ratios: DIN A6, DIN A5, DIN A4, DIN A3, DIN A2, DIN A1 (and for the very special ones (US Letter)
Images sizes for web content? More or less all over the place.

The challenge

Creating a image size system, to reduce overhead but also to have a system that scales. Which means to reuse the number of assets you have already created for a marketing campaign on multiple social media channels. Or for entering new social media platforms. And now due to CSS aspect-ratio for your Website as well.

So I tried to collect all image sizes for the following six platforms:

Facebook
Instagram
Twitter
Linkedin
Printest
Youtube

Even though I have not covered all social media platforms, the system will work for other platforms as well.

Collecting image sizes

While collecting the image sizes, it quickly became apparent that quite a few images already follow an aspect ratio.

So I converted all other sizes into an aspect ratio as well. Of course, some images will now turn out larger than intentional required. So I checked, for each platform, how much will be cut off due to the “incorrect” size.

Even some of the official guidelines cannot guarantee that your visuals will be displayed 100% correctly. Therefore, often previews are provided while uploading images.

So I used the safe area (television) method. Which divides the image into a safe (gray) and unsafe (red) area. It basically tells you what your viewers will definitely see and what potentially will be cut off, depending on the TV device they are using. The same method can be applied to web users (mobile, tablet, desktop, etc.) as well.