Every now and again I get asked a very important question by some of my readers regarding the pictures and images I have on my blog.  They are wanting to know exactly how I format my pictures to be clear and colorful without taking up a ton of storage space on my server.  More importantly, pictures that are small in size will help keep your blog page loading snappily and your readers happy and coming back for more.

If you're in need of a graphics tutorial so that you too can host a ton of images both on your home page and in your blog's posts, then keep reading to learn my step-by-step method for image resizing and formatting!

I want to begin by saying that there are literally thousands of different imaging programs and other software on the market which can probably do the exact same things that I will be telling you about here, but I DON'T WANT YOU TO GO OUT AND BUY ANY IMAGING SOFTWARE!  These programs are expensive and in this case completely unnecessary, for I've found a FREE ONLINE PROGRAM which will get the job done beautifully!

Step 1:  Download Paint.net software for FREE!

• Visit http://paint.net/ and download version 3.5.8 from the link on the right side of the page.  Unzip the file and install it to your computer.

Step 2:  Open the photo or graphic you want to use in your blog post in Paint.net software

• For the sake of this tutorial, I am going to use a favorite family photo of mine which I'll call "Riley's Birthday".  This photo was taken with a digital camera and originally has an image size of 2048 pixels x 1536 pixels.  One of the major mistakes most people make is that they will use this photo as-is in their blog posts.  A photo of this size can easily take up 12 Megabytes of space and slow your blog's loading speed to a crawl ~ MAJOR NO-NO! :no-no:
• If you are wondering how to open your photo or graphic inside Paint.net, just go to the toolbar at the top of the screen, click "File" and then click "Open".  Your selected image will then be displayed inside the Paint.net program.

Step 3: Resize the photo or graphic to suit the space it will take up on your blog

• In order to maximize your server's storage space and speed up your blog tremendously, you must plan out how much space this picture is going to take up on your blog.  For instance, if I am writing a product review and this picture is an essential one for showing exactly what I am trying to portray, then I would want my picture to take up most of the width of my blog post.  My blog's posting area is around 550 pixels wide.  This means that I typically have a large picture size of around 400 to 500 pixels wide.  If I want this picture to be smaller, then I obviously plan for a smaller width of maybe 200 to 300 pixels instead.
• For the "Riley's Birthday" photo I'll be using in this tutorial, I want to give it a width of 400 pixels on my blog post.  In order to do this in Paint.net, click on "Image" in the toolbar at the top of the screen and then "Resize".  You should then see a screen like the one below:

• I went ahead and changed the width to the 400 pixels I wanted my photo to be and left the "Maintain Aspect Ratio" checked so that the photo's height would change automatically to the corresponding value for a 400 pixel width picture.  I left all of the other values unchanged here.  I only made sure to change the picture width.  If you notice at the upper left of this menu, my photo size dramatically decreased from 12 Megabytes to only 435.9 Kb.  Now that's a huge savings achieved just from resizing ONE picture.  Click OK and move on to step 4.  "Riley's Birthday" photo now looks like what's shown below:

Step 4:  Decrease the image quality to greatly reduce the "footprint" on your blog's server and loading speed

• You may be tempted to stop here, but let me be the first to tell you that a 435 Kb picture on a blog is still WAY TOO LARGE!  In order to really have a snappy and fast-loading site, you must do much better to reduce the size of your images.  Now we're going to play with the image quality and file type so that we can again better format our image.
• This time, click "File" and then "Save As" in the Paint.net program's toolbar.  Choose the name and location that you want to save this picture and click "Save".  Once you've done that, a new window will pop up asking you to confirm the image quality of your picture.  Personally, I don't typically have images with a quality over 30 on my blog.  If they are a very special photo and I must have a clearer picture then I'll splurge and go up to 60, but this is extremely rare.

• More times than not, my photos have an image quality of 30 and they ALWAYS have a file type of .jpg.  I've found that .png, .gif and .bmp files are much larger than .jpg and unless you need an image which has transparency, always use the .jpg format.  Below I will show the differences in the "Riley's Birthday" photo using various different image qualities in a .jpg format:

As you can see, once you get down to 20, the image quality suffers greatly and in my opinion is just too low.  But you'd be surprised at how low your image quality can go with more simple pictures and logos.  Of course, the choice is yours on how much you want to compromise your image for small size and speed.  Each picture is different and so each time you publish a picture, your image quality could be different to suit your specific needs.

The thing to remember here is that you must resize your image to the exact size you need and it's a good rule of thumb to lower the image quality as well, so that you get smaller, snappier loading graphics.  Remember, you can do both of these tasks with Paint.net for free!  Using these simple steps, we've successfully converted a photo that originally had a size of 12 Megabytes down to around only 30 Kb.  Now that's a savings both you and your readers will greatly appreciate!  :big grin: