This article is the second in a 2-part discussion of preparing images for the web. For part 1 of this discussion, please see my previous post, Are Your Images Web Ready?
If you’re looking for a way to get your images ready for your website, but are not willing to pay several hundred dollars for image editing software, you’re not alone.
Fortunately, there are several free alternatives that will do the job just fine. I will take a look at 3 of them here.
The main feature I was looking for in an image editor, besides the price tag, was the ability to quickly resize my images for the web. I didn’t need my image editor to do any more than that. Also, I needed the image editor to run on Windows and Mac operating systems. Here’s what I found.
GIMP (www.gimp.org) is a free open source application that is available for download in both Windows and Mac formats. It’s touted as the “Free Photoshop”. GIMP is a very feature-rich program. In fact, it’s way more than you would need for the simple task of editing images for the web, but it would certainly handle that task well.
If you’re not familiar with image editing, however, the GIMP program can be quite intimidating. I’ve been using Photoshop for over 10 years, and, for a program that is touted as the “Free Photoshop”, I found the program’s user interface and commands to be counter-intuitive and worked nothing like Photoshop.
The first thing that I noticed was that, after opening a .jpg image that I wanted to edit, I could not even save my edited version as a .jpg. It took me a bit to figure out that, instead of saving, I needed to choose the Export command. One feature that Photoshop has that GIMP does not have, that I could find, is a “Save for Web…” command. This was certainly disappointing. I also found that the Image Preview feature in the Export dialogue box did not work, which was also disappointing.
If you like to work natively on your computer – for example in places where you do not have an internet connection, GIMP might be your only option for a free image editor. If you choose to go with GIMP, give yourself plenty of time to get familiar with using the program, as there will be quite a learning curve.
Photoshop.com (www.photoshop.com) has an online tool called the Photoshop Express Editor. Fortunately you will not need an account to use it. It currently only supports editing .jpg files, so if you’re trying to edit a .gif or .png (other common web image formats), you’re out of luck. Also, you cannot upload images that are over 16 MB, which is not usually a problem.
Once you upload your image to the site, you have access to several editing features. One of which, is a resize command. Once in that window, you can click one of four resize presets. I chose the “website” button, which automatically resized my image to a more web-friendly size. If you want a bit more control, there is also a custom command, with which you can resize your image to any size you want. The editor will automatically constrain the image proportions for you.
Unfortunately the editor does not have a way of adjusting the quality of the image that is output.
Once you click ‘DONE’ you’re done. You’re given several options of what you’d like to do with your image, one of which is to save to computer. If you do not choose one of these options, and choose to cancel, you lose all your changes and will have to start all over.
If you have online access and just want to quickly resize your image, then Photoshop.com may be a simple enough solution for you. It’s very user friendly. However, if you want to be able to adjust the quality of your image, this is not the solution for you.
Of the three editors that I tried, I really like Pixlr (http://pixlr.com/editor/) the best. Pixlr is a free online solution that actually looks and acts a bit more like Photoshop than does GIMP. To this service you can upload .jpg, .gif and .png files, and you do not need an account to edit images.
What I like about Pixlr is that, though the editor is web-based, it seems to work natively. In other words, you don’t have to upload images to the site before you start editing them. This will save you time, especially if you’re working with large files.
You can adjust the image size with the Image > Image Size… command. Makes sense, right? The only unit for image size is pixels, which is what you need for the web.
Another feature I like is the ability to zoom in and out of the image with the scroller wheel on your mouse.
Although there is no feature that allows you to adjust the dpi, it really isn’t necessary. When you go to save the image, using the old familiar File > Save… command, you get a dialogue box where you can adjust the quality of the image. As you adjust the quality of the image, you are given real-time feedback as to what the actual file size will be when you save it. However, though there is a preview of the image in the Save… dialogue box, it is not a true preview. In other words, if you adjust the quality of the image, the preview does not reflect what the final result will actually look like. Because of this, you may need to save a couple of images and open them to get a look before you’re finished.
Well, if you haven’t guessed it by now, my recommendation for the best free image editor for web-based images would be the free online image editor from Pixlr.