TechTipsWithTea
Blogging

How To Optimise Your Blog Images For Faster Loading Times

How To Optimise Your Blog Images For Faster Loading Times

You’ve probably all heard the old “if your blog doesn’t load in 3 seconds the readers gone”. Well, the fact is that’s fairly true nowadays with the prevalence of mobile browsing. We want our blog posts and we want them right now or we’ll just hit back and choose that other search results. Especially if your readers are in an area that isn’t well serviced by the magical internet that falls mysteriously from the sky and into our phones.

One of the simplest ways to increase your blog page loading time is by using the right file type when you’re saving your images. It can be a little confusing if you’re not familiar with image file types or photography stuff, so here’s a quick non tech break down along with a couple of other tips for optimising your images.

JPG/JPEG

JPGs are the most commonly used file type on the web. It provides a nice balance of good picture quality and low file size by compressing the image. Using an editor like gimp (free) or photoshop (not free) you can adjust the amount of compression used on your image to lower the file size and decrease the quality. Usually you’ll only start to notice a drop in quality with a regular photo at around the 60% quality mark. Don’t be afraid to take it to a down even lower if the photo you’re saving out still looks good. Most cameras including phone cameras take JPG pictures so even if you don’t have software to decrease the quality your pictures are fairly good to go (but not optimised) straight from the camera.

JPGs are a great format for saving out your real life photos.

PNG 8

PNG 8 gives you a tiny file size, but loses a lot of quality. It only supports up to 256 colours so this isn’t a great choice for photographs. PNGs do allow transparency though, and it’s a special type of transparency where it can either be completely transparent, or it can fade.

PNG 8s are a great choice for any website graphics like buttons or logos, especially if they need some form of transparency in them. Any simple graphic that doesn’t contain many colours are best saved as PNG-8. I use a lot of PNG-8s when I create screenshots for some of my tech tutorials, it means I can have large easy to see images with nice small file sizes to keep the load time down.

PNG 24

PNG 24s are not used that often on the web as the file size is pretty large compared to other formats. Like it’s sister the PNG-8, PNG-24s allow for that funky fading transparency as well as full transparency, but PNG-24s also supports a whopping 16 million colours. Guess we know what the massive file size is all about!

The only time I’d use a PNG-24 on my blog would be if I had an image that I wanted to display in the best possible quality and I wasn’t worried about the file size/load speed. It’s definitely not something you’d want to use for the pictures in your regular posts.

GIF

The only time you’d really use a gif is when you want an animated picture. It’s a super low quality file type offering up a range of 256 colours which is why you often see pixelation on animated gifs. Gifs also allow for transparency, but unlike with PNGs the transparency is either fully transparent, or fully opaque. You can’t have any kind of fading with a GIF.

Use GIFs for animations.

Image Dimensions

The other main way to optimise your images is to make sure that you know the best dimensions to upload on your blog. It’s surprising the number of bloggers I’ve spoken to that don’t know the dimensions of the thumbnails on their blogs, or what size their blog post images should be. Instead they just upload fairly large images to be on the safe side. Think of your poor home page! It has to display all these small thumbnails that are huge with large file sizes for no reason!

Take the time to find out what images sizes are being used on your blog so that you’re not uploading unnecessarily large images that are slowing down your blog. Those extra pixels could be costing you views.

Plugins

If you’re using WordPress there are certain plugins that can help with images. Some will automatically resize your images into suitable dimensions to display in the different spots for your blog. There’s also plugins like JetPacks Photon (which I don’t recommend for everyone) which stores your images on their own server to help reduce the load stress on your blog. If you feel like your blog is performing badly down to your images then it might be worth looking into a plugin to help you out.

Use Less Pictures!

Another way to increase the load time of your pages is to not include as many images. I think we’re all guilty of thinking that our posts definitely needs that image of us standing there looking into the distance, and another one of us standing in the same spot but with our head turned just a little to the side. They’re totally different pictures right? Well…not really. Think about whether or not each pictures has earned it’s spot in your post. They should all be different enough from each other that it doesn’t feel like flipping through someones phone where they’ve taking a million selfies in 10 minutes.

Compress, resize and use your images wisely and your readers, and your load time will thank you for it.

Leave a Reply

Your email address will not be published.