Have you ever been on a website before where the page took ages to load? One of the main culprits of slow page loading time is images. We take a look at what you can do to better optimise your images for your website.
Saving an Image for Web
The first thing to do is to look at the size of the photo you will be using. Let’s take this photo as an example.
This photo, straight out of camera has a file size of 5mb and dimensions of 7360 x 4912 pixels. This is HUGE! Way too big for the web.
Bring the photo into Photoshop. Go to File > Export > Export As …
Here we can change the file format, image size and image quality. Your images size will depend on where you are using the photo. For example, if its a photo for a thumbnail for your blog post it may be something like 300px x 200px. If it is a big hero image on your homepage it may be 1920px in width. It can be hard to judge what image size you should be using. Especially with many screens now packing in more pixels such as Apple’s retina screens.
You should aim to keep the file size as small as you can whilst keeping as much quality in the photo as you can. You can see the file size in the green box as demonstrated above.
To do this we can change the file settings (Format & Quality) and image size. You may have noticed the ‘Size and Suffix’ box in the top left (orange box). This is useful if your website supports retina images. Once you have made all your changes you can export all your images using the export all button in the bottom right.
Retina images
As mentioned earlier in this post, many screens have different screen sizes. To make the most of this some websites have the ability to serve these devices a larger image so it looks better on the bigger screens. If your website has support for this you can save another image easily within this export window.