Format and weight
A website with heavy image files takes longer to load and also ranks lower in search engines. Therefore, images need to be optimised to work well on the web.
Avoid heavy images
Do not use too large images on the web, i.e. too heavy image files. For visitors, the pages get slow to load, especially on mobile phones and poorer internet connections. Pages that perform poorly in download time also rank lower in search engines.
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.
Image sizes
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 918 pixels wide. In other words, an image to be displayed in that area does not have to be wider than that. But a width of 1 000 pixels will be properly resized and is of course easy to remember.
Full width pages with no left menu have a width of 1 248 pixels.
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 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.
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 918 x 516 pixels
Video format 4:3: Start image 918 x 688 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.