How To Make A Website Load Faster With Pictures

Back to Blog

One of the biggest ranking factors in Google is page speed. The slower your website, the quicker people leave. The faster your website loads, the happier your users are. So if you have a website that has a little or a lot of pictures, I'll tell you in this post how to make a website load faster with pictures.

So... How Do I Make My Website With Pictures Load Faster?

It's pretty easy, at least from a developer's perspective. But for the non-devs out there, I'll tell you how.

Decrease File Size of Pictures To Make Website Load Faster

How does file size of a picture affect your website's ability to load faster?

The short of it is, if you have a large picture, it takes longer for your website's browser to render out the photo. The reason for this, is that there's a lot more data to load to the page if your file size is larger.

Ever try opening a super big file on your computer and it takes forever to load? You know how frustrating that is? Well, it's the same for your users.

I can't tell you how many times I've seen websites with pictures that are absolutely massive in file size. We're taking anything about 200kb in size. Some pictures I've seen are well over 1 megabyte, which is a huge no no.

Use Photoshop To Reduce Picture Size To Make Your Website Load Faster

Photoshop has a nifty option called "Save For Web".

When you have an image open in Photoshop, simply go to File > Save For Web. Naturally, this allows you to compress your image size without losing a ton of quality.

You can adjust the amount of quality you'll lose, depending on how small you want the image.

There will always be a trade off. A good range of quality is anywhere between 60 and 80.

Tiny.PNG To Make Your Website Load Faster With Pictures

Tiny PNG is a website I use all the time to compress images. In fact, more times than not I export images in Photoshop using Save for Web, and then bring them to Tiny PNG to compress them even more.

So instead of having an image that 1 megabyte in size, after both compression techniques I come up with an image that's a tenth of the size!

Load Website Faster By Using A Caching Plugin

This is really only if your website is powered by WordPress.

WordPress has a bunch of different plugins that cache your pictures. Meaning, it saves the contents of your website in the user's browser, so they don't have to fetch and load the content for next time. They're just there.

W3 Cache plugin for WordPress is a great choice for this.

Concluding How To Make A Website Load Faster With Pictures

Compressing the images using either Photoshop, TinyPNG or both. As well, use a caching plugin to make a website load faster with pictures. Hope you found this helpful!

Back to Blog