According to the HTTP Archive (Aug 2019), images are the most popular resource type on the web. So using excellent high-resolution photos is always an upside to your UX. However, large file sizes can drastically decrease your web performance, which also impacts on your UX and conversion rate; on average, you have about 15 seconds to impress before they move on…. and google doesn’t appear to be a fan either.
Luckily we can balance all of this by optimising our website pics. These are my tips and tricks for image optimisation
- Choose the right file format. JPG is excellent for photos or images with loads of colour and have a smaller file size. PNG supports transparency and is excellent for graphic pictures with lines and text, graphs, logos and screenshots.
- Resize your images to fit your website grid. If your section width is 1100px, resize your image width to 1100px (obvious one, I know). You can use programs like Paint on MS, Preview on Mac, Photoshop, Canva and there are loads of free apps like Image Size and Desqueeze (Apple) and Photo & Picture Resizer (Android) that you can use on your phone. Don’t forget to lock in the perspective so that your images stay in proportion.
- If you do not know the size that you need for your picture, crop by inches and stick to either a 1:1, 4:5, 5:7 or 16:9 ratio (fullwidth). Then resize your image using a nice round number for the length (for example, 1500px for a landscape/portrait pic). If your picture is fullwidth set the length to 1920px. Don’t forget to link the length/width so that when you resize the length, the height is always relative to the ratio.
- Compress your pics. After resizing, run your pics through an image compressor. I use tinypng.com as it reduces the image without ruining the quality, but there are other programs like Kraken.io and FileOptimizr.
Then you are ready to go!
Bonus! If you are using a WordPress site, another thing that you can add on top of this to help compress your pics is by installing a plugin called Smush. This program will also compress your pics further, but I always recommend doing this before you upload so that you can control the quality.
I hope this helps! If you’d like to know more – drop me a line, I love to geek out and help people with this! Have a great day everyone!! x