High-quality images aren’t just optional additives that help spice up your website, they’re statistically proven to increase traffic and engagement. In fact, blog posts with images get 94 percent more views than text-only blog posts.

But if your image files aren’t properly optimized, then your stunning imagery will become the reason why your customers and clients click away from your site, never to return.

Why optimize your images?

According to Neil Patel, a digital marketing thought leader, 47 percent of your website’s visitors expect to see a web page load in under 2 seconds, with 40 percent of those visitors more likely to abandon the page if it takes more than 3 seconds to load.

In other words, web surfers demand speed. But what’s that got to do with your images?

The general rule is, the higher the quality of the image, the larger the file size — and a larger file size means a longer load time for your site visitors. 

Poor site speed will drive your traffic away, sending your bounce rate up, and your SEO progress into disarray. Not to mention, Google’s search engine penalizes websites that load too slowly.

Image File Types: Which Is Most Suitable?

There are 5 main image file types: RAW, TIFF, GIF, PNG, and JPEG. Each image file type has its own advantages and disadvantages regarding quality and size.

But before we delve into each one, I want to highlight the importance of both lossy and lossless file compression.

Lossy

• A file type with a lossy algorithm removes data from the digital image to reduce the file size. The trade-off, however, is a loss of image quality.

Lossless

• File types with a lossless algorithm retains all of the information within the image when compressed. However, in retaining this information, a lossless image file takes up more space.

RAW

RAW images are processed directly from the camera’s sensor. No compression is involved in creating a RAW image, and since they are lossless, the images are of a very high quality and take up a lot of memory. The average file size of a RAW image is approximately 25MB.

TIFF (Tagged Image File Format)

TIFF files are really popular with graphic designers, photographers, and publishers. It is supported by various photo editing software packages including Photoshop, Illustrator, and Google Nik. Similar to RAW files, TIFF is also lossless and take up a lot of memory, making them not suitable for displaying on the web.

GIF (Graphics Interchange Format)

Ever seen those amusing moving images that you come across on social media? Well, those are GIF files. These file types are great for showing visuals and animations. However, these are lossy files, so any image compression would result in a drastic reduction in quality.

PNG (Portable Network Graphics)

This file type was initially created to replace GIF. PNGs are popular with photographers and graphic designers since it supports lossless data compression and can be shared on the web. Perhaps one of the notable features of PNG files is its transparency options, which is ideal for adding a logo onto various different backgrounds.

JPEG (Joint Photographic Experts Groups)

JPEGs are the most popular image file type found online. JPEGs utilize a large color pellet making it ideal for photographs and complex images that have a lot of shadows, colors, gradients, and patterns. Despite its lossy compression algorithm, it removes minute details that are not noticeable to the naked eye so you can use this file type to present a high-quality image without being too concerned about the file size. Plus, JPEGs are smaller than PNGs.

How to Optimize Images for the Web

Optimizing your images is actually very easy, and it requires you to follow the following three steps:

1. Set the Dimensions of the Image

This image of Kilimanjaro, shown below, is originally 3,043 x 2,036 pixels and 1.98 MB. While the picture looks amazing, it will take a long time for this image to load in its original format.

There are many tools that you can use to reduce the image size. In this instance, we will use Adobe Photoshop.

Open up the image in Photoshop, select “Image” on the top navigation menu and then select “Image Size”. From there, you can set the dimensions of the image. For this example, we’ll set it to 800 x 500.

2. Save Images for the Web

In Photoshop, there’s a command called “Save For Web” which automatically optimizes the image for displaying on the web. On selecting this command, you’ll be directed to a window where you can select the file type. For this example, we’ll select JPEG, as it is popular on the web and is best suited for images that have a lot of vibrant colors and complexity, like the Kilimanjaro image we’re using.

Photoshop also enables you to select the quality of the image, from Low, Medium, High, Very High to Maximum. I’ve found that High is the best setting for most images since it is almost impossible for the human eye to spot reduction in image quality.

3. Image Compression Software

Photoshop would have done a good job of reducing the size of the image. But if you want to shave off another 5 to 10 percent, you can take advantage of a compression app such as ImageOptim or FileOptimize.

You can easily download and install these applications on your Mac or Windows machine, and then all you have to do is follow the step-by-step instructions, and the compression application takes care of the rest.

4. Tools Within Your CMS

Some CMSes have automatic tools or plugins to automatically optimize images for your website. For instance, Zesty.io's CMS automatically uses an algorithm to compress images without sacrificing quality, so your site loads faster without compromising the details of your image. Other CMSes that have plugin marketplaces, such as WordPress, Shopify, or Magento, have image optimizer plugins. Be wary of using these, however, because they could still slow down your site as the plugin may bloat the actual site. 

Fewer Pixels, Greater Power

By definition, a high-quality image is going to have a high-pixel density. So optimizing your images before they go live is vital to the long-term success of your brand.

On the other hand, if you’re thinking that your images don’t need to be optimized because they aren’t too large or high-definition to begin with, then perhaps your priority should be to increase the quality of your images first and foremost.