Picture This: A Faster Website via Image Optimization

0 Comments
Post Pic

Both visitors and site owners alike want a fast website.

Even with the cable modem speeds we see nowadays, there are still plenty of reasons why having a lean website can be beneficial.

First off people with fast internet now have higher expectations and expect near instantaneous load times.

Secondly, not everyone has such a fast internet connection, or the lines between them and you are crappy (the world’s a big place, and not all internet cables are made equal).

Most of your content on your website will be text and text is really fast. One of the main issues with page load speed comes down to images, and how a lot of site owners disregard the need for optimization.

What is Optimization?

In respect to images, optimization is changing the image so its file size is the smallest it can be, ideally without suffering in a loss of quality.

How Can I Optimize an Image?

There are a few different ways to optimize an image, and depending on your needs using several of them together is good idea.

The three main ways to optimize and image are: Using the correct format, resizing the image and file shrinkers.

Choose the Right Format

In the battle of the online image there are 3 main file format types: JPG/JPEG, PNG and GIF.

JPG

Sometimes to as JPEG this file format is an excellent choice for images like photos, where you have a lot of detail. They can also be reduced to a reasonable size, depending on the level of detail in the picture.

GIF

Whether you pronounce GIF with a hard G or a J like sound, GIFs are everywhere on the internet these days. That’s because this format allows for basic animation, so most of the animated meme pictures you see are GIFs.

You’ll probably also realise the main drawback with GIFs; while they allow for animation and even transparent areas, the quality of the image sucks!

GIFs are best used for quick animations, or where the image only has a limited color palette as the file size can be very small.

PNG

A mix between GIFs and JPG formats, PNGs allow transparent areas and animation, with the quality a JPG. The problem is this usually means that the file sizes are larger. However, they can still be squashed to a reasonable level if just used as a standard image format.

  • JPG – the everyday workhorse format. Perfect for photos.
  • GIF – if the image has limited colors, or needs animation this is a perfect choice.
  • PNG – perfect when you need a larger color palette combined with transparent areas.

If you choose the right format to begin with (or convert to it) you will have won half the battle already.

Size Is Everything

The one huge mistake I see people making all the time is using a large image when the website only shows it at a much smaller size.

For example, I’ve seen it where people use a 3000px by 2000px image and yet it only shows up as a 300px by 200px image: that’s a tenth of the size!

The problem with this is that the larger image also has a larger file size, meaning it’s slower to download by visitors, making page load speeds crawl.

Often these big images are megabytes in size, instead of the few hundred or less kilobytes they should be.

You can rectify this by choosing the right image resolution for your needs.

If you’re a WordPress user, you do get some help here, as when WordPress uploads an image, it actually creates several copies for you, in different resolutions. Then you just need to select the right one from the media library to add to your content.

wordpress image sizes

Choose the right one from the bottom right hand side.

Other than that I would still recommend digging out an art package such as Photoshop or GIMP, and actually resizing the image before you even upload it.

What size to resize it to is hard to say, as every website has different needs, so you will need to play around with it some and perhaps even crop (remove) some of the image itself.

Shrink Ray for Images

Before you even consider using your new correctly formatted and resized image, you need to think about trying to bring the file size down even further.

You’ll need to use some software to do this as the background mechanisms are pretty complex. Luckily for us there are some smart people out there who have made it really easy to optimize images.

My personal favorite site for this is kraken.io; it’s free and easy to use, quick and does an excellent job. The only downside is the free version has a limit of the size of the file you can upload, but a quick resize should bring the image down enough to allow kraken.io to work its magic.

kraken.io
kraken.io in action

If you prefer to skip a step and have the optimization done when you upload an image to WordPress, then there are lots of plugins you can choose from:

Those are probably the best ones you can use.

Combine Them All!

As you may have guessed by now, the best way to achieve amazing results when optimizing an image is to combine and use all of these methods.

To show you how much you can shrink an image I started with a PNG file that was 33mbs!

Smushed with love

Smushed with love by Kraken.io

  • PNG – 33mb
  • PNG to JPG – 6.09mb
  • Resized JPG (1000px wide) – 659kb
  • Optimized with Kraken.io – 304kb

You can and will achieve better results than this depending on your image and resolution etc, but this was just to give you an idea how image optimization can truly make your image file sizes lighter and improve your websites page speed loads.

Now imagine doing this for all your site’s images, how many megabytes can you save?

Have you got any image optimization tips you’d like to share? If so, let me know in the comments.

Leave a Reply