Best size for your website images, how to do it & why it’s important
Simon posing with brown bracken we collected in South Devon. Don’t get caught out by massive images on your website - make sure you optimise them!
What’s the best size for web images on my website, why does it matter & what can I do about it?
As a website design studio in South Devon, designing stunning websites for creatively-inclined businesses across Devon and the UK, we ran a session with our Website Club members, talking all about good web images on your website.
It’s easy to take web images on your website for granted - surely it’s just a case of grabbing an image, uploading it and then walking away?
Wrong! Adding images to your website indiscriminately can cause a huge amount of damage to its performance and create a poor user experience.
A few, simple, careful steps when it comes to uploading images in the right format can improve how your website ranks in search results and increase the likelihood of conversions like enquiries, sales and subscriptions.
This is our wee guide on the importance of optimising web image on your website, including tips and simple steps on how to shrink and compress your images.
We help you understand why taking care of these small details and tasks can add up to make a big impact for your website over time on Google and with your website visitors.
Check the contents above for the areas we unpack further when it comes to optimising your web images.
1. Why does the size of web images matter on my website?
We've probably all been guilty of taking an image (whether from a professional photo shoot or a stock image from Pexels or Unsplash), downloading it and then uploading it straight onto a website without doing anything else.
There are several reasons why this is a bad idea.
These images are usually very, very large - often more than 5MB, which is huge for website purposes. And although a website may allow you to add a 20MB image, a collection of massive images like that will quickly start to slow your website down.
Specifically, lots of big images can reduce your page load speed, which is a factor in how well (or not) a page ranks in a search engine result.
Equally, your page load speeds impact the user experience visitors have on your site - if people have to wait a long time to view anything, that’s going to result in a bad experience.
A poor on-page experience will result in a high percentage of people leaving your site without viewing anything else (known as the bounce rate), which again is bad for your search engine ranking.
Research shows that a page load longer than five seconds will result in people clicking off your site out of frustration. That's a potential customer you've lost because you’ve not taken a few, simple steps to reduce the size of your web images on your website.
2. How can well-optimised web images help my website?
What we want to do is use good web images to help people stay on our site for as long as possible. This increases their chance of finding helpful things, or answers to their questions, by remaining engaged.
This applies whether you're a service based business or a product based business. And there will probably be different outcomes for each of those.
A service based business wants people to dwell for a longer time on its website in order to understand the value and impact of what’s on offer, as well as resonate with its values and way of working. As such, you wouldn’t want visitors to get frustrated as they're navigating around the site.
If you're a product based business, you want customers to check out as quickly as possible by finding things that they need in the shortest amount of time possible. It’s more transactional.
Overall, we want people to have a really good experience on our website and help them feel more engaged, as well as build trust with people.
Images are a really great way to achieve those outcomes, because an image can help connect us quicker through visually what we see.
As we’ve mentioned, nicely optimised images help ensure your site loads promptly, which is a factor in search engine rankings. The faster your site loads, the better you can potentially rank in search results.
Bear in mind that there are a lot of different factors that contribute to your ranking position. Site speed is one of them, but not necessarily the only one nor the most important. This is why doing lots of different things well on your website feeds into the wider picture when it comes to search rankings.
3. How can web images help with the accessibility of my website?
In the same way that Google is scanning your website for small signals that feed into how relevant a webpage is in a search result, the same goes for accessibility.
People with visual disabilities use accessibility readers to scan your website, converting text to speech.
Research shows that 19% of working age adults in the UK live with a disability. More than two million people in Britain live with significant sight loss, and in terms of colour blindness, one in 12 male adults and one in two adult females are affected.
As such, the accessibility of web images is really important. If the web images on your website are not scannable, those with visual impairments will not get the same impact from your website. That might be a potential lost customer.
The key point is to make sure that our websites don't discriminate against people who perhaps need to use those tools and technologies to navigate around the site. Optimising web images is one of the ways we can safeguard against this.
Read more on optimising your images: SEO Starter Guide from Google
4. What is the environmental impact of web images on my website?
If you’re like us, the environment is a really important aspect of what we do in our business.
We need to be mindful that digital assets on the internet all have to be stored somewhere. As such, they all take up server space somewhere that forms the cloud.
That cloud needs electricity to power the servers that provide the storage. The bigger your web image files are, the more space they will be taking up on that server, which will be located somewhere around the world. The more space used for storage, the more energy will be required for powering the servers, plus the air conditioning to prevent them from overheating.
As a side note, Squarespace doesn’t current provide sustainable hosting using green energy. This why we offer carbon offsetting as part of our website design services. We think that it’s really important because images play a part in terms of what we do online and how that affects the environment.
5. What’s the best size for a web image on my website?
When we talk about the size of an image on a website screen, they're made up of pixels. And we want to make sure that the image has sufficient (and not more!) pixels in order to appear correctly on the screen.
This means they don't need to be huge - stock or high resolution images from your photographer can often be more than 6,000 pixels wide. This is far too big for your website!
Even a banner on your website, which is an image that stretches and to the edges of the screen, doesn’t need to be more than 2,500 pixels wide.
Best practice width for other general images on a webpage is about 1,500 pixels. The height then follows automatically in proportion, following the aspect ratio of the image.
So web images don't need to be really huge, but there’s a lower limit, and if they're too small they become grainy and distorted.
In terms of the type of image file to use for web images on your website, JPG (or JPEG) is best for images and PNG for things like logos (which may need the transparent background a PNG provides).
Because of their different compression processes, PNGs are usually larger in size than JPGs, so it's usually better to upload an image as a JPG rather than a PNG. And within all of that, what we're aiming for is that our web images be no bigger than 500KB.
Our rule of thumb is about 400KB, to balance size and quality. Some developers advocate 100KB, but we find that to be too small and quality suffers.
As you can probably tell, it's a bit of a balance: we don't want is to have really poor quality images on our website, but equally we don't want them to be so big that it's slowing down the site.
6. What are the best steps to take to optimise web images for my website?
As we’ve mentioned above, we optimise an image firstly for its width, which is measured in pixels.
Its height (also in pixels) follows suit because the aspect ratio will usually stay the same (if not, the image will be distorted - always maintain the aspect ratio when compressing images).
The second aspect with optimising web images is reducing or compressing the file size. This relates to how much space that image takes up on your hard drive or on the server that hosts your website.
We will show you a couple of really handy tools that we use and are generally free. Most of them don't require an account, so you can use them straight away.
We’re not going to cover things like Adobe Lightroom or Photoshop, and if you want to use tools like that, they do a great job and they give you a bit more functionality.
7. How to use Squoosh to optimise your web images for your website
One thing to bear in mind with web apps is to avoid using insecure apps or ones that could potentially expose you to viruses or malware.
Squoosh is developed by Google, so is safe, legitimate and very easy to use.
Simply navigate to squoosh.app and then you can drag and drop or upload an image from your system.
Once uploaded, in the bottom left hand corner you can see the original details of the image you uploaded, such as its size.
On the right hand side of the screen are the settings that we'll use to compress the file.
In the next step, simply focus on two things, because there's quite a few other details.
The resize toggle allows you to change the width of the image, so stick to 1,500 pixels, as we mentioned, unless it’s a larger banner, in which case, go up to a maximum of 2,500 pixels. Make sure you keep the aspect ratio to avoid distortions.
At this point you'll see an initial readout of the potential file size in the bottom right-hand corner. If you want to adjust the file size, use the slider and aim for between 400 to 500KB.
Once you're done you can download your optimised image using the blue button at the bottom of the screen.
There's another free web app called Adobe Express which is very similar to Squoosh - very simple, pared down - which I sometimes use. If you're a bit more advanced, you could use Adobe Lightroom or Photoshop.
8. What’s the best way to name web image filenames?
Once you've got your image downloaded (width sorted, file size reduced and the right proportions) the next thing to look at is naming the file.
What we're aiming to do with web image filenames is create a small signal to Google of what the page is about.
Google takes lots of different things into account when it comes to its search and ranking algorithms; the filename of a web image on your website is one of them and is helpful to add into the mix.
Equally, clear image filenames help people using accessibility software which gives them audio readouts. As such, think of the image filename as a signpost which helps Google and your users understand what the page is about.
The thing to avoid with filenames is getting sucked into all the technical details and intricacies. I'd encourage you to start by asking what is the purpose of the page on which the particular image will be.
Depending on what that page is, you might have different outcomes for visitors, such as driving sign ups for a course; introducing yourself on your about page; or talking about your services.
The purpose of the page is going to impact how we name the file. In essence, the way we name images should tie in with the purpose of the page where they end up.
Practically, try to pinpoint one keyword for that page. If you're a garden designer, it's likely that one of your keywords is going to be garden or perhaps garden design. You can have two together, which is fine, or perhaps a location, like London.
Read more on naming web image filenames: How to name images for SEO from RankMath
9. Examples of what to avoid when creating file names for your web images
Filenames with numbers such as IMG_948392.jpg doesn't say anything helpful to Google or a human being. It gives you no indication of what the image is about and what the page is about.
Filenames containing emojis are definitely a no-no for the same reason as numbers above.
Filenames with anything other than hyphens between the words similarly make it hard to read them, so try to use hyphens between words in a file name rather than an underscore. Also don't run all the words together into a big long sentence with no spaces.
Equally, avoid using uppercase when you're naming your filenames.
Lastly, in terms of keywords, don't go to the opposite extreme and stuff every single keyword you can think of to your image filename so it's suddenly 30 words long.
Ideally your filename should be a maximum of six words long, each of them separated with a hyphen, and don’t forget to check for spelling and typos.
So to recap, think about the purpose of the page first and then name your file with that in mind. The page will influence what you name your image to the extent that you might use the same image in different places but change the filename, adjusting it for each particular page.
10. What is an image alt tag and how do I write good alt text for my website?
The filename of an image is important and alongside that we should add alt tags to web images where possible.
An alt tag is a short piece of text embedded within a web image on your website. If a browser is unable to load the image, it will display the alt text instead, which is particularly important for visitors using accessibility screen readers.
Google also uses web image alt tags as a minor signal in its search ranking positions, so it provide a small signpost as to the content and relevance of the overall page.
Best practice when writing alt text is to describe what's in the image, so ideally it needs to describe and contextualise the image.
A good balance between the detail of the image and its context gives the right signals to Google as well as visitors, whether they are using accessibility readers or find the page in a search result.
The main thing to remember with alt text is that it should be no longer than 125 characters - you can find lots of free character counter tools online to do this.
In contrast to web image filename, alt text can be in normal prose with spaces between words, but don’t include things like ‘image of’ or ‘photo of’, as this is superfluous.
Overall aim to help people understand what in the image as well its context in relation to the webpage its on - again, have in mind the purpose of the page.
If you use Squarespace as your website platform, remember that you cannot add alt text to banner images, so make sure you’ve sorted out the filename before uploading it.
Read more on writing alt text for web images: Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO by HubSpot
11. What is a helpful workflow for optimising web images on one of my website pages?
A helpful way to tweak a webpage on your website is to do a quick illustration of it first. Plot what images you've got where and decide what you want to update, which avoids confusion or becoming overwhelmed.
The same applies if you are a product based business and are looking to overhaul the images that go with your products.
Use boxes on your sketch to audit what images you've got, and where; and if you've got duplication of images. Use this step to help bring logic and order to the page, ensuring it reflects the purpose you want for it.
Before uploading any image onto your website, get them all into different folders on your computer or the cloud and then you can batch some of the steps we’ve already mentioned. By using folders that relate to pages or otherwise, you can create a systematic workflow.
We encourage you to try and do one page a month or some of these tasks on a monthly basis, so you get on top of it without expending too much time in one go.
By doing them on a regular basis, you’ll get the impact you are looking for - improving your search appearance on Google takes time, so start small and start now!
12. Why optimise images if they are a minor search ranking signal for Google or a search engine?
Once you start looking at your images and how you optimise them, it gives you a better perspective of your overall marketing. It makes you think about the purpose of the page and who's going to view these pages.
By engaging with this process of improving your web images, you're putting yourself in the shoes of people who might view the page or might buy your product or service.
Although it can seem a bit fiddly, small tweaks to images feed into the bigger picture and can get impact for you.
That’s it for this time - we’ve covered pretty much everything you need to know as a small business about why it’s important to optimise images on your website and how to go about it. If you’d like to learn more from us on website design or get visual inspiration, follow @wildings.studio on Instagram. You can read more of our blogs on website design too.
