Web Pages Loading Slow? Optimize Images to Decrease Page Load Time

Generally, if your site takes more than 2-3 seconds to load, the average internet user will abandon it in search of similar resources they’ll be able to access quicker.

Unoptimized images are one of the most common culprits of slow site load speed.

So, before you overload your website with a ton of larger-than-necessary image files, it’s essential that you optimize these images for the web.

Simply put: if your site doesn’t load fast enough, visitors will bounce away quickly, and never return.

Before we dig into how you can do so, let’s take a look at the negative impact slow site load speed can have on your users’ experience – as well as your bottom line.

The less time visitors spend on your site, the worse off your business is – for a couple reasons:

• A high bounce rate and low average time-on-page will result in a drop in SERP rankings
• The less time your visitors spend on your site, the lower the chances are that they’ll become paying customers

(Quick note: Google will also punish you for a slow site load speed even before human factors like bounce rate and time on page come into play.)

Of course, high-quality images are an essential part of most modern websites in terms of boosting both user experience and conversion rates. So it’s important that you optimize your site’s image files to provide your visitors with an enhanced experience while still managing to deliver your content quickly and efficiently.

Optimizing Images to Decrease Page Load Time

In this article, we’ll discuss how to:

• Choose the right image file type for your purposes & convert between file types
• Compress the size of your actual images
• Compress the size of your image files
• Automate image transformations
• Make images responsive across different device types
• Deliver images through a Content Delivery Network (CDN)

Let’s get started.

Choosing the Right Image File Type

Though there are a large variety of image file types you can save a picture as, the four most commonly found on the web are:

• JPG/JPEG
• PNG
• GIF
• SVGs

Though you certainly want to provide your visitors with high-quality images whenever possible, it’s important to remember that such high-quality images will have a negative impact on your site’s loading speed. Because of this, it’s essential that you know which type of image file you’re using whenever you upload an image to your site.

JPG/JPEG

JPGs or JPEGs are high-quality image files that can display 16 million possible colors. As such, they’re most-commonly used when saving complex pictures or photographs that include a variety of vivid colors.

Because JPGs tend to be of high-quality, their file size also tends to be relatively large, as well.

However, the quality of a JPG (and hence, its file size) can be adjusted depending on a specific user’s needs. This allows you to find a balance between exhibiting images of higher quality on your website and allowing for increased site speed.

PNG

PNG image files are versatile in that they can be used to reproduce high-quality images much like JPGs can, and are also a valid option for simpler images of lower quality.

This is because PNGs can be saved in 8-bit, 24-bit, or 48-bit formats. 8-bit PNGs consist of just 256 colors, while 24- and 48-bit PNG images, like high-quality JPGs, can produce over 16 million colors (truecolor).

One advantage PNGs have over JPGs is they can handle transparency.

 

 

The transparency you see in this image is a rendering of each object as a transparent object. If this image were a JPG, individual colors would be needed to create the appearance of transparency.

A comparison of SVG and PNG image files with transparency, and JPG without.

High-quality PNGs are larger than high-quality JPGs in terms of file size, so they might not be the best choice when optimizing your site’s images for page load time.

On the other hand, for images that don’t require photo-realistic quality – such as logos and less-colorful pictures – using PNGs might be the better option.

GIF

GIF files are used relatively sparingly on modern websites, but – depending on your needs – you still might be able to put this image type to good use.

The GIF format is well-known for being able to handle animations. When file size and page load speed is a concern, using animated GIFs can be an efficient alternative to using video clips on your website.

Like PNG-8 files, GIFs can only contain 256 colors, and can handle transparency. However, when comparing file size, PNG-8 files tend to be smaller than similar GIF files.

SVG

Scalable Vector Graphic (SVG) files differ from the other image files we’ve discussed so far, in that they are created using polygons rather than pixels.

As the file name implies, SVGs are scalable to the needs of the user or audience. Unlike the aforementioned image file types, SVG images can be increased or decreased in size without any noticeable distortion.

Vector images maintain quality even after being resized.

SVG files also differ from raster images in that the size of the actual image doesn’t determine the file size; the amount of anchor points do.

The larger “r” contains more anchor points than the smaller one.

The more anchor points, the larger the SVG file. For the purpose of increasing web page load speed, reserve the SVG format for simple images.

