Optimising Website Images
May 25, 2017
People are connecting to their mobile devices more often than in the past 10 years. Hence, Google’s idea of launching a new algorithm index called ‘Mobile First’.
Visitors are attracted to and visually stimulated by what they see. If your website images are pixelated or distorted they will move on. Optimising images is not only good practice for attracting visitors but it also boosts the performance of your site.
Here’s some quick advice to help you optimise your images correctly.
Getting Started
The most important rule when selecting images is ensuring that they are the best quality (clear, bright and in focus!). We recommend using an incredible resource like www.thestocks.im for the best free high-resolution stock images.
Once you have approved your image you will need to crop it to the exact dimensions used in your website design. Don’t forget to optimise for Retina Display (Recommended that you adjust the artboard/canvas on your app of choice to at least twice the size of your required crop and scale the image to fit accurately before saving it).
Example: If you are supposed to crop your image to 1300px by 650px, create an artboard of 2600px by 1300px then place your image to be scaled to that size.
Saving for Web
Once you have completed editing and scaling your image to the correct dimensions (size), you may now save your image for web. If you are using Adobe Photoshop, you may simply use the save for web shortcut (cmd, alt, shift + s) and follow these steps:
- This will open a window where you will be able to select your image quality and format before finally exporting the file.
- You may select one of these formats from the drop-down menus: GIF, JPEG or PNG.
- Generally, designers and developers use JPEG and PNG because they are commonly used online. JPEGs are best suited for photographs; however, PNGs works well for vectors with transparent backgrounds at high resolution.
- After you have selected your format you may choose the percentage of quality (recommended 60% – 100%). Double check your image size reflected in kilobytes (kb). Don’t forget to ‘clip to the art-board’ and avoid including additional elements off the past-board..
- Once you have completed the above you may continue to save.
The Benefits of Optimising for the Web
1. Improved SEO (Search Engine Optimization)
If your website is too slow because of big image files it will be difficult for Google to crawl through it and rank your site accordingly. Also see What is Search Engine Optimisation? and 5 Ways to Improve Your Website Rankings.
2. Improved Load Speeds
If your page takes too long to load this means that your images are most probably too big, this usually drives visitors away from your website and will lead them elsewhere. Therefore, reducing the file size of your image will improve your loading speed. Also see Creating Lightening Fast Websites.
3. Less bandwidth
Smaller image files cost less bandwidth which allows web browsers and internet service provides to work more efficiently with them.
4. Better Backup
It will be much easier and faster to back up your website data.
5. Less storage
It will utilise much less storage on your web server.
Other Things to Remember:
- Save images correctly. Ensure that images, especially those that have the same dimensions throughout the site, are all saved with accurate consistency.
- Instead of saving text on image, rather use web fonts in HTML style with CSS for better appearance.
- Use vector images more often.