How to Speed Up Your Site by Fixing Your Images?

Sahil Kakkar

2 years ago

Unoptimized (or poorly optimized) images are the most common reason for your website’s slow loading speed.

Perhaps your website loads quickly, 39% of people can STILL stop engaging with it if the images won’t load or take too much time to load.

And images account for 68% of total page weight (which is a LOT!).

Hence, we can’t risk keeping images unoptimized.

So, follow these quick techniques to optimize your images and ensure faster page loading speed.

Before you start…

Check whether images are really responsible for your site’s slow loading speed or are there more issues.
Use Google PageSpeed Insights to analyze your site’s loading speed.

Then, scroll down to ‘Diagnostics’ and ‘Opportunities‘.

Here, you can analyze EVERY parameter affecting your loading speed in detail and uncover opportunities to improve it.

The report mentions image-related issues as well.

This is the quickest way to find and fix image-related (and other) issues affecting your site’s loading speed.

BUT, there’s a catch – the tool can only find such issues a few weeks after you push a page live. And it’s not wise to wait because loading speed is a Google ranking factor, and your SERP rankings might plummet if your page loads slowly.

So, why not optimize the images before uploading? After all, prevention is better than cure.

These techniques will tell you EXACTLY how to do it. Let’s begin.

1. Choose the Right Image Format

Website owners prefer using these four image formats:

JPEG (or JPG – Joint Photographic Experts Group)

It is a compressed image format with a slightly reduced quality. JPEGs are best suited for photographs or images with a lot of details and colors.
Compressed image = lower file size = faster loading speed
PNG (Portable Network Graphics)

It is an uncompressed image format with higher quality suitable for images with transparent backgrounds like logos and fewer colors.
PNGs are available in two formats:
PNG-8

It has a limited palette of 256 colors but a reduced file size allowing it to load faster.
PNG-24

It doesn’t have a limited color palette; hence, it’s a heavier file that takes longer to load.
GIF (Graphics Interchange Format)

GIFs use a limited palette of 256 colors while ensuring lossless compression. It is best suited for animated images.
GIFs take time to load. It is advisable to use PNG-8 images over GIFs.
SVG (Scalable Vector Graphics)

JPEG, PNG, and GIF are raster graphics (made of pixels), and SVGs are vector graphics (made of paths). So, SVGs don’t need an HTTP request to load an image file.

Among these, which is the right image format for your website?

It depends on your purpose.

Statistically, PNG and JPEG are the most popular formats that websites use. And they are the ideal choices because of the balance between image quality and loading speed.

2. Resize Images Before Uploading Them

If you upload images without altering their dimensions, they might have larger sizes than required.

For your images to fit into screen sizes of different dimensions, the browser needs to resize your images, which consumes time and impacts your site’s loading speed.

Resizing before uploading helps your images fit into the specified space on the screen and load faster on the browsers.

Now, the optimal size of images varies from website to website. It depends on your website’s theme or design.

Using the built-in inspector tools that most browsers have, you can determine the exact sizes of images used on your site.

If you want to check the size of images used on your competitor’s site, you can do it in the same way.

Just inspect elements of a web page, click on the image, and the browser will show you the exact image size.

The image sizes may vary depending on the purpose, such as a banner, pop-up, button, etc. Here are some popular image sizes (in pixels) that most websites use:

You can keep them as a reference for resizing images you upload on your website.

The width and height of blog posts or other inside content images should not exceed 1500 px and 1000 px, respectively.

There are several ways to resize your images effectively:

Using Photoshop

Photoshop is a dedicated photo-editing software. It preserves the details and sharpness of images while resizing.

Select Image > Image Size. A dialog box will appear. It will show you the current image’s size.

Enter your required dimensions (width and height) to see the new image file size. Click OK, and resizing is done.

You can save the file in the desired format and upload it to your site.

Using Paint

Windows Paint is a simpler alternative to resizing images before uploading them.

Open the image you want to resize in Paint. Select resize from the options in the toolbar.

Enter the new dimensions as per your requirement. (Paint maintains the aspect ratio by default.) Click OK and resize your image.

Save your file in an appropriate format and then upload it to your site.

Using WordPress Plugin

If you are using WordPress, you can use a plugin like Imsanity to resize your images.

The plugin will automatically resize an image that exceeds the size limits specified by you and replace it with the uploaded image.

3. Compress ALL Images

Compression minimizes the file size in bytes without degrading the quality of your images.

It helps speed up the transmission of images and reduce their storage space on the servers.

So, make sure you compress every image before uploading it to your site.

There are two ways to shrink your image’s file size:

Lossy

Lossy compression reduces the file size to a great extent. Some pixel data and image metadata like date, resolution, dimensions, color, device, etc., are removed.

