Image widths

As the widths are expanded, images will take more space on pages.

It may have different consequences for images in body text area and images listed in other templates (e g in other blocks and in start departments).

Images in the body text area

Images blocks located directly in the body text area field appear just as before in their original size.

If the image is in an article's body text area and has been adapted for previous page width (670 pixels), it will continue to be that wide, even though the page in the new design allows a greater width (868 pixels).

If you want images to fill full page width, you need to use larger images.

As before, if an uploaded image is wider than the width of the page it will be resized to fit the page. However, avoid uploading unnecessarily large images. This makes the pages slower to load for visitors.

Recommendation: Images intended to fill the full page width should have a width of 1.000 pixels.

Images in articles positioned to the right or left with surrounding text flow are not affected. At least not otherwise than the larger side width causes these images to take up smaller space relative to the surrounding text.

Example: An image with a 670 pixel width fills the full page in the expiring web design...

... but in the new design, with its extended page width, there will be a gap in the right margin.

Images in lists

This refers to images that are not directly put in the body text field but are listed in other templates, for example, as teaser media in teaser blocks or as items in column splitter blocks.

These images fill the entire column width regardless of the original image size. An uploaded image that is narrower than the column it is intended for will be resized to fill the slot. If it is wider, it will be narrowed down to fit.

If such an image has been adjusted to be exactly as wide as the web page column, the image will be resized to the column ratio given by the new design. It will be "resampled" and loses in detail and sharpness.

On mobile screens, the web site's multi-column solutions expire and all content appears in one and the same column. Content in a narrow slot on the computer screen will fill the full screen width of the mobile phone. Here, the mobile screen resolution affects the scaling of the image, but generally, images adapted to narrow columns in desktop view are broadened on mobile phones. It shows when the picture is viewed in the standing portrait mode of the phone and is even more obvious in landscape mode where the image fills even more screen width.

Keep in mind that the fact that small images are resized in mobile views also apply to the old web design. Navigate your web pages on a mobile phone and identify the images that are losing too much sharpness when they capture the full width of the screen. These images should be saved and uploaded with a larger width.

Recommendation: Images intended to fill columns that are smaller than 500 pixels in desktop view should be saved at least 500 pixels wide. Then they maintain good enough quality on both computers and mobile phones.

Look at the pixel dimensions on the page Page and column widths  when you format your images. If the column your image is designed for is narrower than 500 pixels on the computer screen, the original image should be at least 500 pixels wide. If the column is wider than 500 pixels, you should use an original image that is 1,000 pixels wide.

(Note that this is not based on any exact criteria but should be seen as a general rule to simplify image management. An image that is 800 pixels wide and put in a column that is 600 pixels wide, will look excellent on all screens.)

Example: The following teaser has an image saved in the same width as the column according to the expiring web design (210 pixels).

In the new style, the same column is wider (270 pixels) and the image is resized. It loses sharpness.

In a modern mobile phone with high resolution, the image is further resized and the blur increases. The image needs to be at least 500 pixels wide to work even in this context.

Keep in mind, however, that you should not upload unnecessarily large images. They are resized to the width allowed by the column, but they make the pages heavy to load for visitors. This especially applies to pages with a full array of images.

(The example above also assumes that the image remains in a narrow column. Moving the teaser to a broader column means that other conditions apply and a wider image may need to be used.)

Images associated with increased text sizes

As text size increases in new design, text will in many cases take up relatively larger space than surrounding images.

It can produce less desirable effects when image sizes have been adapted to a certain amount of text and vice versa.

Example: Here, the image has been adjusted to a certain amount of text.

In the new design the text will take more space. Left and right aligned images are not resized, they retain their original size. An unwanted gap occurs underneath the image.

This may be difficult to adjust in advance, but it is recommended that for this type of content let the image take up relatively larger space (or decrease the amount of text).

Example: In the expiring form, a larger image has been chosen which will "future-proof" the appearance when the new design applies and the text becomes bigger.

Did you find this page useful?
Thank you for helping us!
Page responsible:polopoly@kth.se
Belongs to: KTH Intranet
Last changed: Oct 29, 2018