Optimizing images for a fast website

No one likes waiting around a long time for a slow web page to load.  It may cost you visitors (and potentially paying customers) if you don’t get it sorted out by optimizing your images, you will decrease the time it takes to load a web page, and it’ll keep your visitors happy. Smaller file sizes also use less bandwidth, so it’ll keep you ISP happy too.

Visitor retention times are important, so you don’t want to give anyone an excuse to click away from your website.

How fast do YOUR website pages load?

We will discuss the following issues in this article

Are your pages slow to load?
Are they bogged down with a lot of large images?
Do your images look too good? Perhaps they are of higher quality than they need to be.
Are your images optimized for search engine indexing?

The amount of time your website pages take to load is of critical importance. If a page contains full-sized images, it will likely increase the time it takes to load, and you will annoy your visitors. Also, they may leave your website and never return.

It pays to do a little homework before adding a ton of images to your website – especially if they are not optimized.

While we’re on the subject of SPEED, remember that the speed of your hosting service is also of critical importance too, so check it and ensure that this area is functioning at its highest level as well.

Some website themes automatically compress images on the fly. WordPress is one of these. I prefer to compress my images before inserting them into my website. This ensures I have the smallest possible files size, and if WordPress does compress them further, that’s just an added benefit.

Do your images look too good?

Look too good?. Yes, your images may be at a 100% quality level, when 80 or 90% (or even less) will do. Also, if you have not compressed them using (at the very least) lossless compression, your images will be using a lot of additional storage space and may well be hindering your page loading speed. Let’s take a look at the two most commonly used compression formats.

Lossy or Lossless … Sounds weird but it’s important!

Image compression is a complex issue, so we are going to keep it as simple as possible in this article. Sometimes we can make things more complex than they need to be.

It is important to understand file formats and how they affect image sizes, quality, and website page loading speeds.  It is also important to know how to maintain the highest image quality without making the file size too large.

A lossless format preserves the file’s original data, whereas a lossy format allows the image to degrade during compression to obtain a smaller file size, thereby possibly losing some image quality.

Here are some native formats:  We will be using JPEG and PNG in this article.

Lossy formats:  JPEG (JPG) and GIF
Lossless formats:  PNG, BMP, and RAW

JPEG files are smaller than PNGs and are the only two formats I use for my website images. PNG’s have a higher quality and larger file sizes than JPEGs. The two are used for different and specific purposes.

Both can be compressed, but JPEGs, which come in smaller file sizes, to begin with, generally don’t compress as much as PNGs.

Is JPEG really that bad because it’s a lossy format?

JPEGs are really a lot better than the word lossy implies.  They get a bit of a bad rap because of image degradation and data loss.

Although a compressed JPEG does not reduce it’s file size as much as a PNG, the compressed images come out just fine so long as you select a relatively high Image Quality setting (such as 80-90%) before compressing. Some compression tools don’t allow you the flexibility to set the image quality, but even if they don’t, JPEGs will still come out very nice. So don’t be too concerned with this.

In fact, you probably cannot tell any difference between an original and a compressed JPEG image within a website environment, as long as you don’t increase the compression by too much. I think you’ll be convinced after taking a look at the enlarged compressed images further down this article, that JPEGs are just fine and far less problematic than PNGs.

Increasing Compression = Decreased Image Quality

You will only see a noticeable difference in image quality if you increase the compression too much. Increasing compression is a great way to vastly reduce the file size, but you need to find a balance for your application – you don’t want the image to look out of focus. It’s sort of like a seesaw.

For example: A 41KB JPEG picture compressed with a 90% image quality in lossy format may become approximately 31KB.  However, if you increase the compression by reducing the image quality to say 10%, the file size may be as small as 4KB, or less. This is a considerable reduction of 90% from the original image size, BUT the image will have noticeable degradation.

The original JPEG image size is 41.1KB for the pictures below.

90%+ Image Quality 30.4KB

10% Image Quality 3.16KB

What are the best image formats for websites?

Photographs: Photos should be saved as JPEGs (JPG) whenever possible. These file sizes are quite small, and when they are compressed, they still look great. If you saved the same photo in a PNG format, it would be much larger. The JPEG format is best suited for photographs.

Graphics: If your graphics contain many lines, text, and solid colors, they should be saved as PNG files. Logos, graphs, and drawings are an excellent example of this. PNGs also handle transparency well.  When used for graphics, they are better quality than JPEGs, and the file size will be larger. You can zoom in on those fine lines and details while maintaining image quality. If you are saving a file to a PNG and you have the option of selecting the “bit size” such as 8bit or 24bit, it’s better to choose the higher number to improve image quality and color clarity.

