Image formats and their uses
JPEG – for photos, providing best quality to file size ratio. Not ideal for graphics.
PNG – for graphics, logos, charts etc. Not ideal for photos
SVG – for logos, small file size and scalable
GIF– similar uses to png, sometimes used in animated form (with caution)
Image sizes
When publishing images on our websites there is a balance to be struck between image quality and file size. Images on a web page add to the amount of data required to download and view the web page – the larger the file sizes, the slower the page loads, especially over slower internet connections. Slow page loads are a negative factor in SEO page rankings as well as affecting user experience and brand perception.
Around 50% of our site visitors are using our sites on mobile devices. The users that are using computers use a maximum screen resolution of 1920 pixels wide. Even at 1920 pixels wide there are very few images that will display at this full width. We should aim for a maximum image width of 1000 pixels wide or half that for images used within the body of an article. Some of the images currently on our site are 5,000 pixels wide.
Using the BBC website as an example, the images used on their site tend to be measured in KB rather than MB. On our sites we have some pages where there are multiple images of 5MB plus and in a few extreme cases 20MB.
How to optimise images for the web
You’ll need a photo editing application e.g.
-
Adobe Photoshop
-
GIMP (open source photoshop alternative)
-
Photos app (comes with Windows 11)
If you’ve not used Photoshop before the Photos app may be a better option as it’s easier to use for basic image editing.
Once you have access to one of these you can look at editing the following:
Image size (scale image)
Look at reducing the pixel dimensions of the image and aim for a width of around 1000px for banners and landing pages and 500px for use in the body of an article.
Depending on the tool you’re using you can either specify the exact pixel width or resize by a percentage value. Remember to ensure that the height is also reduced by a relative value otherwise the image will become distorted (this should happen automatically in most cases).
For some web components there may be an optimal aspect ratio or dimensions specified e.g. blocks on the sportscotland website generally use 16:9 or 640x360px. When there are specific width and height values to use, the simplest option is to scale the width and then crop the height of the image if required.
Image quality (compression)
When you save a newly edited image, you should be presented with an option to choose its quality. This is often presented as a slider with options between 0 and 100%. There is a tradeoff between quality and file size, with higher quality images being larger files. This may affect different images differently so it can be useful to experiment. In general, somewhere in the region of 70-80% provides optimal results.
Save file using appropriate file type
Make sure you save the file using the most appropriate file type – see above.
Saving a photo as a .png will result in a larger file than the same image a .jpg with no improvement in quality. Similarly, a graphic saved as .jpg will result in a larger file than it would as a .png.
Naming image files
It’s best to give image files a descriptive filename. This may include the names of any people in a photo. Please avoid retaining the filename used by the camera eg DSC3698752236.jpg
Giving image files descriptive names helps with file management, browsing and allows files to be found in searches. This can be useful when there is a subject access request or other requirement to find photos relating to a specific person or subject.
Descriptive filenames are also used by search engines to help them understand a page's content and may contribute to ranking and visibility in image searches.