Featured image

There are several views of the featured image, each can have different dimensions so it is usually important to place the image focus in the center.

When the image does not fit the container around it, it is cropped either on sides or on top and bottom.

Moreover the featured image can have two layouts inside an article detail.

Following are definitions of the featured image sizes in various contexts:

Aspect ratio: 16/9 (width = 16 points, height = 9 points)

Examples:

• 160 x 90
• 1024×576
• 1920×1080

The first position in the grid has special behaviour for desktop and mobile:

Aspect ratio: 1/1 (width = height)

Examples:

• 160 x 160
• 1024×1024
• 1920×1920

Due to the layout in the desktop view, the first article position must be slightly offset from the 16/9 aspect ratio, therefor the image has an extra few pixels at the bottom.

Examples:

• 1920×1080 would have extra 25 pixels at the bottom and would need to be 1920×1105.5 px
• 1024×576 would result in 1024×590
• In the desktop view, the image has a size of 792×456

The following image demonstrates the extra spaces that is needed in order to match the height of the two images next to it:

Aspect ratio: variable

Width: scales with browser width, limited to 1380px max

Height:

• Desktop: 600px
• Mobile: 390px

At the highest resolution, the image has size of 1380×600 pixels resulting in an aspect ratio of 23/10

At the lowest resolution, the image has a size of 320×390 pixels, resulting in an aspect ratio of 32/39, or approximately 11/13

Aspect ratio: variable

Width: scales with browser width, no limit

Height:

• Desktop: 600px
• Mobile: 390px