How to load images faster on website

Hi I’m Praneeth Kumar.

In this blog I will explain how to make a website load faster with pictures.

Pictures are crucial for your blog since it will make your blogs more engaging ,appealing and useful but they can either increase or decrease speed drastically.

And website speed affects both SEO ranking and revenue so fast loading speed of site is a must.

Let’s see how you can use images properly without compromising speed and SEO.

So without further ado let’s get started.

Here is a 30000 Foot view of the blog post

how to make a website load faster with pictures?

Before you implement any change or use any technique I mentioned in this list to improve your website loading speed make sure that you check your current website loading speed in tools like

• Page speed insights for core web vitals score.
• Ping dom to check your website size.
• GTmetrix for checking how your website loads in different locations world wide.

Using those scores, you can then start implementing techniques and compare the results to see improvements.

So let’s dive right in.

1. Choose a Reliable hosting.

By far the most important factor that determines how fast your website loads and server response time on User browser is your web hosting service.

Your web hosting is where your website will be stored on the internet and when people enter your website domain name or search for your website, browser gets connected with DNS and then sends a request to show your website to server where

website is stored in return the server accepts and loads your website to user browser and the time it takes for your web server to load the website on user browser is called initial server response time and it determines how fast your website loads and speed of your site for users.

• Read what is web hosting and why it is important?

If you want a Fast and reliable website speed and uptime, I would personally recommend you to start your website or switch to bluehost web hosting service.

They are one of the oldest and most popular web hosting companies in the world and they manage and host more than 2 million domain names and websites on the internet.

They offer a free domain name and free website migration and 99.9% uptime guarantee as well.

You can read my bluehost review here.

• Read the ultimate comparison between Bluehost vs hostinger Vs siteground in detail.

Or,

Purchase Bluehost Hosting for 65% off on your shared hosting plans with this link and with a 30 day money back guarantee.

Your web hosting will play a huge role in your website loading speed but let’s take a look at other factors that also have a good contribution to making a website load fast and stay reliable.

2. Use a CDN.

A CDN is basically a content delivery network.

You should always have CDN connected with your website to make your website load fast.

A CDN is important for a website loading speed because it will store multiple copies of your website in different locations of servers worldwide so that users who visit your website from different locations of the world does not have to wait a long time in order to let the website load on the browser.

For example if you have a website that get traffic from countries like United States of America and United Kingdom but you have your website server located in Australia then using a content delivery network

your website will be stored in multiple web hosting servers that are located worldwide and

whenever people want to visit your website the nearest server to the user will accept and send your website to the user browser so that it reduces the distance and eventually reducing the time it takes for website to load.

Hence it got a name CDN as it delivers your content in a network of servers worldwide reducing the distance between user and server and eventually time as well.

• Learn my guide on how to target international audience with your blog and get traffic world wide or from a specific country?

Since I have recommended bluehost hosting service they offer a free CDN that you can easily integrate with your website.

If you have a different web hosting company then you can use many free and paid content delivery networks like cloudflare and akamai, Google, etc.

All you have to do is to change the nameservers of your domain name to the content delivery network so that your website can easily get connected to that respective CDN service.

3. Choose a lightweight theme.

When you first install wordpress on your website hosting make sure that you install and activate a lightweight and user-friendly wordpress theme for your website.

A theme will give your website a nice look, layout and design for your website but it is equally important for your website loading speed because

it will add CSS, html & java script files to your website code in the backend and more files means more size and more time to load the website.

Make sure the theme you install has,

• It has alot of downloads and positive ratings.
• It has a good customer support.
• It is mobile friendly and light weight in size.
• It is easily customizable.
• It is regularly updated from the developer.

There are many popular wordpress themes that you can use on your wordpress website like Astra and generatepress

Now let’s take a look at how you can increase your individual website pages speed with pictures.

4. Choose a right image format.

When you download images from your any image website like stock photos there are different types of image formats but you should download only the best image formats for speed and quality like,

• JPEG
• PNG
• Webp

Always stick with these 3 formats of images when using them on your website, they are small sized yet have good quality images and also help speed up the website.

5. Compression image sizes.

When you first download images from your Stock image websites and or use custom images from tools like Canva then normally those images would be in a few mega bytes sizes,

it would look small size but when you directly upload those images, infographics to your website then it would drastically increase the website size and,

If website size is large then obviously it takes more time to load the website.

• Read my guide on what is Canva, pros and cons of using it?

Like if you have 2 websites one has a size of 500kb and another of 3mb, obviously the one with 500kb will load faster because the server has to load a few things over the heavy one.

