Best size for your website images, how to do it & why it’s important
To optimise website images, you should resize landscape images to a maximum width of 2,500 pixels and portrait images to 1,500 pixels, ensuring your file sizes remain under 500KB. Adding alt text to your images and descriptive, hyphenated filenames improves page load speed and search engine rankings. These technical adjustments help balance the quality of your images with site performance, enhancing your users’ experience and general accessibility.
Why image optimisation is essential for your website performance
Let’s talk 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.
Ten top takeaways for better website image optimisation
Aim for a maximum width of 2,500 pixels for landscape and 1,500 pixels for portrait images
Keep file sizes between 400KB and 500KB to balance quality and speed
Use JPG format for photographs and PNG only for logos or transparent graphics
Use Squoosh or Adobe Express to compress files safely before uploading
Name files with descriptive keywords and hyphens rather than generic numbers
Keep filenames under six words and avoid using uppercase or emojis
Write alt text that describes the image context for accessibility screen readers
Limit alt text to 125 characters and avoid redundant phrases like "image of"
Audit your pages one at a time to create a manageable, monthly workflow
Remember that faster loading speeds reduce your digital carbon footprint
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.
Key ideas:
Large files over 1MB significantly slow down page loading speeds
Slow sites lead to higher bounce rates and frustrated visitors
Google uses page speed as a factor when determining search rankings
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.
Key ideas:
Optimised images encourage visitors to stay longer and engage with content
Fast loading times build trust with both service and product-based clients
A smooth experience increases the likelihood of conversions and enquiries
Making your website work harder for you
Our studio helps design-conscious architects, garden designers and interior designers find their footing online. We specialise in creating websites that pair soulful design with rigorous SEO strategy to help your business feel at home.
If you want to refine your online presence, explore our website design services or browse more of our insights on SEO and Content Marketing.
Get in touch to discuss how we can help your brand gain clarity and attract the right clients.
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.
Key ideas:
Properly formatted images allow screen readers to interpret content for visually impaired users
Inclusive design ensures your business does not alienate those with accessibility needs
Search engines reward websites that prioritise accessibility
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.
Key ideas:
Larger files require more server storage and electricity to power data centres
Digital assets contribute to the overall carbon footprint of your online presence
Reducing image sizes is a simple way to practice more sustainable business habits
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.
Key ideas:
Landscape images should be no wider than 2,500 pixels while general portrait images suit 1,500 pixels
The ideal file size is around 400KB to ensure quality without the bulk
JPG is the preferred format for photos to keep file sizes manageable
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.
Key ideas:
First adjust the pixel width while maintaining the original aspect ratio
Next compress the file to reduce the amount of server space it occupies
Use free, reliable web apps rather than uploading raw files directly
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.
Key ideas:
Squoosh is a safe, Google-developed tool for resizing and compressing images
The app allows you to toggle widths and see real-time file size predictions
You can manually adjust the quality slider to hit the 400KB target before downloading
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.
Key ideas:
Filenames act as a signpost for Google to understand the purpose of your page
Choose one primary keyword that aligns with the specific content of the webpage
A relevant filename helps both SEO and audio readouts for accessibility
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.
Key ideas:
Never use generic camera defaults like IMG_9483 or include emojis
Avoid underscores or running words together; always use hyphens as separators
Do not stuff filenames with dozens of keywords as this can look like spam
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.
Key ideas:
Alt tags provide text descriptions that appear if an image fails to load
Effective alt text describes the visual content and its context within the page
Keep descriptions under 125 characters and use natural, readable prose
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!
Key ideas:
Sketch out your page layout first to identify which images need updating
Batch process your images in folders before you begin the upload process
Tackle one page per month to keep the task from becoming overwhelming
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.
Key ideas:
The process forces you to think deeply about your marketing and user journey
Small technical improvements accumulate to create a high-performing website
Putting yourself in the visitor's shoes leads to a more intentional website experience
Frequently Asked Questions
-
The most effective way is to use a compression tool like Squoosh or Adobe Express. By resizing the pixel width to between 2,500 and 1,500 pixels and adjusting the compression levels, you can often reduce a file from several megabytes to under 500KB with no visible loss in clarity on a standard screen.
-
Yes, though it is a minor signal. Google’s bots cannot "see" an image like a human does, so they rely on the filename and alt text to understand the context. Using descriptive, hyphenated keywords helps the search engine index your page more accurately for relevant queries.
-
JPGs are better for photographs because they offer higher compression, keeping file sizes small. PNGs are best for logos or graphics that require a transparent background, but they are typically much heavier files and should be used sparingly for large images.
Further reading on website design and SEO:
Optimising your images: SEO Starter Guide from Google
Naming web image filenames: How to name images for SEO from RankMath
Writing alt text for web images: Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO by HubSpot
About the author:
Simon Cox is the co-founding director (along with his wife, Rachael Cox) at Wildings Studio, a branding, website design and content marketing studio in Torquay, UK. He’s the writer and editor of the Wildings Studio blog which you’re currently reading. Simon is also responsible for the Wildings Studio content marketing services. Simon blogs regularly on topics to do with the core Wildings Studio services on branding, website design and content marketing (blogging). He’s passionate about helping small business develop great content that answers the questions people type in Google in order to get found online (SEO).
In this article:
Why image optimisation is essential for your website performance
Takeaways Nam tempor finibus lorem, nec varius arcu convallis sed
How can web images help with the accessibility of my website?
What is the environmental impact of web images on my website?
What are the best steps to take to optimise web images for my website?
How to use Squoosh to optimise your web images for your website
Examples of what to avoid when creating file names for your web images
What is an image alt tag and how do I write good alt text for my website?
What is a helpful workflow for optimising web images on one of my website pages?
Why optimise images if they are a minor search ranking signal for Google or a search engine?
About Wildings Studio
Thoughtful, beautiful branding and websites for design-led businesses
Wildings is a website designer for small businesses offering website design. Based in South Devon, UK, we deliver small business website design for design-conscious brands like garden designers, interior designers, architects, circular ethos restaurants, speciality coffee shops, organic cafés and boutique hotels.
