Optimising your images for the web will make sure that your website speed is fast and that your web page loads within the 3-4 seconds your viewer is expecting your page to appear in.
The first way to optimise your image is to resize the height and width of the image.
1. Best sizes for websites
A high definition image on a computer monitor is roughly 1920px wide.
If your image is going to be displayed at full width, resize and crop your image to 1920px x 1080px at 72px resolution (for web).
If you are only using your images to fill in a space that sits in on half of your screen, crop/resize the image so that the longest edge is 1024px.
2. Crop or resize your image
There are many free tools to help you resize your image. I recommend using Mac Preview or Microsoft Picture because they’re built-in and easy to use.
After you’ve re-sized the image, export it and save it to the desktop as a jpeg at 100%.
Once you have resized the image, you will need to compress the image for the web. Compressing your image is the key to really reducing the load time on the web.
3. Compress the image again using a website like https://tinypng.com
This will remove any unnecessary embedded information from your image.
Simply drag and drop your images across to the website and download them when finished.
I like using this website as it compresses the images as much as possible without ruining the quality of the image. Other websites can take it a little too far.
4. Check the quality of the image after compressing
Check the quality of the image first. If only a small percentage of the original image was taken and the picture doesn’t appear clear, rethink the space the image is going to sit in – most product images only take up half of the space you need to upload in, so you can resize this image again to the longest width being 720px at 72px resolution.
However, if the image is to be set at full width, you may need to use the original image before compressing if it is not too big in size.
The aim is to have every image at 200KB at the very most.
If the image is too big after this stage, and this happens with most images exported from Photoshop that have a higher resolution, re-export your images, checking that the resolution is set to 72px.
Or reconsider using another image, or crop a section of the original image.
5. Load images to your website
And you are now ready to load these images to your website.
Don’t forget to add any ALT-text tags, along with the category or your discipline, and the location of where you work – these will help your website SEO in the long run, but that’s another story for another day.
