Images on the web

Choose the right image

Decide what you want the image to convey. Should it strengthen a message, convey a feeling or simplify and clarify something that is difficult to explain? 

Use complementary text

Do not use images as the only way to convey important information. Users who depend on screen readers and point display, for example, need descriptions of all non-text content. This includes, for example:

• Pictures (except those used only for decoration)
• Diagrams
• Animations
   

Describe the content in sufficient detail for those who only receive the text description. Work from the user's needs and the purpose of the content.

The law requires: describe all non-text content with text (Webbriktlinjer, in Swedish)

Avoid text in images

Text should be written as text, not put into images. Text in images causes problems for, for example, screen readers, those who need a bigger text in good quality, and those who use smaller screens.

Colours

Feel free to use colours, but do not allow colour differences to be the only way to distinguish information but supplement this with, for example, text, pattern or any other visual indication.

The law requires: do not use colour alone to convey information (Webbriktlinjer, in Swedish)

Alt texts

According to the web directive, images that are relevant to understanding the content of the page must have a descriptive text, a so-called alt text. This is especially important for those with impaired vision but search engines also use the alt text to get more information about what the picture represents.

If the image is only decorative or renders what is also found in text on the page, avoid adding alt text.

Image sizes

Do not use too large images on the web, ie heavy image files. For visitors, it decreases page speed, especially on poor internet connections. It also degrades the ranking of the pages in the search engines.

Optimize the images for the columns they fill on the web pages. Images that are wider then the column widths will be scaled down on the page, but they remain in their original size in the background. See this page for column widths in pixels on KTH pages .

For example, the right-side body part of a page with a left menu is 868 pixels wide. In other words, an image to be displayed in that area does not have to be wider than that.

In some contexts, the image always fills the full column width regardless of size. This means that too large images are scaled down and too small images are scaled up to match the column width. In mobile phones, the entire site is displayed in only one column. This means that the width that applies to the mobile screen affects the reproduction of the full-width images. Images that are wide enough for a narrow slot on a computer can lose sharpness when they fill up a high-resolution mobile screen.

One recommendation is that images that are used for a column solution in desktop view but take up full screen width on a mobile phone should be 400-500 pixels wide. Even if they do not require that size in computer mode and are scaled down in such a view, they will need the larger size when taking up full width on mobile.

Test your web pages on a mobile phone. If images that fill the full width of the mobile screen are blurry, they should be uploaded in a larger size.

Editing images in Photoshop

• Export images, do not use save command. Select the option "Export as ..." and not "Save as ..." when the image is to be published on the web. The Save option retains unnecessary information in the image.
• For jpeg images, select a quality of about 60-70 percent in the export box. Note that it is by standard regarded as high quality. It is fully sufficient in almost all contexts (provided that the original image is not of low quality) and shrinks the size of the image significantly and increases the performance of the web page.
• For jpeg images, select in the export box that so-called metadata should not be included with the image.

Start images for media players

In case you work with a media player with the option to use a special poster image displayed before the visitor starts the player, this start image needs to have the same aspect ratio as the media player. However, the player adjusts according to the proportions of the video and these may vary. In other words, you need to edit the startup image to match the ratio of the video.

The two most common ratios here are 16:9 (Youtube) and 4:3. In other words, if a video has a 16:9 aspect ratio and the starting image is 160 pixels wide, it needs to be cropped to a height of 90 pixels.

Here is a small guide for suitable image sizes given the location of the media player on a web page and the ratio of the video.

Full-width media player in desktop view

Video format 16:9: Start image 868 x 488 pixels

Video format 4:3: Start image 868 x 651 pixels

Column media player in desktop view

Video format 16:9: Start image 500 x 281 pixels

Video format 4:3: Start image 500 x 375 pixels

So it is the proportions in the picture that are important here. Not the exact image size. The image will be scaled up or down in size proportional to the space the media player takes up in different display modes.

What images can I use?

It is important that KTH is entitled to use the images. It is forbidden to take other people's images from the web and for your own use. Neither can you take someone else's image and edit it.

You must also ensure to meet the requirements of the General Data Protection Regulation.

General Data Protection Regulation (GDPR)

KTH's image bank contains images that can be used for KTH's own activities.

KTH images and image bank