Image Optimisation for your website
What is Image optimisation?
First let’s discuss what image optimisation is. Image optimisation is the process of reducing the file size of your images as much as possible, but still ensuring a good quality image. It is about finding that perfect balance between size and quality.
What happens if you dont optimise your images?
Failure to optimise your images before uploading will have a negative impact on user experience and site speed.
It will increase bounce rates, decrease your search engine position and hinder your online growth as a business.
What Are The Benefits of optimising your images?
Optimising your images for your website is a key factor in improving your sites performance! It will
- Increase User Experience
- Help with SEO rankings
- Decrease server space needed and therefore costs
- Decrease back up costs
When it comes to uploading images to your website or blog post you should always optimise all images, with no exception. There are many ways you can help to optimise photos, but this article will include 6 tips to help you optimise those images for web.
As a general rule I recommend using a jpeg format and png format for any transparent image or logos.
The size and quality of an image for use on a web page is determined by a variety of things. Including File size, physical size and resolution and file type.
1. name your image
When planning content you will have a list of keywords you will want to use.
It is good practise to use these keywords in your image name! However, it is extremely important you focus on the user. Therefore, the image name should be true and relevant to the picture and content on the page.
Always aim to keep it short but descriptive. It is also good practice to rename image before uploading.
Already uploaded your image to WordPress and want to know how to rename? head to media and change the name.
2. choose the right file type
There are several types of file that are better suited to websites than ones that are for print. the 3 main types for websites include
Jpeg – this is image used photography, PNG is used logos, illustrations and solid shapes. Gif are mainly used animated images.
3. Resize your image
Resizing your image is the process of resizing your image to the correct size and dimension for its intended use.
Resizing your image can help reduce the file size of your image significantly.
There are many image editing software available. I use Photoshop to resize my images, which has a great ‘save for web’ option.
There are also free alternatives to photoshop such as gimp. You will find many tutorials online on how to do this.
What is the correct dimensions to save images? this depends on where the photo is going. You can view Hubspot article on ideal image sizes for different builders.
4. Compress your images
Compressing images before uploading to WordPress will help minimise the size in byte without degrading the quality of your image, it won’t resize your image.
There are a variety of ways you can compress file size of an image, and good news there are many free options here. My favourite is tinypng.com
5. Use a Plugin
Like anything with WordPress, there is usually a plugin with an answer, and Whilst plugins are great to help, you should never rely on them solely and ignore the tips above. If you follow the tips above, the plugins will help reduce it further. This will help speed load time of your website.
There are many good plugins out there, few of my favourite have been included with SG optimise, WP Smush. With SG Optimise I am able to convert my images to WebP
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster
6. Add Alt Text
Alt text is short for alternate text. It helps visitors who can’t see the image and search engines to understand what an image is about. Therefore, it is extremely important for search engine optimisation.
It also helps improve accessibility of your website for those with poor vision or screen reader devices.
Summary
- Name Your Image
- Choose the right file type
- Resize image for web
- compress image
- Plugin
- Add ALT text
Always remember to check your images to see if you are happy with the results and delete any unused images on your site
