What is the best file size for images on a website?

September 22, 2022

This is a step-by-step guide you can follow when preparing images for your website. It’s quite detailed because I also wanted to explain the words and terms to make this guide as helpful as possible. Stick through, and I am sure you will have great results!

Let’s begin with… there is file size and file size!

I’m aware this will probably sound super confusing, so let me clarify: 

  • we can say file size and refer to the weight or volume of the file on our hard disk in MB (MegaByte). 
  • or we talk about file size and refer to the actual file dimensions in a unit such as mm, cm or pixels.

The file weight is most important for website performance, but to control that, we have to work with the file dimensions, file format and file optimisation. 

Why is it so important?

Your website’s speed matters tremendously for the google gods. Larger, heavier pages load slower. And because images are accountable for 70% of the weight of your pages, it is evident that image optimisation plays an essential role in website optimisation. 

Not only does google hate slow websites, but so do your visitors. The quicker a page loads, the more likely a website user will be happy. It is stated that a 3% decrease in page load time leads to a 3% higher conversion in webshops. 

However, of course, it is not only speed that counts, the quality is also essential. As I work a lot with photographers and image makers, I say it is extremely important! 

Your images should be as small as possible in file weight but with optimal file dimension and the best possible image quality. 

Let’s start with the basics.

What is resolution?

Digital images are made of pixels, px in short. A pixel is a tiny square of colour. 

When you zoom in on an image file, you will see the pixels in detail.

Resolution is a word often used to describe the weight of your images. But in the true meaning, it only represents the number of pixels. We can talk about resolution in terms of dimensions in pixels and pixel density

Dimension in pixels is the total amount of pixels in the width or height of a file: for example, 1000×1500 px. This is the same as file dimensions.

Pixel density is the number of pixels in a specific area. An example, 96 ppi means there are in total 96 pixels in one inch. 

When we prepare our images for a website, we take the file dimensions in pixels. 

So how do you save your images? Let’s break that down in steps:

  1. Determine the optimal file dimensions in pixels
  2. Decide which file format you will be using
  3. Check the image quality and the file sizes
  4. Collect and rename your files
  5. Save your files with the selected specifications
  6. Make the file size even smaller with an image optimiser

1. How to determine the optimal file dimension in pixels

The best file dimension is as close as possible to the image’s actual size displayed on the website screen. But screens are so different, so this requires a little thinking.

In 2021 the most common screen size was 1920×1080 px or smaller, which is a good reference point for website design.
2560×1440 px is coming closer. But do not only think large: 60% of website views are on mobile devices, and those screens are much smaller.

So although screens are increasingly getting larger, I suggest you use a screen width no larger than 2000 px wide. And in fact, the content width of your site is often less than that, usually no larger than 1500 px. So you should take this into account as well.

This picture shows screen width and content width on a website.

An image in the background of your website may be full screen width, but images in the body layout do not exceed content width, and some are not even displayed at half of that size.  

You can look up your sites content width in the WordPress dashboard:
WordPress Dashboard ▸ Appearance ▸ Customise ▸ General Settings ▸ Layout Settings

For the best results, you should determine the optimal pixel dimensions for each image on your site (or at least 3-4 different ones) and resize your images accordingly.

2. How to decide what is the right file format

Image files come in various formats, each optimised for a specific use. The most common ones are JPG, PNG, GIF and SVG.

The file format will significantly impact image compression (how small the final file is on your hard disk), but there are distinct differences when using specific formats. I will explain them in short here.


Best used for photography and can be compressed a lot. When you save a JPG, you can choose the image quality; in example, 6-8 (jpg medium), 8-10 (jpg high) or 10-12 (jpg best).

A lower number results in a smaller file but decreases image quality. So photographers and image creators may prefer a different setting than many others. Still, at the same time, they tend to have more images on their websites, so compression plays an even more significant role. 


When you save an image with transparency, you choose PNG. This format tends to scale better, which is perfect for logos and small graphics. PNG uses less compression than JPG, and you should avoid them for photographic images without transparency.


Nowadays, we use GIFs mainly in animations. They can have a limited colour palette, which is good for compression, and thus are great for graphics and images with limited colours. Photography in GIF animations can result in large files; if that is the case, saving them in video formats such as MP4 is better.


SVG stands for scalable vector graphic, meaning that filesizes are small yet scalable without losing quality. SVG does not have a fixed pixel dimension. 

Do not just use any SVG file; they are code-based and can also transfer unwanted code to your site. In most cases, a plugin is required to enable the format before you can import SVG into WordPress. I use Divi ToolBox to do this.


WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser. It can also contain transparency.

WebP cannot be opened or saved in every imaging software. In many cases, Webp will be auto-generated by image optimisation or caching plugins on your website. If you do not have automatic WebP conversion, or you want full control, you can convert to Webp manually with a designated tool such as Sqoosh.App before uploading the image files to your site.

3. For best results always check image quality and file sizes

If you have many images and you are a photographer or designer, it is worthwhile to test and review the quality of your images.

Since the goal is to make your files as small as possible in MB, you are looking for the jpg compression setting that compresses the file the most without compromising quality. Images with large amounts of details or gradients may require a little higher quality setting.

Ideally, you want images to be at most 300-400 KB in file size, which is only for full-screen images. Other images should be much smaller. I know this does not sound like much. But the aim is to keep the size of a webpage under 2 MB. Anything over that is not advised for page speed. Keep checking those file sizes to avoid images slowing your pages down.

Make sure your images look good, and find the files that are still too large to see if you can resize or compress them further.

4. Now collect and rename your files

First, gather all files you will be using on your site, and make sure all your images are cropped and in sRGB color. Then rename your files.

Proper file names are good for SEO, so making them informative and helpful is good. I advise you to create a file name with a good image title, followed by some unique identifiers if needed. Google likes dash more than underscore. Remove other special characters.

