XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> How to Reduce the Size of Images

How to Reduce the Size of Pictures

Posted on 02. Mar, 2009 by .

When I first started blogging I always wondered how it was possible to reduce the size of images because on the Internet this is extremely important. If you upload pictures that are too big than this might take up a lot of bandwidth of your server. Further your users won’t be happy about having to wait 3 seconds for a picture to load.

But how do I reduce the size of pictures?

The process is simple once you get used to it.

Download a Photo Editing Software

First of all I suggest downloading a photo editing software. There are several programs out on the web that you can use but I always use GIMP.

Download Gimp

Gimp works on all operating systems. It doesn’t come with all of the features of Photoshop but it’s enough to do some simple editing . That’s why I recommend to download GIMP. If you want to buy a more professional software such as Photoshop than go ahead, if you are a student you get 80% off on Amazon. You should still be able to follow all the steps that reduce the size of images.

Setup Gimp
The next step is to install the application. Choose the settings you want and you should be fine. After you are done setting up, go ahead and open GIMP.

Open an Image

Click on the main window. Then click on File -> Open. This should open up a new window and ask for a image file.

Go ahead and select a file that you want to reduce in size.

There are actually two steps we are going to take to decrease the size of the image. But before we do this, you need to know that the bigger the picture is the more bandwidth it consumes.

Therefore, posting a 1600×1200 picture on your web site is going to take up a lot of bandwidth as the image’s size is at least 1mb or higher.

Reduce the Image Size

To reduce the space an image takes up we have to make the image smaller. On the top of the main window, where your image is displayed, there should be an option saying Image. Click on it and scroll to the section where is written Scale Image… After clicking on this button a new window should appear.

GIMP Scale Screen

Tip: Now usually the width of the content region of your web site layout is around 500 pixel. This means keeping a width of an image of more than 500 pixel does not make sense, only if you want people to be able to see it in full width when clicking on it.

Since this is rarely the case you may want to make sure that you scale it down to around 500 pixel if you want it to take up the whole horizontal content section. If you want to use a picture but still have text to the right or left of it, then scale its width down to 200-300 pixel.

After changing the width value, the height will be automatically adjusted. Click on the Scale button and the picture will be adjusted to the values you entered.

Reduce the Quality of the Image

The second step is to now save the image. Again while saving you can reduce the image size even further.

Click on File and then on Save As to save it under a different name. Let’s name it default1.jpg . Note that .jpg is the format the picture is saved in and the actual name of the file is default1. Click on Save and a new window should pop up.

GIMP Save Screen

In the window you can now reduce the quality of the image itself. If you think you do not need such a quality picture than go ahead and turn it down a little, but not too much. I usually choose to reduce the quality to around 85 depending on how important it is.

Save the File

The last step is to really save the file. Now go ahead and  compare the size of your two images, the original and the new one.

As a general rule, pictures over 50kb are too big, but of course it always depends on the circumstances.

One last tip: It might also be helpful to save pictures in different formats, the most common ones are .png and .jpg . It varies from picture to picture but usually a png file will reduce the size of an image significantly if the image consists mostly of text. On the other hand if you have almost no text then it might make sense to save it as a .jpg file. Just try it out

A WordPress plugin is available which doesn’t follow the steps I mentioned above but still reduces your image size a lot. It does so by, for example, removing all the unneeded information, such as with what camera the picture was taken. In doing so it certainly decreases the size of the file. The plugin is called WordPress Smush.it.

16 Responses to “How to Reduce the Size of Pictures”

  1. HOBO(nickname)

    03. Mar, 2009

    This is helpful information because many times I was unable to reduce image-size. Thanking you for the post.
    Cheers !!!

    Reply to this comment
    • jules

      03. Mar, 2009

      Thanks Hobo. I had trouble myself when starting blogging so I thought it would be a good idea. How’s your site going?

      Reply to this comment
  2. HOBO(nickname)

    05. Mar, 2009

    I dont know but I guess ranking improved but earning/donation almost ZERO/Nil.
    I havent created the site for living but yes, few earnings are important to continue else I have to close the site.

    Reply to this comment
    • jules

      06. Mar, 2009

      one of the problems is probably that your topic you chose on your blog is not very popular or that companies pay only very little for advertisement on that kind of topic.
      Believe me I had the same problem but you just have to keep on writing and not think about the few visitors you get. Eventually you will earn money, one way or another!

      Reply to this comment
  3. Randy

    28. May, 2009

    Nice post.

    That’s pretty much how I have been doing it but it’s good to know I’ve been doing it right (I’ve been using Graphic Converter, which came with my Mac when I bought it and mostly Fireworks these days, but that’s overkill, i think).

    I will take a look at the some of the tools you mentioned in your post.

    Question, though: Is there a good online application/service? I’ve heard of some but haven’t really used them. I’ll be blogging from South Korea again later this year and I probably won’t have my computer/tools to optimize photos, but I’d still like to be able to reduce them before posting.

    Thanks!

    Reply to this comment
    • jules

      28. May, 2009

      Hi Randy,
      I am glad you ask. The one service that I can highly recommend is smush.it which is an online tool that combines all the steps you would need to take in your image editing software into a highly useful tool.
      You can upload an image or just enter the URL of a picture of which you want to reduce the size. It then automatically returns the picture shrunk to a minimum size. Try it out, it also has a Firefox extension.
      You need to be aware of one thing though, no matter how much you reduce the size of an image the format of the picture impacts the size of a picture a lot more. Because of that I would recommend always saving images in three different files, i.e. .gif, .jpeg, .png. All of these formats have different advantages. In the end just pick the picture which takes up the least space with the best quality.

      I hope this helps you when you are in South Korea.

      Reply to this comment
      • Karl Foxley

        24. Aug, 2010

        I’m a big fan of Smush.it. I use the site version for bulk image compression and I have the WordPress plugin installed to make life that bit easier.

        Gimp is great, Photoshop is my first choice but like you said, it comes with a price tag (I got my first ever Photoshop when I was a student a few years back now, so I received a nice discount – now it does not cost as much to upgrade on each new release).

        PicNik (http://www.picnik.com/) is a good free online tool that can help you easily resize your images.

        Nice write up Jules…

        Warmest regards,

        Karl

        Reply to this comment
        • Julius

          24. Aug, 2010

          Thank you Karl. Yeah I enjoy Smush.it too. But for some reason it doesn’t seem to be working right on my blog. I used to use it a lot more often but for some reason now I don’t.
          I like both Photoshop and Gimp, I did switch from Gimp to Photoshop but it takes some time to get used to it.

          Reply to this comment
  4. Randy

    30. May, 2009

    Thanks, Jules.

    Looks like there is a WordPress plugin for smush.it. That could/should be a *huge* help!

    Reply to this comment
  5. Mackeran

    21. Nov, 2009

    Interesting and informative. But will you write about this one more?

    Reply to this comment
  6. Ralph

    20. Apr, 2010

    This drives me crazy all the time. I need something simple. I need to check out GIMP. Thanks

    Reply to this comment
    • jules

      22. Apr, 2010

      I hope this is helpful. It drove me crazy when I started blogging but after a while you get used to the program. Thanks for the comment!

      Reply to this comment
  7. JR @ Internet Marketing

    31. Aug, 2010

    Go how much I love GIMP, that has got to be the best ever open source program around and really a must have for all bloggers and webmasters.

    Reply to this comment
    • Julius

      31. Aug, 2010

      Thanks JR. I agree with you Gimp is such a great program. I have used it for a long time and think its a great piece of software.

      Reply to this comment

Leave a Reply