If you’re reading this guide chances are you’re interested in understanding more about image compression, it’s benefits, and how to get started “optimizing” your own images.
What is Image Compression?
Image compression is the process of minimizing the size (measured in bytes, kilobytes or megabytes) of a graphics file (.jpg, .png, .gif etc) without changing the physical dimensions of the image or degrading it’s visual quality to an unacceptable level. This process is often referred to as “image optimization”.
Why Image Compression Matters
There are two main benefits to image compression.
Firstly the compressed image takes up less disk or memory space. Secondly, and most importantly, it reduces the amount of time required for that image to be downloaded when viewed on a web page. In other words, smaller files will load quicker — which for those of you who are selling products online is essential!
It’s for this reason image compression is often linked to the idea of a “faster” web site. The more optimized an image is, the quicker it will download. The ability to serve your images quickly is essential to keep customers on your site and engaged.
Image Formats
According to Wikipedia, there are around 100 different image file formats. Thankfully we don’t need to concern ourselves with the vast majority of these.
However, it is important to understand some of the main file formats that are used on the web and when best to use them. Your file format choice will also affect the amount of compression, and therefore size saving, you will achieve.
Let’s look at the five most common file formats that you’ll encounter on the web today:
- JPG (Joint Photographic Experts Group) is probably the most common form of file type used on the web today. JPGs can support millions of colours and are therefore ideal for photographic images. Unlike other image file formats JPGs do not support transparency.
- GIF (aka, Graphics Interchange Format) is perhaps the most (in)famous image file format. Firstly, web designers and developers endlessly argue over its pronunciation (is it GIF, or JIF — you decide). Secondly who hasn’t encountered an animated GIF popping into their message stream? You only have to go to a site like Giphy to see just how popular a file format it is! Finally, it’s the only file format to court controversy thanks to its creators rigorously enforcing its patent. Limited to 256 colours GIFs are ideal for small graphical icons as they will be small in size and therefore quick to download.
- PNG (Portable Network Graphics) was invented in 1995 with the intention of replacing the GIF and to get around the aforementioned patent issues. Like JPG the PNG format supports up to 16 million colours but comes into its own due to support for transparency. This allows designers to specify a colour that when viewed will be transparent. PNG files are ideal for detailed graphics.
- SVG (Scalable Vector Graphics) file format came onto the scene in 2001 and is more powerful than any other web-centric image file format. Unlike JPG, GIF, and PNG, an SVG image is able to scale up and down without losing any quality as SVG images are rendered from mathematical shapes and curves rather than pixels. An SVG image can be animated, can support transparency, and any combinations of colours and/or gradients. The one downside of an SVG is that they tend to be larger in size when compared to other formats.
- WebP A relative newcomer to the image file format scene is WebP. Whilst an open format Google is spearheading the development of both the format and WebP related software. It was initially released on 30 September 2010 and is slowly gaining adoption due to the small size and high-quality image it produces. Many of us are viewing WebP images on a daily basis as platforms like Facebook and Shopify now convert and serve images as WebP primarily to speed up delivery and save bandwidth costs. Given that most modern browsers support WebP expect usage to grow.
Which Format?
It’s important to use the right image format for the right purpose. Here’s a quick overview of what each format is ideally used for:
A Quick Note on WebP
As mentioned earlier platforms including Facebook and Shopify now serve, where possible, images using the WebP format. It’s worth noting that this conversion happens automatically — in other words we can continue to use formats we are familiar with (e.g. JPG, PNG, GIF etc) and Shopify and Facebook will work out if the users browser supports WebP and only serve our images in this format if they can be viewed correctly.
In the eventuality that the visitors browser doesn’t support WebP we must ensure that they best, and most optimised, image is sent.
What’s in an Image?
Before we look at the types of image compression available to us and how it affects different file formats it’s important to understand that a typical image contains more than the image that we see on screen.
In addition to the pixel data, some image file formats can contain a wide range of metadata. Metadata is information relating to the image. For example, digital cameras not only record the actual image data but also information relating to things like:
- Number of pixels used
- Compression mode
- Date captured
- Camera make and model
- Aperture setting
- Shutter setting
- Colour profile
- Geolocation
- Thumbnail version of the main image
Some digital camera manufacturers will also allow you to add custom metadata such as your name and copyright details.
This data is known technically as EXIF (Exchangeable Image File Format) data. It’s this data that enables applications like Google Photos and iPhoto to create albums based on location, date and time, and more without us having to sort through our photos manually.
However, this data isn’t 100% necessary for graphics that will ultimately be displayed on a web page. Removing this data is one element of image compression. By taking out the EXIF data we are able to save valuable bytes and therefore reduce the size of an image.
Types of Image Compression
Having explored the most commonly used image file formats, let's look at the process of compressing an image.
When learning about image compression you will come across two terms that may at first seem a little strange — “lossless and lossy”. These terms refer to the two main types of image compression that are available to us.
- Lossless — As the name suggests “lossless” compression reduces the size of the image but maintains all of its data and can, therefore, be reversed. Lossless compression can result in small size savings and will look the same as the original.
- Lossy — In contrast "lossy" compression removes data from the image making the conversion an irreversible process. However, this approach will result in large size savings with little, or no discernible visual difference between the original and the compressed file. Lossy compression will deliver the biggest gains.
Generally speaking, lossy compression will give you the biggest savings and is recommended for online images.
Automating Compression with Crush.pics
While you may be convinced that image compression is essential to give your web site visitors a great experience the next challenge is actually working out how to optimize our existing, and future, images.
If you’re using a Mac, Linux, or Windows machine you have access to a number of applications that allow you to select a number of images and have the resulting compressed image files saved to a folder of your choice.
This is fine for small batches of images but it can get a little tedious every time you need to add a new image to your online store or web project. Thankfully, computers are very good at automating tasks like this.
Our own Crush.pics is designed to make image compression easy and automated. Our application originally started out as an app for Shopify and has to date benefited thousands of merchants around the world.
In addition to the Shopify app, we recently launched an API for developers, a WordPress plugin, and an online interface for manually compressing your images.
Our goal with Crush.pics is to deliver the best, and simplest online compression service to anyone using images online. Crush.pics is fully customisable and is designed to give you a highly effective set of defaults whilst offering those of you who like to change settings all the power to do so.
There are three main options for compressing your images with Crush.pics:
- Conservative Compression — This makes use of a lossless algorithm to preserve every pixel in the image. Files look identical but will be slightly smaller in size and offer a slightly quicker download time.
- Custom Compression — Enables you to choose your own settings for both JPG, PNG and GIF image files. This setting makes use of Lossy compression resulting in significantly reduced file sizes.
- Balanced Compression — Strikes the perfect balance between quality and image size. By intelligently calculating just how much compression to apply to each image, Crush.pics ensures that the new image looks as close as possible to the original whilst offering the best file size savings.
“Balanced Compression” is one of the most powerful features of Crush.pics. We recognised that a “one rule fits all” isn’t always going to deliver the best image every time and sought to develop a better way to achieve consistency.
Here’s how it works:
- The original image is imported into Crush.pics
- Crush.pics applies varying degrees of compression to the image resulting in a set of new images that we can use for comparison
- Each image is compared to its closest neighbour using a technique called “structural similarity”. If the current image is structurally (i.e. visually) the same to a high degree Crush.pics moves along to see if a better saving can be had with the next image in line.
- If a better saving can be had Crush.pics carries on comparing, if not it sends back the previous image knowing that it’s the best trade-off between visual similarity and file size savings.
The good news is that this happens in milliseconds automatically!
We’ve covered a lot of ground in this short guide and hope that you will find it useful as you continue to publish, and compress, your own images online. Taking the time to optimise your images will give your visitors a faster and better experience when navigating around your site.
