Maximise your Website Performance through Image OptimisationDec 2022
Optimising your website's images is an important step in improving your site's performance. Not only does image optimisation help to reduce page load times, but it can also improve the overall user experience by delivering faster-loading pages that look better on any device. In this blog post, we'll cover why image optimisation is important and tips on how to resize your images for your site.
Firstly, WHY Do We Have to Resize Images?
Lets say you have a brilliant, high quality image and you want to upload it to your site. You upload it within your CMS image manager, add it onto your page, and hit publish.
In the CMS, it looks great! You go to preview your lovely new image on your live site and ... it's taking a long time to load.
When it finally does, it has slowed down the entire page.
So while you may have downsized your image within the CMS to fit, the image most likely still has 10,000 pixels worth, and thats just the width.
The dimensions have been downsized, but the FILE is still huge, and this is what's slowing down your page/website.
If you're unsure on whether your image is too big for your site, and will effect loading, simple check the file size in file explorer!
When uploading images to your website, you first need to consider where it is going.
Is it going to be a banner? A full screen image? A small icon? Perhaps just a smaller square image?
Knowing where the image will go on your site will inform your next steps - each have different dimensions according to best practice guidelines
Best Practice Dimensions
Banner Image – If you want an image to span across the width of the screen, 1920 px is the typical measurement.
1920 is most screen sizes, if not 1080.
Banner height is up to you depending on what you need, but typically for a banner 100 - 1000px is recommended.
Square Image – This will be the second most commonly used after banners. Typically 500x500px, or 400x400 is recommended for these style images.
Icons – Depending on what kind, can be around 250x250px. You can downsize these in the CMS without any issues, since its already a small file.
How to Resize your Images
So now we have an image we know is too big, and know where we want it on the site. Lets resize it.
You can use gimp, pixlr, photoshop and many other options.
Navigate to 'image size', typically under 'edit' or 'image', and adjust the dimensions according to best practice guidelines.
Upload onto your site, and you're ready!
Frequently Asked Questions
Why not just compress the image?
You may lose the quality of the image as randomised pixels are sacrificed for space. Resizing it yourself using the best practice methods retains the image quality.
If I’m downloading the image from a stock site, why not just get the smallest and upload it bigger?
If you use a image that is too small for its purpose, the image will lose quality when upsizing. Its better to download a bigger size than you need and resize, rather than a smaller one.
You can downsize and retain quality, but you can't do the reverse.
Resizing images is an important part of website design for many reasons. By following the tips and best practices in this blog post, you can ensure that your images are resized properly to help improve your site’s performance. Keep in mind that image optimisation is just one small part of creating a successful website – be sure to download our Website Design Whitepaper to learn more about the Website Design process Intergage follows.