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 and 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 am 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 Kb or Mb.
– or we talk about file size and refer to the actual file dimensions in a unit such as mm, cm or pixels.
It’s the file weight that matters for websites, but to control that, we have to work with the file dimensions and file format.
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.
What is resolution?
Digital images are made of pixels, px in short. A pixel is a tiny square of colour.
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:
- Determine the optimal file dimensions in pixels
- Decide which file format you will be using
- Check the image quality and the file sizes
- Collect and rename your files
- Save your files with the selected specifications
- 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.
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 not included because image optimisation in WebP format is often performed with plugins on your website; therefore, it does not change your workflow here. WebP cannot be opened or saved in your general imaging software.
3. Check the image quality and the file sizes
If you have a lot of 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 do not want images to exceed 300-400 Kb in file size. 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’s the time to collect and rename your files
First, collect all files you will be using on your site, and make sure all your images are cropped and in sRGB color.
Proper file names are good for SEO, which carries over to the image titles, so making them informative and useful is good. Google likes dash better than underscore.
man-with-green-jumper.jpg is preferable to mgrjmp_007.jpg
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 not sure how you will use it on your site or if you want to be able to choose later.
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.
My favourite software is Adobe Bridge because I can set presets for different projects and resize files in batches. A real timesaver!
6. Make the file size even smaller with an image optimiser
Innovative online tools can compress your image files even more without (or with) quality loss. My favourite is TinyPNG, for super smart PNG and JPEG compression and conversion. You can compress up to 20 images per time for free, and the results are excellent.
Let’s recap this for you
so you’ll always know what’s the best file size for images on a website
- 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.
|Type of image / placement||Width in pixels||File format||Notes|
|Logo||100% of placement||png or svg||Make versions for different placements and background colors|
|Flavicon / app icon||512×512||png||Has to work with rounded corners for mobile device app icons|
|Screen width||2000 to 2500||jpg||jpg compression level medium (6-8)|
|Site width||1200 to 2000||jpg||jpg compression level medium (6-8)|
|50% site width||600 to 1000||jpg||jpg compression level medium (6-8)|
|Product images||800 – 1000||jpg||jpg compression level medium (6-8)|
|Gif animation||max 800 px||gif||Keep file size under 1 Mb|
|Illustration||n/a||svg||Plugin required to use svg|
TIP: You can download the free cheat sheet and add your personal specifications.
The links in this article
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 speed always pay off and improves your website speed and the quality of your images.
This article is here to help you create great-looking images and faster websites too!
Please get in touch with me 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