The Complete Guide to Image Compression: How to Reduce Image Sizes for Faster Sites

Smooth. Sleek. Efficient. It’s a great feeling to trim the fat, whether you’re outlining your work schedule or simply cleaning your home. But when it comes to your site, removing excess isn’t just for your benefit, it’s best for your visitors and customers as well. Digital image compression, and data compression in general, makes your site run faster with less data to load. That means trimming the fat is better for business.

We now know website speed directly affects both the site’s quality and the user experience (UX), but did you know the Google algorithm also factors in speed when ranking search page results? The significance of site speed only increases as modern users come to expect faster and faster sites, but luckily tech breakthroughs are keeping pace to meet those expectations, namely image compression.

No matter what kind of site you have, you can always improve its speed through digital image compression. It’s quick, easy, and painless; the only reason everyone isn’t doing it already is because they just don’t know how.

And that’s what this article is about. Below, we explain everything you need to know about digital image compression, no matter whether you’re a beginner or expert. Take a look below and learn how to reduce image sizes and make your site as smooth, sleek, and efficient as possible!

 

Data Compression: Smaller Files Mean Faster Sites

Let’s start by discussing data compression in general. With regards to site management, data compression, or data compaction, refers to reducing the size of data files without affecting how the final result is loaded or viewed. Sometimes data compression has no effect on the final result (lossless), and sometimes it has a minimal or hardly perceivable effect (lossy). We’ll explain lossy vs. lossless image compression in the next section.

Data compression works by finding and removing the unnecessary elements of a file, usually through an algorithm, and by rewriting the code so that it’s more efficient. To explain it better, let’s use a simplified example. Take a look at this sentence, which only uses 4 letters:

A rat ate a treat at tea.

Using basic binary, we could attribute two bits (binary digits) to each letter character.

A = 00
T = 01
R = 10
E = 11

Since the sentence uses 18 characters, our initial code would have 36 bits.

But notice that the letter A occurs more frequently than the others, and the letter T occurs the second most. We can then create a new code adjusting for how frequently each character is used:

A = 0
T = 10
R = 110
E = 1110

Using this new code customized to this specific data file, the final result would be only 32 bits instead of the original 36. That’s more than a 10% compression, without affecting the data at all.

Now, imagine this on a larger scale, with pages and pages of text and codes for HD images. You can see how making your data files more efficient can greatly reduce their file size, therefore making your site load faster — and without affecting the end result.

 

Lossy vs. Lossless Image Compression

A lot of people are confused about the difference between lossy and lossless image compression, so let’s take a moment to clear that up.

It’s really quite simple. Lossy image compression means when the file loses some quality during the compression, even if imperceivable. Lossless image compression means that no quality whatsoever is lost.

Lossy image compression is the preferred option to reduce image sizes; you can often cut the file size in half or more (ShortPixel goes up to 98% in some cases) without any noticeable effects on the final image.

If you’re more concerned with image integrity, lossless is the best choice. Lossless image compression doesn’t reduce image sizes as much as lossy, but you can rest assured your image quality remains the same.

Or, you could use ShortPixel Glossy option – a lossy optimization algorithm calibrated for the photographer’s needs:

 

(Photo by Dominik Scythe on Unsplash)

 

PNG, GIF, and JPEG Image Compression

When you hear mention of digital image compression or graphics image compression, it refers to the variety of methods for reducing image file sizes. In digital platforms, these are usually methods to compress PNG, GIF, and JPEG files.

To be clear, PNG, GIF, and JPEG formats are all forms of image compressions themselves — formats to both compress image files and standardize them so more programs can read them. But, you can further compress PNG, GIF, and JPEG files using an image compressor like ShortPixel to reduce the sizes even more.

All three formats have their unique properties, with individual advantages and disadvantages:

 

JPEG Compression

Named after its founding committee the Joint Photographics Expert Group, JPEG files were designed to reduce image sizes for better image optimization. JPEG compression can create millions of colors by mixing and combining 3 primary colors — red, blue, and green. This makes JPEGs ideal for photography and photorealism; however, they are lossy and not lossless, so it rarely creates perfect compressions.

 

