In our last post, we discussed the factors which contribute to slowing down of a web-page. Of those, perhaps one of the less technical aspects which is far easier to master, is understanding SEO & its relation to image optimisation.
Images often occupy the highest proportion of downloaded bytes on your web page, which means that the larger your image size, the longer it would take for your browser to download. People may argue that a picture speaks a thousand words, and in most cases while that is true, having too many images on a page that do not add value to your content can be detrimental for your web page’s load-time.
Choose the right image format
Using the right image format is a critical component of image optimisation for your webpage. You can choose between a vector or a raster format image type. A raster image is an overarching term that refers to popular image formats such as gifs, pngs or jpegs that use individual pixels to store image detail. Vector images on the other hand are made up of lines and other geometric shapes that are rooted mathematically. Because raster images are detail-heavy, resizing an image results in a loss of pixels and in turn could decrease the overall size of an image. Vector images on the other hand can be scaled up or down and doesn’t ultimately lead to a reduction in image quality.
Most images on the internet are jpegs which allow for images to retain their detail while also maintaining a small file size. However jpegs are considered as a lossy file format which reduces a file size by getting rid of redundant information which is often not picked up by the eye. Gifs on the other hand, use a color palette of 256 colors and are best used for images that have large areas of similar colours. Gif images also allow for more compression than jpegs. A Gif format is also best used when displaying animation. PNG images have a wider color range than Gifs do and is a lossless file format that retains the image’s original data.  Vector images however, do not allow the storing of immense detail and heavy styling on images. Therefore, it is fundamentally important to try using the right kind of format depending on what you’re after.
Save Images
If you’re using an editing software like Adobe Photoshop, make sure you save your image in a format that’s best-suited for the Web. If you get a bit overwhelmed with the number of options available on Photoshop, simply use the ‘Save for Web’ option.  You can pick the dimensions of the image depending on its use. If however, you don’t have Photoshop, there are plenty of free programs online which allow image compression. Some helpful compression services are – TinyJPG, ImageOptimizer and Optimizilla.
Resizing Images
Unless you consciously resize your image for optimal viewing, a user’s browser will do it for them. Try thinking of it this way, having a user download extra image data just to have the browser simply resize the image makes little sense. So try making it a practice to upload an image in exactly the dimensions that are required.
Use CSS Sprites
An image sprite is simply a number of images combined into a single image. Using a sprite essentially reduces the number of files that your browser needs to download. Another beneficial aspect is that the overall image size is smaller and will therefore take less time for the user’s browser to download. While there is a bit of coding that’s required for CSS sprites, fret not, there are a variety of CSS Generation tools available on the internet to help get you started. It’s worth checking out CSS Sprite Generator or Instant Sprite.
Optimise For Mobile
Finally, don’t forget to think about image optimisation for mobile platforms, too! Google’s announcement of shifting focus to a mobile-first indexing system will mean that your mobile site will be a determinant for your site’s positioning.
There are multiple ways that you can ensure image optimisation for your website’s SEO. Ensuring that the images on your webpage aren’t responsible for your page lagging is the first step to enhance your webpage’s user experience. If you would like help with this, or want to explore more topics like this one, visit SEO Company Melbourne – the experts in anything and everything SEO
