Whether you already have a functioning website, have worked with another agency to create a new one or have been collaborating with team KW to create a shiny, fresh, sustainable one, there are a good number of things you will need to know how to do when a website goes live.
With KW clients all getting an in-person go-live walkthrough, access to a handover guide, and real-time step-by-step video how-to’s, we aim to limit the unknowns. But one that does trip people up occasionally is using imagery incorrectly on their websites.
For example, uploading imagery that is too big can max out your server space, affecting how quickly - or not - your website loads, which in turn can affect your user’s experience and even create loading errors. Not cool.
You see the importance of learning how to use image formats and sizes correctly. This is what I’m going to cover here, as I believe it’s a very important step in website development once we’ve handed the reins over to you.
What format should I use?
There are many different formats of images and this can feel quite overwhelming when trying to decide what to use - if you’re unfamiliar with the terminology. Let’s go through the main three that are safe to use on your website and why we’d use them.
PNG
PNG images are the largest file type that you can use on websites. These support transparent elements and at the right size can be rendered fairly quickly. This file format is well supported both on and off the web, so if you’ve got an image you’re planning on using elsewhere other than just your website (which requires transparent elements) then this format is best for you.
| Size | ❌ |
| Compatibility | ✔️ |
| Transparency | ✔️ |
JPG
JPG (or JPEG) is a file format that is very well supported both on and off the web. This format saves space compared to PNG files, which we’ve just covered. With this image format transparency is not supported, this means JPGs are useful for all your standard web images which don’t have a need to be presented over the top of another element.
| Size | ✔️ |
| Compatibility | ✔️ |
| Transparency | ❌ |
WebP
This image format is the suggested format for websites, being roughly 20% smaller than even a compressed JPG; they are particularly suitable for use on websites where the user may have a slow internet connection. The size of the image is the most important factor when building websites nowadays as your website needs to load quickly. Where this image format benefits, is from supporting transparency and size, it does fall down on compatibility as some offline products may not support this format.
| Size | ✔️ |
| Compatibility | ❌ |
| Transparency | ✔️ |
For issues where you’d like an image to perform well on the web but be supported offline as well, you could employ tools on your website that convert images to WebP for use on the web. This leaves you with the ability to still access these images in their JPG/PNG formats for use elsewhere while keeping your site size down.
What size should my image be?
Now we’ve decided what format we’re going to use we need to figure out how big to make the image. But why should we need to consider this?
If you’ve got some photos from a photographer or a Stock website they could have a width of around 4000px which may not mean anything to you at the minute, but this, while being a high-quality image, would be a very slow image for a website to try and optimise.
As a rule, we tend to not use images bigger than 1920px in width, however, you can go to a maximum of 2560px width if needed.
I’ve created a little diagram below to show what image sizes should be considered for each use case.
If you need a tool to convert imagery to the best size for your use, a website I’d suggest is Image Resizer. This gives you the option of all popular file formats including the three we’ve looked at here, and gives you full control of the image size.
The post What format is best for images on the web? appeared first on Knapton Wright.