Like GIFs, SVGs can also be used to create animations. Such animations are also scalable, but the same rule applies: the more complex the animation, the more anchor points it will have, and the larger the file size will be.

Choosing an Image File Type

To review, here are the best use cases for each of these image file types:

• JPG: High-quality images, such as complex pictures or photographs
• PNG: Images with transparency and simple logos
• GIF: Simple animations as an alternative to a large video file
• SVG: Simple images and animations for responsive web design

Once you choose an image file type, there are still a few more ways to optimize your images in the interest of decreasing your site load speed.

Compress Image Size

Once you’ve chosen an image file type, you can still make changes to the image that will make the file size smaller (thus decreasing page load time).

First, eliminate any unnecessary pixels in your images.

Check out these two images:

Though they are almost identical, the first image includes a white border that adds nothing to the image (and probably isn’t noticeable unless a user’s actively looking for it).

After cropping the border, the image size shrunk from 869kb to 814kb. While doing this to one image might not make a difference in terms of site load speed, auditing all of your website’s images for unnecessary pixel usage certainly can.

Another factor to consider when conducting a “pixel audit” is the comparison between an image’s natural size and its display size:

When you place an image on your website, your server will load the image twice whenever someone visits your site: first on the backend in its natural size, and then on the front end in its display size. So, if an image’s original size is 1620 x 1620, but displays at 800 x 800, you’ve essentially wasted bandwidth loading 64,400 pixels that your user will never see.

By making the display size of your image as close as possible to the image’s natural size (that is, in its original state), you decrease the amount of unnecessary pixels loaded – in turn decreasing your overall page load time.

It’s also important to ensure proper dimension ratio when resizing your images to be closer to display size. In the chart above, you’ll notice changes in both height and width correlate to one another. This ensures the image will not be distorted when displayed on the user’s end. Put simply: every pixel in an unappealing image is wasted, so it’s essential you maintain the ratio of your images when you resize them.

Every image you upload to your site will affect your site’s loading speed. But by making the adjustments mentioned above, you ensure that these images take up the minimum necessary amount of bandwidth and no more.

Compress Image File Size

In addition to optimizing the actual size of your images to increase site load speed, you can also tweak the quality of the image to reduce the size of the file.

This can be done through either lossless or lossy image compression.

Lossless image compression compresses, but does not eliminate, pixel data. This allows you to compress an image in terms of its physical size and file size, and have it be reconstructed on the user’s end in its original state. PNGs and GIFs support lossless compression, but JPG does not.

Lossy image compression compresses and eliminates unnecessary pixel data. Lossy compression cuts down on the amount of colors used in an image, reducing file size in the process.

In the example above, you can see that the image on the right appears pixelated as you get closer to your screen. However, when further away, the difference is rather negligible.

The degree to which you use lossy compression can be tweaked to give your images the appearance of high-quality while decreasing the size of the actual file. There’s no real “right way” to implement this process; experiment and use discretion to find the perfect balance between image quality and site speed.

For SVG images, as mentioned earlier, the goal is to use as few anchor points as possible while maintaining image quality.

Vectorboom’s tutorial explains how a minor reduction in anchor points can drastically decrease an SVG’s file size

Overall, any changes you can make to your images that decrease file size and don’t detract from the user’s overall experience can and should be made in the interest of speeding up your website.

Automate Image Transformations and Delivery

The images you use on your website should be consistent in terms of appearance and style – for both aesthetic and practical purposes.

Filestack can programmatically resize and compress your images, and can also ensure fast delivery of your images to your audience – both of which work to increase your site load speed.

• You can change the quality of your image with Filestack
• Filestack’s responsive image feature automatically detects the size of your user’s browser and load the appropriate size without any extraneous pixels
• Filestack automatically provides content delivery network (CDN) URLs to delivery files through the Filestack CDN
• Filestack has the ability to convert image files to various formats

Since all of this is done programmatically through Filestack, your image file sizes remain consistent, regardless of the changes you’ve made.

Conclusion

No matter how gorgeous the images you use on your site may be, your audience will never see them if they take too long to load. Knowing this, it’s essential that you keep your site’s page load speed in mind when creating and uploading images.

Filestack can help you speed up your website loading time – and your content delivery – keeping your users on your page. Reach out to us to learn more.

 

Read More →