GIF Compression

The Graphic Interchange Format relies on a fixed palette of 256 colors, restricting its range of colors but keeping file sizes small. GIFs are perfect for simple animations and icons, but a poor choice for detailed images due to their limited colors.

 

PNG Compression

Somewhere in the middle of JPEG and GIFs lies Portable Network Graphics, which has two variants: PNG-8 and PNG-24.

Like GIFs, PNG-8 uses the same 256-color palette, but has better transparency options and usually exports slightly smaller files. However, PNG-8 does not have GIF’s animation options.

The lossless PNG-24 format is for more complex images, able to recreate millions of colors like JPEG compression. Unlike JPEGs, PNG-24 offers better transparency options, but is not as compatible with as many apps and platforms as JPEG. PNG-24 are also easier to edit without reducing quality.

 

Photography Blogs and WordPress Image Compression

(Photo by Annie Spratt on Unsplash)

Every site has images and therefore every site can benefit from image compression. But the more images on a site, the greater the effects of an image compressor.

WordPress sites can take advantage of WordPress image compression plugins to compress their image automatically. Take our ShortPixel WordPress plugin, which batch-compresses automatically so all you do is install it and never worry about it again. (Our plugin also features a “Glossy” option for high-quality lossy compression, ideal for photographers and all-around image optimization.)

Source: Pixabay

Photography blogs in particular need to choose the right image compressor not only because they have more images, but also place more emphasis on image quality. Especially if uploading in HD quality, all that image file data adds up fast. To keep page loading times down to an acceptable timeframe, image compressors are practically essential.

 

Image Compression Techniques

In addition to choosing the appropriate image file format, you can go the extra mile and compress PNG, JPEG, GIF, and other image types a second time using an image compressor, or do it yourself in PHP.

 

Online Image Compressors

Image compressors are software that run an algorithm for reducing file sizes for maximum image optimization. Often, image compressors let you chose between lossy or lossless (or “glossy” in our case).

For small jobs or individual images, you can use a free online image compressor. These work well, however, they often have limitations since they’re free; most of the time, you can’t batch upload, and are limited to a certain number of pictures or file size. Some free online image compressors don’t reduce image sizes as much as they can unless the user pays for the premium service.

If you’re serious about image compression and site optimization, you’ll need to invest in a paid image compressor service. The advantages of premium image compressors are:

– greater capacity of images
– bulk/batch uploads
– no file size restrictions
– better support options

The beauty of image compressors is how easy they are to use. Often, all you have to do is upload the image and the compressor handles the rest — sometimes, as with our WordPress plugin, you don’t even have to do this because it’s automatic.

 

 

PHP Image Compression

If you’re comfortable with coding and have some time to spare, you can also compress images yourself in PHP with its built-in function. With this snippet, you can alter the quality of the image by inputting your own variable between 0 – 100.

 

<?php

      function compress_image($source_url, $destination_url, $quality) {

       $info = getimagesize($source_url);

        if ($info['mime'] == 'image/jpeg')
              $image = imagecreatefromjpeg($source_url);

        elseif ($info['mime'] == 'image/gif')
              $image = imagecreatefromgif($source_url);

      elseif ($info['mime'] == 'image/png')
              $image = imagecreatefrompng($source_url);

        imagejpeg($image, $destination_url, $quality);
    return $destination_url;
    }


?>

 

(Don’t forget to make sure the GD library for PHP is installed.)

If code goes over your head, or you simply don’t want to waste time manually writing this for each image, it’s best to use a image compression tool instead. For example, ShortPixel algorithm are pretty smart and don’t apply the same compression ratio for all images, being able to judge the picture quality of the original images.

 

Takeaway

Easy, inexpensive, and effective — image compression is so useful, it’s sure to become a site management necessity in the next few years. But you can get ahead of the curve today by implementing it in your posts now. See for yourself with our quick image optimization test, or download our free ShortPixel WordPress plugin here.