With the JPEG format being most suited to photographs, it may have problems if you use it to save images generated by a computer. Particularly images that have sharp edges, and fine lines, and move abruptly from one solid color to another. That’s why PNGs are much better for graphics files.

Save your photos as JPEGs

Save your graphics as PNGs

The two images shown above are AFTER compression, and they still look great for website purposes. These two images are used in the following compression tests discussed in detail below.

Let’s compress the above images using two platforms

Below are the results after using two independent platforms to compress these two images. They are both free to use and do a good job. We will look at each process and the results in detail. The same ORIGINAL images (butterflies and gold logo) were used in both tests.

The following is a lot of information to digest, so I’ve summarized my results at the bottom of this article showing what I have found that works best for me when producing images in the two compression formats.

In the following examples, a minimum of 90%+ image quality is maintained for compression because otherwise the images will degrade too much and appear out of focus.

Using Resizeimage.net

RESULTS:  Butterfly Photo JPEG

Lossy
Before: 54.4 KB
After: 43.5 KB   (20% reduction)

Lossless
Before: 54.4 KB
After: 51.5 KB   (5% reduction)

RESULTS:  Gold graphic logo PNG:

Lossy
Before: 123 KB
After: 28.9 KB   (77% reduction)

Lossless
Before: 123 KB
After: 136 KB   (10% reduction) *

* Notice how the image size increased for the Lossless compression using Resizeinage.net. Obviously, we wouldn’t use this larger image.

Using Compressor.io

Each image was compressed using both the Lossy and Lossless methods. This resulted in four (4) images as set out below.

RESULTS:  Butterfly Photo JPEG:     

Lossy
Before: 55.6KB
After: 33.7KB  (40% reduction)

Lossless
Before: 55.6KB
After: 55.6KB  (none)

Notice how the JPEG photo did not compress at all when using the Lossless option in this platform. This is typical because lossless compression maintains image integrity. If you look at the two resulting images directly below, you’ll see that the clarity is the same.

So even though lossy compression achieved a 20-40% reduction in file size and lossless achieved almost no compression, the images are impossible to tell apart. So most of the time it’s perfectly ok to use LOSSY compression for JPEGS. This gives you the smallest possible file size and maintains image clarity. The same is not true for PNGs as you’ll see below.

Lossy JPEG

Lossless JPEG

Let’s look at bigger Images to check clarity

Below is the ORIGINAL and two compressed images. I have stretched them out to show that there is no noticeable difference in clarity.

ORIGINAL JPEG image (54 KB)

Lossy JPEG image (34 KB)

Lossless JPEG image (54 KB)

RESULTS:  Gold graphic logo PNG:

Lossy
Before: 126.82 KB
After: 34.71 KB   (73% reduction)

Lossless
Before: 126.82 KB
After: 113.84 KB  (10% reduction)

Lossless PNG 113.84 KB

Lossy PNG 34.71 KB

Both of the above images have excellent clarity. Their dimensions have been reduced from the original images. When an image is smaller than the original (dimensionally), it is more difficult to detect any degradation that may be present. Below I have increased their dimensions, so they are close to the original size. This will make any imperfections more visible.

Let’s look at bigger Image sizes to check clarity

Below are the several gold logo images stretched out. It’s sort of like zooming in but in reverse. This allows us to check for any compression related image quality loss.

If you look closely to the 3rd image below ((L3) PNG Lossy compression), there is definitely noticeable image degradation. There are quite visible serrations occurring on both the background light-colored circular area. Also in the center of the wings, the shadow area also has serrations. I have marked the image with arrows to make the degraded areas easier to see. This is why you shouldn’t use Lossy compression for graphics related images.

L1) ORIGINAL PNG image (123kb)

L2) Lossless PNG image (111 KB) – Using Compressor.io

L3) Lossy PNG image (33.8 KB) – Using Compressor.io **

L4) Lossy PNG image (28.9 KB) – Using Resizeimage.net **

**  I have included a compressed gold logo image from each platform because there is a difference in quality. Resizeimage.net produced the best PNG lossy compression result (L4). You have to look closely, but there is obvious degradation in multiple areas of the image (L3).

Consider pinch-to-zoom on mobile devices

With the increased use of mobile devices, it is even more important to get yourself familiar with image optimization. Users of these devices will pinch and zoom images because they often appear too small on the device.

However, no matter how careful we are, zooming in on a picture or image will generally cause it to become pixilated to some degree.

Results of the above tests in a graph

Two compression test results stand out from the rest on the above graph.

Test 6    The image clarity degraded too much. See image L3 above.

Test 11   The compressed file size got larger, so we would use the original.

My Quick Reference Chart

