Picture guidelines – Sizes and scaling

Visitnorway uses a variety of image sizes, depending on where and how the image is used. Some of these are autogenerated, and others have to be cropped or resized manually. This table should give an easy overview of the various sizes:

Where What size
Front page slideshow 1920 x 936
Front page preview (small) Autogenerated
Front page preview (large) Autogenerated
Article top slideshow 740 x 334
Article top image 740 x 334
Article text column 452 x free height (max 415)
Article left column 194 wide, free height (max 415)
Storypage preview 318 x 184
Thumbnails Autogenerated

Please note that the 415 pixel limit when the picture height is free is due to a bug in Epi6 which causes pictures higher than this to be automatically scaled down to that height. One work-around is to divide the picture in two and insert them seperately, but that will leave a thin white line through the middle of the picture, which renders the solution unusable in most cases.


Automatic cropping and scaling

As mentioned, images will be cropped and rescaled automatically. It is important to keep this in mind when selecting images to use, and where the main subject and most important elements are placed in the image, as they might otherwise be cropped out of it in other sizes, rendering them useless.

This image, for example, looks fine in itself:

Picture9

While as a front page preview (left) it will be cropped from the left and right. This works okay as well, in this instance, except when the mouse pointer is rested on top of the image (right). Information will then cover the top and bottom, effectively cropping the image so much that it no longer serves its purpose.

Picture10

Similar effects may take place in the front page slideshow. This image, for example, looks fine (except for the headline and intro text covering the couple – this is due to a redesign):

Picture12

On mouseover, however, a small portion of the picture, in the lower right, will be covered up by the information appearing:

Picture11

Responsive design

Responsive design will also lead to automatic rescaling of pictures, and this must be kept in mind and tested when publishing a new picture on the front page. This picture, for instance, looks okay (the text doesn’t cover too much of the couple):

Picture13

This is a screenshot from the same display, but at a much lower resolution:

Picture14

In this case, the rescaling of the image but not the superimposed text has led the text to cover a much bigger portion of the image, including the main element. Needless to say, this does not look good.