When you upload to the media library, WordPress automatically replaces spaces with dashes in the files but not in the title attribute in the media library. So I leave the spaces in the filename, which is carried over nicely to a readable image title.

man with green jumper-001.jpg
is preferable to

5. Save your files with the selected specifications

Always save a copy of the original image files before you resize and save with a different jpg setting.

A few things are quite important:
– Avoid upscaling files. If an image is too small, try to find an alternative.
– Only crop and compress a file once, or your images will decrease in quality.
So if you want to change the file dimensions or jpg settings, go back to the original image files.

You can save multiple versions of an image file (for example, large and small) if you are still determining how you will use it on your site or if you want to be able to choose later.

NOTE: if you convert to WebP in the next step

For general image quality, you apply WebP compression to an already compressed JPG or PNG. That’s fine.

If you are looking for the finest image quality you should leave the images uncompressed in this step and then convert them to WebP individually in Sqoosh. So save the images as png, jpg 12 or in their original format, and then go to the next step.

TIP: tools for resizing

Your image files can be resized and re-saved from iPhoto, Photoshop and many other photo editing tools and apps. One that is worth mentioning is Resizing.app, an online tool that can be used to resize and crop gifs, pngs, jpgs and tifs.

My favourite software is Adobe Bridge because I can set presets for different projects and resize and rename files in batches. This is a real timesaver!

6. Make the file size even smaller by using an image optimiser

Innovative online tools and file formats can compress your image files even more without (or with) quality loss. I suggest using just one option: optimising the PNG/JPG/GIF or converting to Webp.

  • If you optimise your images without converting to Webp, you can use the online tool TinyPNG for smart PNG and JPEG compression and conversion. You can compress up to 20 images per time for free, and the results are excellent. 
  • Before converting your images to the optimised Webp format, first, check if you are using image optimisation plugins on your website because they may handle Webp image optimisation for you. To create Webp files manually, a great online tool is Google’s Sqoosh.App. With this free tool, you can only convert one image at a time. But it’s a great option, especially for the larger files on your website, such as full-width and full-screen images. I totally love this app because it gives you full control and the best compression results for your images.
    Elegant themes has a great guide for using Sqoosh.App

Let’s recap this for you:

  • First, determine the screen width you want to target and lookup the site content width here:
    WordPress Dashboard ▸ Appearance ▸ Customise ▸ General Settings ▸ Layout Settings
  • Now determine your images’ ideal dimension in pixels and the correct file formats. TIP: use the cheat sheet and adjust it for your situation.
  • Perform a test to make sure you are using the best possible setting.
  • Collect your image files in sRGB. Now is a great time to give proper file names.
  • Save the optimised images. Always save the optimised files as a copy so you never lose the original.
  • Finally, you can use an image optimiser tool to make the even files smaller. 

Cheat Sheet

Type of image / placementWidth in pixelsFile formatNotes
Logo100% of placementpng or svgMake versions for different placements and background colors
Flavicon / app icon512×512pngHas to work with rounded corners for mobile device app icons
Screen width2000 to 2500 jpg/webpjpg compression level medium (6-8), or jpg 12 for manual webp conversion
Site width1200 to 2000jpg/webpjpg compression level medium (6-8), or jpg 12 for manual webp conversion
50% site width600 to 1000jpg/webpjpg compression level medium (6-8), or jpg 12 for manual webp conversion
Product images800 – 1000jpg/webpjpg compression level medium (6-8), or jpg 12 for manual webp conversion
Gif animationmax 800 pxgifKeep file size under 1 MB
Illustrationn/asvgPlugin required to use svg
These suggestions may only be ideal for some, so always review them to find the best setting for your work.

TIP: You can download the free cheat sheet and add your personal specifications.

The links in this article

Divi Toolbox
Guide for using Sqoosh.App


When you get into the nitty-gritty, there is much to say about images. I am always very focused on them because of my digital imaging background. But I know from experience that finding the right balance between quality and filesize always pays off and improves your images’ quality and loading time.

It is always possible to use WordPress plugins to handle image optimisation for you. I do not discuss this in detail here because I strongly believe that you will not get optimal results if the files you upload to your site are not resized and saved in the right formats. In fact, it is a mistake to think that if you use a plugin you do not need to prepare your image files with proper specifications.

Finally, the techniques described above do not require any paid plugins or software. So it is available for everybody!

I hope this serves you well 😉 Please get in touch if you need help or have feedback or suggestions.

What is the best file size for images on a website? is an article written for Your website made easy

Want to learn more?

Sign up and receive my newsletter with inspiration and tips & tricks in your mailbox. I'll promise to send you only the good stuff.

Continue reading

We need social proof (and how to get it)

We need social proof (and how to get it)

Having reviews and testimonials is invaluable for your sales. According to BigCommerce, 72% of consumers say positive reviews and testimonials make them trust a business more, and 88% trust online reviews as much as personal recommendations. That's a huge amount of...

Getting started on your website made easy

Getting started on your website made easy

We are going to make this fun! Starting something new can be a bit of a challenge. And starting a new website very much so. You can easily get stuck because you do now know where to begin and what to do. Or you are overwhelmed by everything. But there are ways to make...

How to work in WordPress without stress

How to work in WordPress without stress

You ever get WordPressStress? I bet you have all been there: you just want to change something on a page quickly and... BOOM... something goes wrong and messes up your layout or text. And the doorbell rings, the milk boils over, or you're next meeting is starting in 5...

What is a website system?

What is a website system?

Back in the day… The first websites did not do nearly as much as they are doing today. Websites contained some text, maybe a few pictures, and your contact information. Wowie! I am talking 1994; that was when I first saw an actual website. It was quite impressive back...