Below is the chart I use when compressing images for my website. It’s based on the data mentioned in this article. Moreover, it saves me time by not having to think about all of the factors that may or may not affect image quality and files sizes.

Inside each box is the platform I use for the specific task. Under the platform name is the major reason/s why I use it, and why it disqualifies the other platform.

QUICK REFERENCE CHART NOTES:

The chart shows you the platform that performs the best for each file type (JPEG or PNG),  for each compression method (lossy or lossless). It also gives the reason/s why the platform was chosen over the other one.

NOTE 1:  PNGs give you the most drama when compressing.  The results from independent platforms are not always consistent. So you need to compress them on more than one platform, and then choose the best outcome for your application.

I use the chart above to give myself an advantage by knowing where to start and where the best outcome will likely come from.

If I get a suspicious result, I always check with the other compression platform. A suspicious result may be that a file’s size increases instead of decreasing after being compressed. This occurs quite often when using Resizeimage.net for lossless compressions of PNGs. Because of this, I always start a lossless compression of PNGs by using Compressor.io. You can see this in the above chart.

Due to the unpredictability of PNG file compression, relating to both image quality and file size, you never can be 100% sure which compression platform will give you the best result until the compression is completed. It doesn’t take a great deal more time to compress them on two platforms versus one.

Another factor that affects the result of PNG compression is the percentage of solid colors, lines, and text within the image. This often dramatically affects the resultant file size, and each platform will give you a different result.

Which compressor is better?  The Pros and Cons

Resizeimage.net: My rating 8/10
Compressor.io: My rating 9/10

I found both compression tools excellent but would give a very slight edge to compressor.io because I found it extremely easy to use. It took me longer to get the job done with resizeimage.net because and there is an additional step to upload images and quite a few settings for quality control.

Resizeimage.net
My main Pro: Great image quality on lossy compressed JPEGs and PNGs.
My main Con: It has too many settings to choose from.

Compressor.io
My main Pro: Extremely easy to use.  You only have one option to select prior to compressing.
My main Con: PNG Lossy compression has a significant effect on image quality.

IMPORTANT: It pays to have both programs (and possibly others) in your arsenal because some images will produce a better result on one platform compared to another.  You can see this clearly in the lossy compression results for the gold logo PNG file above (pictures L3 and L4).

You are probably starting to see that there are not too many issues with JPEG compression, but when you are dealing with PNGs, quality issues require comparing results from different platforms to ensure you get the best result.

Resizeimage.net             

Pros

• Free and easy to use
• Good compression of JPEGs and PNGs
• Can do a batch of images (up to 25 images, 0-30MB per file, 0-50MP per image)
• Great image quality of PNGs when compressing in lossy
• Good control over image quality settings

Cons

• No drag and drop feature for single images – you need to upload all images
• Website layout and notation is a bit confusing

Compressor.io                 

Pros

• Free and extremely to use
• Website layout very clear
• Drag and drop feature for single images
• One-click selection for Lossy or Lossless formats
• Small file sizes after compression of JPEGs and PNGs
• Can do a batch of files (up to 10MB total at one time)

Cons 

• Lossy compression of PNGs has too much image quality degradation
• No control over image quality settings

Optimizing Images for Search Engines

When working with images, you often end up with weird file names. Moreover, after compressing them, the names get even more bizarre. The names will still be attached to the images when you insert them into your website unless you rename them first.

Search engines prefer words rather than a mixture of letters and numbers.  So rename your images either before or during the process of inserting them into your website to make them more search engine friendly.

Example:   Butterflies on flowers  is much better than  butterfly-1127666_640

Wrapping it up

When I first started building my website, I didn’t pay much attention to image optimization. It’s a bit complex, but once you figure it out it’s no big deal, and there are great free tools, like the two mentioned in this article, that will help you get the job done pretty easily and quickly.

It’s a big job getting a reliable and replicable “system” in place. It involves a lot of research and testing. However, once you nail down the parameters, and then put it into an efficient process that you can use over-and-over again, it will make your life so much easier.

Because images are an essential part of your website, it is vital to have a fast method of getting them optimized and into your web pages with minimal fuss.

I wrote this article in the hope that it may help some people out with this process.

Wikipedia has very good articles on JPEG compression, Lossy and Lossless formats.

You can read the Wikipedia document here 

Excerpt from Wikipedia article:

“The compression method is usually lossy, meaning that some original image information is lost and cannot be restored, possibly affecting image quality. There is an optional lossless mode defined in the JPEG standard. However, this mode is not widely supported in products.

There is also an interlaced progressive JPEG format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, support for progressive JPEGs is not universal. When progressive JPEGs are received by programs that do not support them (such as versions of Internet Explorer before Windows 7) the software displays the image only after it has been completely downloaded.”