And images are the largest loading element on a website which are largely responsible for slow loading websites after the web hosting service.

Hence you should consider compressing your images sizes, 

What compression is that it will reduce the image size from MB to KB without compromising with the image quality but

it helps reduce web page size as web page size includes total images, text, CSS, html, files and small web page size means server loads the page faster and reducing the time over all.

If you have a wordpress website then you can use plugins like shortpixel and smush to compress your images automatically or you can use tools like tiny png to compress images before uploading them to your website.

Apart from that you should also use gzip compression to compress content on your website.

6. Resize images properly.

Resizing the images size is also crucial for improving your website loading speed.

If you have an image size 3000×4000px and you only need 1000×2000px for your blog, make sure to resize the original image to your respective dimensions in image settings.

It is simple sense, if the image size is resized and reduced from the original image then since size decreases, image loads faster than original image because it contributes to overall web page size and speed eventually.

You can use plugins like imsanity to size your images in WordPress automatically.

This is how you can decrease the loading speed of a website.

7. Lazy load your pictures.

Lazy loading is a process of loading an image when it is needed and when a user tries to scroll and try to interact with the images of the site until that it will appear a blank space in place of image.

This will increase your website loading speed by not loading the images and other files at the first place when showing the website in the user’s browser.

This will automatically reduce the web page size and load the site faster and load images only when necessary and users interact with them.

You can use A3 lazy load plugin for lazy loading images on your WP website.

8. Caching is key.

Caching is a process of storing website files and data in user browser when they first visit your website so if they plan or

visit your website in future then the data that is stored on the user’s browser will be shown on the user desktop or mobile phone instead of downloading the website on user browser again from the server which takes a lot of more resources and time.

By storing the website files on the user browser, it will reduce the cost of resources, bandwidth and

also increase your website loading speed because the website files and data is already stored on the user browser who already visited your website earlier.

The website files and data will be renewed for every specific time period so that users can visit the latest version of the website which is fully updated and fresh everytime they visit.

Since you have a website hosting on bluehost you don’t have to worry about the caching because bluehost already enables browser level caching to your website or you can use plugins like W3 total cache for caching of your website.

9. Minify and remove unnecessary files.

Now apart from images, there are some other things like unwanted CSS, JavaScript, html files which can cause your webpage to load slow.

More unnecessary files attached with your web page code means more files the server has to render, download and show which increases the site size and loading time.

Hence there are a few things you can do mentioned below.

• Uninstall all the outdated and poorly coded wordpress plugins that you installed on your wordpress website because such type plugins will cause conflicts with your website and also increase your loading speed and cause safety issues with your website.
• Remove all the unnecessary HTML,CSS and JavaScript files on your webpage using assets cleanup plugin.
• Use WP rocket or WP optimise plugin to minify JavaScript, CSS, html files this will speed up rendering of your website on browser removing unwanted spaces and CSS files.
• Use asynchronous loading of the website which loads multiple resources at a time speeding up the loading and reduce the time.

The lesser file you have on your web page the lesser the size of the web page will be and eventually lesser the time it takes to load the webpage.

10. Stop Hotlinking.

Hotlinking is the act of linking to a file that is hosted on another site, instead of downloading the file, hosting it on your own server, and providing proper citation. Images are most frequently hotlinked,

but audio files, movies, flash animations, and other digital assets can also be hotlinked.

Such hotlinking can cause more resources, bandwidth of your servers which can lead to slow website speed since resources are used for loading images on other sites.

You can easily protect your website files and images from hotlinking in the Cpanel of your website.

11. Remove unnecessary images.

I agree that adding images to your website is very important to make your blog very engaging and appealing to read for users and I use images quite alot but it does not mean that you should use image everywhere on your blog.

I think you should also consider adding images only when it is unnecessary and makes sense like,

• When images explain or clarify a point you stated in your blog.
• When images evoke curiosity or other emotions of readers on blog.

You should only add images where it makes absolute sense and help The Reader understand the concept better that words can’t or make it difficult.

Avoid images that are used for things like,

• Decorating the blog.
• Adding images for the sake of it.

This way by removing images where it does not make sense and irrelevant you will decrease the size of the page and therefore decrease the loading speed as well.

Ending remarks;

These are all the techniques and strategies you can use to improve your website loading speed with pictures.

Do comment down which technique you want to use to increase loading speed of website.

Share the Blog with your family and friends if you have found it helpful.

Sharing is caring.

I will catch you next time till then keep learning and keep growing.