Format and weight on images
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.
The importance of high-quality original images
To compress an image without losing too much quality, it is important to start with a high-quality original image. An image that is already low resolution or blurry will be even worse when compressed. Therefore, always use the highest quality images possible before optimising them for web publishing.
Editing images
WebP
The WebP image format provides a significantly smaller file size compared to JPEG images. This means that the images load faster and give visitors a better experience. Use WebP images if you have access to software that supports the format.
In Photoshop, select the WebP format by saving your image as a copy. You can find the WebP format in the list of file types in the save dialogue. In the next step, choose the image to be "Lossy". Set the image quality to Medium. Test and see how the image look on your page. If the image is not good enough, you can increase the quality, but the image should not exceed 100 kb.
In Affinity Photo, select the WebP format by exporting the image. You will find the WebP format in the list of file types in the next dialogue. Choose medium quality, i.e. about 50 percent. Test and see how the image look on your page. If the image is not good enough, you can increase the quality, but the image should not exceed 100 kb.
JPEG and PNG
- Export instead of saving: When saving JPEG and PNG images for the web, use ‘Export as...’ and not ‘Save as...’. The save option retains unnecessary information in the image and may make the file larger than necessary.
- JPEG: When exporting, choose a quality of around 50-60 per cent. This produces a high-quality image that is sufficient for almost all purposes (provided the original image is good) while reducing file size and improving web performance.
- PNG: Use only for images with flat colours and hard edges, such as logos and illustrations without gradients. For photos and images with many shades of colour, JPEG or WebP are better options.
By using the right format and optimising images properly, we can ensure a faster website and a better experience for our visitors.
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 920 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 920 x 518 pixels
Video format 4:3: Start image 920 x 518 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.