There is a reduction in image quality, but the human eye will not distinguish between uncompressed and compressed images.

Lossless

Lossless compression provides relatively larger file sizes. It does not alter the pixel data but removes the details in the metadata. So, there is no loss in image quality.

You can also select the level of compression for your images.

The higher the compression level (or percentage), the poorer the quality…

…and the smaller the file size.

Now, you must be wondering when to use which type of compression.

Go for lossless compression when you cannot compromise on the quality. You can select the appropriate compression level as per your need. It works best for photographs and website images.

But, if the quality is of lesser importance, go for lossy compression. You can always use it for screenshots or similar images.

Here are some web tools that offer efficient image compression:

If you are using WordPress, here are some popular image compression plugins:

4. Use CDNs for Images (and other content)

A CDN is a geographically distributed network of servers that enables faster content delivery on the web. It enhances the performance and speed of the websites, providing a great user experience.

Using a CDN for your images (and other content) speeds up your site in two ways.

First, your images are optimized (by default) to occupy less space on the storage servers.

And second, your images are stored on multiple servers present at different geographic locations.

So, whenever users visit your site, they don’t have to load image files from your origin server. Instead, they can download them from the nearest server of your CDN.

Using a CDN helps improve your page loading speed because science still limits the data transfer rate. The distance between your origin server and the user’s location impacts the data transmission rate.

If a user is located far away from your origin server, it will consume a lot of their time downloading the images (and other content). And even if it takes a few seconds extra to load, users will bounce back from your site.

But, with a CDN, users will be able to download the images from the nearest network server. It will be quicker as the distance between the network server and the user’s location reduces significantly.

So, you must use a CDN for images.

There are several quality CDNs available for free on the internet. You can use any of them and achieve faster image loading.

Here are some popular and efficient CDNs for your help:

5. Enable Browser Caching

Every time users visit your site, they have to download all website resources such as images, HTML and CSS files, JavaScript files, media files, PDFs, etc., from the server.

If you enable browser caching, you tell the web browsers to download and save your site’s resources in the temporary local storage.

You can also inform the web browsers about:

The resources they should and should not cache.
The time for which they should keep a particular cached resource.

So, whenever users revisit your site, they can download the resources from the local storage rather than the server.

Thus, it will help your web pages load faster for repeat visitors.

Look at the easily achievable page loading speed improvement with browser caching:

It’s more than 100 times faster.

Most of the page speed testing tools suggest ‘leverage browser caching’ for the same reason.

Since images take the maximum time to load on a site, enabling caching for images boosts your site’s loading speed to a great extent.

You can leverage browser caching for your site’s images in two ways:

Using .htaccess

It is the most commonly used method to implement browser caching. You can add a few lines of browser caching code to your .htaccess file to enable it.

In the code, define the type of resource that must be cached and the duration for which it must stay in the local memory. (As per your needs)

That’s all set for your images (and other resources) to load faster for users.

Using Plugins (for WordPress sites)

Plugins automate the process by adding the browser caching code inside the .htaccess file. But, you might not find a lot of personalization options with them.

Here are some plugins to speed up your WordPress site by enabling browser caching:

With that, you can considerably reduce the loading time of your images.

Bonus: Add Alt Text to Your Images

Alt Text is a brief description of an image that clearly states what the image shows.

It is important for three reasons:

Browsers display the alt text in place of images if users use a low-speed internet connection and images take time to load.
Screen readers read aloud the alt text to make visually impaired users understand what the image is all about.
Search engines use alt text to understand a page’s contents better and rank it appropriately.

Now, writing alt text for images is perhaps very easy. You have to think about how you would describe an image to your kid, and you have a great alt description in your hand.
For example, the right alt text for the image given below would be: a cat jumping up in the air.

It clearly describes the image. Users can get an idea of what the image is all about even if they don’t see it.

So, you must add alt text to all images you upload on your site.

But if you’ve already uploaded images, you can easily find the ones without alt text using the free Website Analyzer.

It analyzes all the images on your site and shows the total number of images with a missing alt attribute.
When you click on View More, it shows the URLs of the images you need to fix.

You can optimize the alt text of these images and enhance your site’s user experience.

Also, you’ll notice your images performing better in Google Images search results. That’s because alt text is one of the most important SEO ranking factors for images.

So, it’s a win-win situation for you!

Enhance Your Site Speed By Optimizing Images

As mobile internet usage continues to grow, we’ll be looking ahead at even faster and smoother sites.

With that said, leaving your images unoptimized is a blunder that you should never do. If your speed is slow, use the above techniques to optimize your images.

When you test your site again with Google PageSpeed insights, I’m pretty sure you’ll notice a great improvement in its speed!

Did you put any of the techniques I mentioned to work? Which one do you think is the most effective one? Let me know your thoughts.