A Practical and Simple Guide for Anyone Who Loves Beautiful Images and Fast Websites
Images play a pivotal role in your website’s success. They can impact loading time, user experience, and search engine optimisation (SEO). In this article, you will learn step by step how to prepare images for your website, according to the method I use myself, which guarantees the best results.
At the end, you will find a handy Cheat Sheet and a list of links to the best tools.
Contents
- What is file size?
- What is resolution?
- The best dimensions for your website.
- How do I resize images to the correct size?
- What is the correct colour space?
- Which file format should I use when saving?
- How do I compress images?
- How do I optimise images for SEO (Google)?
- Summery: step-by-step guide for creating files for your website.
- Bonus: Cheat Sheet for images
- Glossary and overview of the best tools.
1. What is file size?
The file size of an image can be expressed in two ways:
- In weight: how much space the file takes up on a hard drive or in an email.
- In pixels: the number of pixels in the width and height of the image.
For a website, the weight is extremely important, as it determines the speed of your site. But to control this and ensure good quality, you work with the file size in pixels.
2. What is resolution?
Pixels are the smallest squares of colour that make up your photo. The number of pixels determines the resolution of your image. The more pixels, the larger the image can be displayed without losing quality. But more pixels also means a larger file. As a starting point, having a large file is good, so you can still use it for different purposes. But for your website, always ensure an appropriate number of pixels.
The number of pixels in a row determines the resolution. This can also be approached in 2 ways:
- How many pixels per inch, expressed as dpi or ppi. For example, the resolution is 72dpi.
- The total number of pixels in width and height. For example, the resolution is 1500×1000 pixels.
The total number of pixels is more specific, because dpi only says something if the dimensions in inches (or cm) are also mentioned. Because a web page is displayed on the screen from left to right, the width of the images is leading.
3. The best dimensions for your website.
This is very simple: the best size for an image is the exact size in which it is displayed on the screen. But what size do you make them then? You don’t necessarily have to calculate it separately for each image. You can follow these rules of thumb:
- Full screen width:
set images that fill the entire screen to 2200 pixels wide.* - Content width:
images that are no larger than the content of your website can be 1200-1600 pixels wide. - 1/2 Content width:
set images that take up about half of your website to 600-800 pixels wide.
If you want to know what the content width of your website is, look in the WordPress dashboard at: Theme customiser > general settings > layout settings > website content width
* Nowadays, people increasingly view websites on smaller screens, such as tablets and smartphones. That’s why I recommend keeping the files as small as possible while maintaining sufficient quality. If you’re a photographer or want maximum image quality on a large screen for other reasons, you can use images with a width of 2560 pixels. However, for most websites, 2200 pixels wide is more than enough.
4. How do I resize the images to the correct size?
Always make a copy of the original file before cropping or scaling an image. Otherwise, you will lose the full resolution image. First crop images nicely in the correct ratio, and then adjust the pixel size.
In this table you can see the pixel sizes in the most common aspect ratios:
| Ratio | Screen width | Content width | 1/2 Content width |
| 3:2 | 2200 x 1467 px | 1400 x 934 px | 800 x 534 px |
| 4:3 | 2200 x 1650 px | 1400 x 1050 px | 800 x 600 px |
| 5:4 | 2200 x 1760 px | 1400 x 1120 px | 800 x 640 px |
| 16:9 | 2200 x 1238 px | 1400 x 788 px | 800 x 450 px |
I edit my files with Adobe Photoshop or Adobe Bridge, but you can also use a free online tool such as Shortpixel. You can even do it with Canva: create a canvas in the correct pixel size, drag your image onto it and export this.
5. What is the correct colour space?
Colours for the screen are always RGB, and the correct colour space or colour profile is sRGB. So pay attention if you get files from your corporate identity designer or printer, as they may sometimes differ and need to be converted to RGB .
6. Which file format should I use when saving?
The most commonly used file formats are JPG, PNG, GIF, SVG and WebP. Which one you choose makes a big difference, because there is an appropriate choice for each type of image:
| JPG | use this for your photos. JPG is a format that greatly reduces your file size and is therefore excellent for making your site faster. Set the compression to 8 or 80 (unless it needs to be very specific, then you can vary this). |
| PNG | if there is transparency in your image, sharp details, or it’s a logo, then use PNG. Do keep in mind that files in PNG are heavier than JPG, so it’s not very suitable for larger images. |
| GIF | this sounds very old-fashioned and is a bit like that. However, the GIF format is still widely used to store small animations. In that case, we’re talking about ‘gif animations’. |
| SVG | SVG doesn’t contain pixels but vectors, and the files are very small. You’ll never choose SVG for photos, but you will for logos or illustrations if they come from a vector program. However, you do need something to upload SVG to your site because they contain code. I use Divi Toolbox for this (my favourite Divi plugin). |
| WebP | this is a newer file format that makes the file size of images smaller than JPEG and PNG images while maintaining the quality of the photo. WebP is often generated on the website itself with a plugin, so you don’t have to do anything further for that. In that case, you just save the images as JPG, PNG, or GIF. |
7. How do I compress images?
If you have set your files to the correct size and saved them in the correct file format, you can get started.
I guarantee you that in most cases it is already a huge improvement. Because correct size and file format are the most important aspects of good image files. The quality is good without the files being too heavy.
But if you want to make the weight even smaller, you can compress the images further with online tools like Shortpixel or Sqoosh. It’s even easier if you use an image optimisation or caching plugin. However, be careful: only use one tool or plugin to avoid loss of quality and conflicts. So choose one method.
| A few free online tools to compress images: | Shortpixel, useful for compressing multiple JPG, PNG, and GIF files at once. Glossy is my favourite setting. Sqoosh, this is handy for WEBP. You get very good results with it, recommended for your largest files. |
| Plugins that do optimisation and WebP conversion on your site are: | Shortpixel, I use this the most and recommend it to my clients as well. Smush, can be a good solution if you don’t want a paid plugin. |
| Free caching plugins that can compress images: | WP Optimize, free and suitable for all hosting. LiteSpeed Cache, for hosting on LiteSpeed servers such as Cloud86 or Heijsen Hosting. Speed Optimiser, for SiteGround hosting. |
8. How do I optimise images for SEO (Google)?
This step is so often overlooked!
Of course, you can now put your files online directly. But if it’s also important to you that your website is good for SEO and thus for Google, make sure your images also score well on this point.
What’s important for SEO is that all your images:
- have the correct size (explained in point 4).
- load quickly and are saved in a good file format (I discuss this in points 5 and 6).
- have readable titles that also contain keywords.
- have an ALT tag in the WordPress media library.
Keywords in titles
It’s smart to change the file name before uploading to your website, because the file name becomes the default title in WordPress. This saves a lot of work afterwards.
If you already know on which page you’re going to place your images on your website, give the files a file name that is readable and contains a keyword. Don’t use underscores, but rather hyphens. Spaces are also allowed and make for a nice title.
If you don’t (yet) know the keyword, at least make sure the file name says something about what you see in the image. You can also change the title later in the media library.
Example with keyword ‘training shoes for kids’:
| Not a good file name | A good file name |
| GYMNKE_1_kid.jpg | Red training shoes for kids Nike 1 M.jpg |
Adding Alt tags
An Alt tag is shown by screen readers instead of the image. This is to improve accessibility for visually impaired people, for example. Google considers this increasingly important. You add an Alt tag per image via: WordPress dashboard > media library
Summary:
Step-by-step guide for creating files for your website
Now you have been able to read the explanation above. The steps are summarised below in the correct order. If you make it a routine, you not only ensure the best and fastest images, but also save a lot of time!
These are the 6 simple steps:
- Collect the files, make a copy and give them a good file name.
- Now crop the images if necessary and set them to the correct size.
- Make sure the colour space is sRGB.
- Save them in the correct file format.
- Optional: compress the files with an online tool – unless you do this with a plugin.
- Now upload them to the media library, check the title and add an ALT tag.
Bonus: Cheat Sheet for images
Download the handy Cheat Sheet here with the dimensions, file formats, all links and of course the 6 simple steps.
TRIGGER freebie – images cheat sheet EN
11. Glossary and overview of the best tools.
Glossary
- Alt tag: text associated with images that can be displayed instead of the image itself.
- File format: the way data, such as images, are structured and stored in a computer file.
- Cache: a temporary storage location for data to provide faster access and better performance.
- Content Width: the maximum width of the standard content in your website layout.
- Compression: reducing file size to save storage space and increase transfer speed..
- Pixel: the smallest unit of a digital image or display.
- Ratio: the relationship between the width and height of an image or screen.
- Resolution: the number of pixels in an image or on a screen, often expressed in pixels per inch (ppi or dpi).
- SEO: abbreviation for “Search Engine Optimisation”. The process of optimising a website to achieve a higher position in search engine results.
The best tools
- Divi Toolbox https://divilover.com/ref/237/
- Canva https://www.canva.com/
- Adobe Express https://www.adobe.com/express/feature/image/resize
- Adobe Photoshop https://www.adobe.com/products/photoshop.html
- Adobe Bridge https://www.adobe.com/products/bridge.html
- Apple Photos https://support.apple.com/guide/photos/welcome/mac
- Shortpixel online https://shortpixel.com/online-image-compression
- Shortpixel plugin https://shortpixel.com/otp/af/7VADDJV3155590
- Smush https://wordpress.org/plugins/wp-smushit/
- Sqoosh https://squoosh.app/
- Litespeed Cache https://wordpress.org/plugins/litespeed-cache/
- WP Optimize https://wordpress.org/plugins/wp-optimize/
It’s a wrap!
This is my recipe for preparing images. I hope it also helps you to place the best quality images on your website without slowing it down.
Do you have questions or additions? Please contact me. I’d love to hear from you.
