Image Bandwidth Optimization
Images used in the website can in theory be in any of the cross-platform types jpg, gif or png, however, which type is selected, how they are sized and what they are used for can have a dramatic effect on the website page-load times.
Poor page-load speed will affect UX and therefore will become a factor for ranking consideration. Here are my recommendations for images:
1. Use gif format for images where simple flat colours are required the are constrained to a limited colour set. For example, a plain block of red colour in a logo will probably work best in gif format for load speed. Selection of colour depth may be a factor in image type choice, to to get a full range of colour in an image, I recommend:
2. Use jpg format for images with large tonal ranges and smooth colour transitions. Use a compression value that is on the border of visible decay of the image. In other words, try as much compression as you can without losing the quality of the displayed image too much. The best quality setting is the one that is slightly better than the one where you can visually detect the compression in the resulting image.
3. Use png format when the image requires both smooth colour transition and transparency. Don’t use this format if your images don’t need transparent pixels. The png format can’t be compressed as well as jpg, which results in larger image file sizes and will take longer to load than the equivalent size jpg. Logo files are commonly uploaded in png format, but unless your logo appears over many different background types and colours, it’s best to use jpg for smooth colour, or gif for limited palette images.
Size also matters.
If your website column width is 1200 pixels and you image has to span that width, then you meed a 1200 pixel wide image – no bigger.
Check your file details to see what the actual size is. If too large, then resize before placing into your website.
All images should be no bigger than the column width in which they are placed, unless you specifically want your user to gain access to the larger image.
Because image size affects load speed, the negative rank effect will occur when Google judges that your UX is impaired by the poor loading times.