always smush your website pics!

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
⠀⠀⠀⠀⠀⠀⠀⠀⠀
📸: @michellebirch_va