How to Use High Quality Images with Small File Sizes

How to Use High Quality Images with Small File Sizes

I take a lot of screenshots and use images in my blog posts.

A picture can say a thousand words as they say.

They certainly make blogs posts a lot more interactive, give more value to the reader, and help deliver information in an easier to digest way.

Firstly I will say from the start, I’m not the most technically minded. This post is a guide to show you how I crunch images down to a small size.

There is a good chance you have your own way of doing this, and it may be better than how I do it – if so I’d by happy to hear it.

Why Reduce Image Size

The primary reason to reduce the image or file size as much as possible is to help the page load quicker. The less kb on your page, the faster it will load.

With page loading speed one of the important SEO factors in Google algorithm, you can’t afford to ignore it.

Obviously you still need a quality image. There is no point posting anything that is going to give a less than professional look.

So how do you still get a good quality image, at a smaller file size than it started out as?

The Process to Reduce File Size of an Image

When you download a high quality stock photo they can be several MB in size. Especially if you’re investing in an image that is able to be re-sized without losing much in quality.

This is way to large for a webpage. Especially if you’re on shared hosting. Shared hosting isn’t as fast as a dedicated server, and it’s a lot less expensive as a result. But this means you need to think about page loading speeds.

Firstly when I have an image I open it up in MS paint. (I know a lot of you will be on Mac, so use the appropriate alternative). Some images are offensively too large. You can only see a small amount of a corner when you open it in MS paint.

You may have come across this within WordPress too, the image just takes up way too much space. So click ‘re-size’ and drop it right down to something sensible. I usually hit 30% and see how it looks.

You should know how wide your blog roll is, and what size image will fit sensibly. You’re looking for around that size, I don’t use exact measurements. Although you can do that if you are a perfectionist.

Once you have the image size you want you will you ready to process it. You will have already dropped the file size considerably, However, open up TinyPNG and drop the image into the box.

This is a free to use service where a helpful panda reduces the file size for you. This is a terrific service, you will hardly notice the difference in quality, while typically dropping the file around 75% in size.

Uploading the Image to WordPress

Now your new image is ready to be used in a blog post. You should know the process by now of how to add media so I will not go over that. But if you haven’t previously been reducing your file sizes you’ll notice a difference in the speed of uploading.

You can further play with the image size once in your blog post. Just click the image, select the pencil icon and resize the image so it sits better on your screen.

Feel free to test the loading speed of your page versus a page that has an image without being reduced. There is a huge difference, it’s certainly worth doing considering the short amount of time it takes.

Plus, I’m sure you’ll agree there isn’t much difference in quality to the naked eye.

Comments (1)
  1. Steve June 15, 2015

Leave a Reply

Your email address will not be published. Required fields are marked *