Best image sizes for websites
A lot of our clients ask us the same question : “What is de best size for the images on my website?” We decided to make it easy for them to remember, by writing a blog post about it.
First of all, it’s important to know why your images should have the right size. If your image is too small, it may appear pixelated or blurry. If your image is too big, your website will take more time to load which is not good for your SEO.
We recommend to start with high-quality and larger images, because you can always make a large image smaller without quality loss.
First :When saving images or graphics, try to remember the following :
- Graphics, transparent layout, flat areas of colours, should be saved as a PNG.
- Photographs should be saved as a JPEG or web if you have this function on your program.
What about your website?
You only use full width pictures? Try to keep your image as large as you can. If you have a 400*300px and you want to use it in a full width slider, forget it! As we mention it before, you will have a blurred image which is awful. For optimal website performance, the digital size of an image should not exceed 150 KB. We also recommend using images that are between 1500 and 1800 pixels wide or higher if you keep a good ratio quality/size.
You only use square little images? Try to export your images as light as possible but try to keep the best ratio between weight and quality.
Example : If your original file is 2000*2000px and you only need it in 300*300px on your website, you can reduce his size. There is no need for you to upload the original file. Our recommandation will be 600*600px. In that case someone on his retina screen will see it not blurred.
If you are happy with your images but your page speed is still slow, you can add an image compressor plugin that will compress again your image.
The perks of this tool is the weight that you can save. Sometimes, up to 70%! Which is really interesting when you have a tons of images. You can choose between several options for the compression but try to have the best compromise between a good and light image.