Having engaging, clear and fast loading images on your WordPress site is one of the most effective ways to draw a user/customer in. There is a reason that car dealerships spend so much time making sure that the new models are spotless and sparkling. The visual impact of a product can often be the make or break decision between success and failure. Online showrooms are no different, plus there is the added complication of how an image can impact your loading speed. It is a well used and famous metric, that a user will leave a website if it takes more than 3 seconds to load. If a website does take more than 3 seconds to load, then there is a good chance that the images you have on your site are part of that reason. 

So as a WordPress site owner, what can you do to ensure that the images you have on your site are both appealing to users and allow your site to load quickly. Your initial instinct might just be to shrink the image down from a 1800×1400 size image to 300×200 size image. This would be the wrong course of action to take, as while your image file size might now be a lot smaller, the quality of the image and user experience has suffered as a result. If you have a car showroom sales website for example, customers will want to get a really good look at the car and be able to see all the features and detail. By making the image so much smaller, any detailed inspection of the car is now impossible – leaving the potential customer frustrated and looking elsewhere. 

So what are your options? Thankfully, there are dozens of different image file options you can choose from, ranging from the high quality, but large file size BMP, the tried and tested JPEG, to the new and widely unknown WebP format. Along with choosing the right format, it is important to remember that regardless of what format you choose, you can additionally reduce the image file size by employing a process via WP-Optimize known as “compression”. 

Site speed is one of the top 10 most important factors Google bots crawling your website observe when they are ranking your site in the search results. Having poor loading speed can badly impact on the ranking of your site and can easily take your site from the first page, to failing to be indexed by Google. Google is very strict on how they rank sites in their search algorithm and if they find that the site offers a poor user experience due to slow loading times, they might not even go through the trouble of even crawling it and making it discoverable via Google search.

Which image format should you choose?

As high quality images are so important for any modern WordPress website, you need to know which format to use, how they affect the performance of your site and how to get the best out of your file selection. 

The two most popular image file formats for websites are PNG and JPEG/JPG. According to w3techs, more than 70% of all websites use these file types. Around 30% of sites use SVG and 22% use GIF.

This is where image file types would come into play as the type of file you use to upload your images play an important role. As there are so many different file types, we will go through the most popular ones and their pros and cons down below:

Before we jump into the type of file we need to understand some concepts before, like what a raster and a bitmap image are? What is compression? What is the difference between a lossy and lossless compression?

Compression – Lossy Vs Lossless

Both of the compression types are aimed at reducing the file size, but it’s what they remove that really matters. In Lossy compression; important data that is relevant to the quality of the image is removed. This can be reflected in the image being pixelated in some cases as your computer can have trouble reconstructing the image.

In lossless compression, irrelevant data that is present in the image (such as metadata) is reduced, which helps reduce the file size. The image quality is not affected at all in this process.

Raster Vs Vector

The most commonly used image file types are typically raster-based. This means that they have a fixed RGB color value associated with every pixel and all of those pixels are combined and used to create a whole image.

Examples of such file formats include jpg, png, and gif.

Alternatively, a vector image is created using shapes and lines that can be scaled infinitely without them ever being pixelated. The vectors are created using mathematical formulas that allow users to change the values, while not affecting the quality of the image.

Now that we have gone over the basics of the images, we can now look at the details of the different file types.

JPEG:

This is a digital image format that contains compressed image data. With a 10:1 compression ratio, JPEG images are used as they are very compact. JPEG format contains important image details and is the most popular image format for sharing photos and other images on the internet. The small file size of JPEG images can also let users store thousands of images (for example on an art site) without the need for extra storage space on your site. 

JPEG is a lossy compression file type that works well for photos, but it is recommended that you use another format when working graphics, such as PNG.

PNG:

PNG is a popular bitmap image format and is short for “Portable Graphics Format”. This format was created as an alternative to Graphics Interchange Format (GIF). PNG has some great features like containing 24-bit RGB color palettes, greyscale images and displaying transparent backgrounds. A lossless data compression method is also used in PNG images when working on high quality images or graphics. PNG images are also frequently used in Image editing as they can give the user more control and options on the image over traditional JPEG format.

PNG also uses a lossless compression algorithm, which means this format can retain more data than JPG. When using a PNG image file, users can also save these images with a transparent background. By using this format, users have the option of working with layered images that can show a clear background (for example – just the flowers in the image below and not the background wall), enabling users to add the image to other images without the need to cut it out and remove the existing background – as you would have to with a JPEG image. This is one of the main reasons why it is the preferred choice for graphics like diagrams and illustrations. PNGs are known to be more popular for users working with graphics, rather than uploading standard photos.

GIF:

You probably know the term “GIF” best from the countless short clips you are sent on messaging apps. GIF stands for “Graphics Interchange Format” and is mostly used to support animation without audio 

Unlike JPEG and PNG, GIFs are used in a more niche case and are not typically used for static images (although this is possible). If you use a GIF on your WordPress site, it is most likely in order to show you visitors a simple animation or process. GIFs have a limited color range and are best used for simple graphics. They use lossless compression and tend to be smaller than JPGs. It is generally recommended that you only use GIFs sparingly in your site, as they can increase loading times (given the file size) and are limited to 256 colours. 

SVG:

Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster image files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. This means that vector files like SVG can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics. 

Vectors are best only for simple graphics, shapes, and illustrations. SVGs are a good choice for logos, especially if you need your logo to be responsive and are supported by most browsers including Chrome, Firefox, Edge and Opera.

BMP:

BITMAP is now considered an outdated image format. BMP loads the images in a lossless image format which can result in huge file sizes due to the lack of compression. Considering the importance of loading speed and how site creators want to keep the image sizes to a minimum (not to mention the popularity of SVG and JPEG formats), this format has become largely unused for online images. 

WebP:

This image format was created by Google in 2010 and is starting to prove popular with people who upload lots of images to their site as it has several advantages over JPEG and PNG, such as having better lossy and lossless compression performance.

WebP also typically uploads in smaller file sizes than JPEG or PNG formats given its improved compression performance and will take up less space on your site – allowing it to load faster. While it isn’t supported by all browsers, it is supported by all the most popular browsers – including Chrome, Firefox, Edge and Opera. 

Conclusion:

There are many types of image formats that can be used on your WordPress site, but it is important to evaluate the purpose of the image. If your site is for a wedding photographer for example, you will want to maintain high quality images that still load quickly and are user friendly (JPEG). However, if you are selling images in an online poster store, then you will want to maintain as much detail and image information as possible (PNG).  

As a general rule of thumb, if you are just uploading standard images for your online store, blog, portfolio, social media or social media site – then it is recommended that you upload you images in a standard JPEG format and then use WP-Optimize to further compress your images

However, should you wish to future-proof your images and improve your loading speed as much as possible, then WebP can offer superior lossy and lossless compression, while still maintaining high levels of details. Whatever you decide, remember to always compress your images using WP-Optimize for the market leading compression.