How and why to optimize your web images

Optimizing images for your website is very important. We've all heard about the importance of fast-loading website pages. It is one of the ranking indicators for Google. But, even more important, a visitor to your website is not likely to sit around waiting for your pages to appear.

We are going to show you how to use a free web tool called Picmonkey to easily accomplish this. You can find it at picmonkey.com and will need to create a free account. You do not have to sign up for the free trial of their Premium service. 

Originally, this post was titled "Using PicMonkey to optimize your web images."  I have used their free version for several years, but luckily, just as this post was ready to be published, I found out that PicMonkey has decided to no longer offer their free version -- bummer!  I have recommended it to a number of people since I came across it.

So, off to Google I went to find a decent replacement.  There are a number of options, but my most important requirements are that it's very easy to use, that you can get in, do your resizing, and get out as quickly as possible, and of course, that it's free.

The winner is BeFunky

The tool I like the most and seems closest to PicMonkey, for those who were already using that, is BeFunky. 

BeFunky Home Page

Their Mission Statement was my first indication that I found the right tool:

"Our vision is to provide tools that are easy enough anyone can create beautiful photographs and professional-quality graphic design without any special skills or technical expertise."

I believe that BeFunky is a good tool to suggest.  And, the bonus is that it has a lot more bells and whistles available in its free version than PicMonkey did, without making the User Interface (UI) overly complicated.  Give it a try!  Now, on to the tutorial...

General guidelines for website images

There are so many things that can be considered, but we are going to give a pretty simple, yet common, example. This may be all you need to know. And, if you can get this under your belt, you can probably take things even further on your own.

Size matters

Many of us are using images that we take using our smartphones or images purchased from stock photography sites. Even if we specifically set our phones to take smaller images, or select downloading small images, what we get will still be very large -- optimized for printing!

There are two different sizes that you need to be aware of for your pictures:

Dimensions - This is the width and height of your image. Usually, 800 wide is a good place to start for a full reading column. (A full screen might be 1420 wide.) Pick a size that is appropriate for the space you plan to use.

Size - This is how much "image data" is carried with the photo - for the web you want it as small as possible, generally between 25KB and 150KB. A large amount of image data is needed to print good quality images on paper and signs. Very little of it is needed to provide a good quality image on a screen.

A typical picture I take with my smartphone has dimensions of 4032 x 3024 and a size of 6.1MB! That is huge! (And, great if I want to print a poster!) Without optimizing this for the web, it will slow my web pageload speed and use up my website hosting space unnecessarily (not to mention effecting my Google ranking and annoying my visitors).

Example using BeFunky to optimize an image

We are going to take you step by step through a typical example of resizing and optimizing a photo using BeFunky.  

Your first step is to click on Photo Editor from the home page (see image above).  Click UPLOAD and you will be given the option to select the image you wish to resize and optimize from your computer:

The image we selected is very large. The dimensions are 2912 x 2912 and has a size of 3.14MB. This is large enough to print a good quality 16 x 20 poster. It's likely you would have to head to Staples or Kinkos to print an image that size!  Go ahead and click Resize:

This sample image has dimensions of 2912 x 2912 and size of 3.14MB. Notice it's displaying at 21% of its size!

There are three simple steps to Resize the dimensions:

1. Change just the width. For our purposes, we will change it to 800.
2. Make sure Lock Aspect Ratio remains checked. This keeps the proportions the same on the resized image -- and automatically adjusts the height.
3. Click the blue check (see the image), and your image will be resized!

Change the dimensions and then click the blue checkbox

 Next, click Save. The following screen will appear:

Save to your computer

At this point, you have the opportunity to optimize the image, removing a lot of the data needed for printing. Follow these steps:

1. Change the name of the file so that when you save, you don't overwrite your original.
2. Make sure jpg is selected (you won't get resize options if png is selected).
3. Use the slider to resize the image data. Usually, 70 is an acceptable number. If you select a number that is too low, you will notice very poor visual quality. If it's too high, you will have an image that doesn't look any better, but is "weighing down" your web page.
4. You can see the actual size you have selected under the image. The right size depends on the dimensions you've picked, but between 25KB and 150KB should be acceptable.
5. Click Save

Notice we went from 3.14MB to 32.0KB. That is a huge reduction and will help keep your web pages loading fast and preserve your hosting space.

Final adjustments to optimize image data before saving to your computer

Here is our final image. You can see that even though we shrunk it both in dimensions and image data, it is still a very crisp, detailed image.

Our optimized image!

Once you have done this a few times, you should find this a pretty easy tool for your bag of tricks! Take some time to explore the other options they offer you in this free version. BeFunky's free edition provides a lot more tools for you to be creative. Just remember not to over do it!  

Hopefully, this gave you a better idea of what image optimization is, why it's important for your website, and an understandable and easy way for you to accomplish it. If you still need help or more clarification, contact us.

Have you found optimization tools you particularly like? Add to the discussion below!