Hello I’m Adam // General Manager
Drive quality traffic to your site
Talk to me todayHello I’m Faye // Marketing Director
Drive quality traffic to your site
Talk to me todayJames Christie
Feb 24, 2020
One of the first key points you learn when delving into SEO is that your page load speed is fundamental to getting people on your site and keeping them there. Having a bloated, slow loading website in the day and age when the length of the users attention spans are dwindling can make or break your site.
Images are the biggest culprit for this bloat contributing 61.3% of the download size of your average webpage. As strong imagery is becoming a big focus in current web design trends, its imperative to know how to get your images down in size and in the correct format, without affecting the image quality.
When you look at the huge array of image formats you may be wondering why only a small few are available for use on the web. The simple answer is down to browser compatibility, faster more efficient image compression formats are out there, but getting all the different browser developers to adopt the new technology can be a painful process, however some of these new technologies are on the road to becoming fully browser compatible.
[newsletter]
In this post we will be discussing when to use the different image formats, the benefits of each, difficulties you need to be aware of about them and how to implement them in the most efficient way to massively boost your SEO rankings.
The JPG or JPEG is the standard when it comes to raster images on the web, it’s popularity stemming mainly from it being the default format for digital camera photos. The main focus of the JPG is to sacrifice quality for smaller file size. As a guide 60% - 70% is a good percentage of compression to keep your images crisp.
The JPG doesn't allow transparency and has difficulty with sharp edges as they can become blurry so we don’t recommended them for assets such as logos or icons. The best use cases for JPGs are sections such as full page hero images or backgrounds, the images will stay crisp and clear on larger screens while keeping your page load down.
The gif is now a staple in internet culture and social media, taking over the web and becoming the most popular image format by far to bring character to a blog or news post. You wouldn't think a technology developed 30 years ago would be this dominant, but it seems like the attitude is “if it ain’t broke don't fix it”.
The 256 available colour limit for this format is both a blessing and a curse, the compression is fantastic however the images can become washed out. We wouldn’t recommend overuse of gifs in your website, although the general file size of a gif is small these can become exponentially larger depending on the size of the image and its frame-rate / frame-count. Transparency is available on gifs so they can be used to add flair to web designs and are very versatile in their use cases.
in their use cases.
PNG
PNG was created to replace the gif, unlocking the 256 available colour limit and bringing the format into the modern age. Over the years it became clear this wasn't the case and the PNG became a category of its own. Focusing on quality and clarity over compression the png can become very taxing to your sites speed if not used correctly, potentially tanking your SEO rankings.
The png is mainly used for graphic imagery with sharp edges that require a transparent background, elements such as the logo or text. If file size isn't an issue then PNG will still be a great choice to get super crisp imagery, however as most website owners don't have this luxury we would recommend JPGs.
The king of vector based web imagery is clearly the SVG, using mathematical formulas to create shapes and lines makes this a great choice for iconography and shapes based elements. If you are looking for clean design elements but wanting your page to rank highly using SEO then SVG would be the way to go. Photography wouldn't be possible however complex shape based illustrations can really bring your website to life, try to limit the amount of shapes you use as large amount of layers and shapes can become taxing on page speed if not looked at.
This format can also be manipulated with CSS meaning you don't need to duplicate your images if for instance you wanted multiple coloured versions of a shape or logo. This could potentially cut seconds from your load times so it's clear why the SVG has become popular in recent years.
The most recent addition to this list, the WebP is the emerging image format developed over at google. Using a superior compression method for optimising images the webP has become the go to for bigger tech companies like youtube and facebook. However, the downside for is the formats incompatibility with all browsers, a similar problem with a lot of modern formats that keep them from more mainstream use.
This isn't to say you cant use WebP, however extra effort will be required to gain access to the benefits. You will need to create fall-back JPG or PNG versions of the images so that those users on incompatible browsers can still view your content. If your willing to put in the effort to squeeze those extra mili-seconds out of your load speed then this is great options that will be beneficial for your SEO.
There is no one size fits all when it comes to image formats to improve your SEO rankings, the formats all have advantages and disadvantages that you need to make the best of to suit your needs. SVG for logos and shapes, JPEG for large background images and small quirky GIFS to give your content some flair and PNGs when you need some simple photographic elements with sharp corners that you need to keep the quality of. Keep track of your image sizing, no matter what format you are using (except SVG), compression will have minimal effect if your images are oversized for how you are using them.
