Update: Picnik, the service mentioned in this article, no longer exists. However, a new service called Ribbet offers almost exactly the same functionality.
Many of you have digital images that are very large. They came off of a camera, or they were taken by a professional photographer. By default, these images are WAY to large to put on a Web site. You may even have experienced WordPress telling you that you can’t upload them — this is for your own protection 🙂 If you were able to upload a large image, it would slow down your site tremendously.
Luckily, there are now free, easy, online tools to use to resize, crop and optimize images for the Web. No Photoshop, and no calls to the Webmaster (which is the reason for this tutorial, after all :).
One such tool is “Picnik Ribbet!” Below is a tutorial on how to use Picnik Ribbet! to resize your images for the default slideshow size on a UMW WordPress site (710px X 300px).
Go to http://picnik.com http://www.ribbet.com/ and click “Get started now!.”
ON the next screen, click “Upload a photo.”
Then, browse to the image you want on your desktop and click “Open.”
After a second or two, you will see a screen with your uploaded photo. On the left-hand side, click “Crop.”
In that panel, you want to keep the drop-menu at the default of “No Constraints.” Then you want to type in the width and height (respectively) of your final image. In the UMW Slideshow, this is 710 X 300, so that’s the example we are using below. It can be any size that you need for your site. (NOTE: Wider than 710px will cut off on the UMW Web site). Make sure you check off the box that says “Scale Photo.”
Now you’ll see your image with the crop size in place. If it is a large image, you’ll notice that the footprint of 710 X 300 is pretty small:
So, you want to get MORE of the photo in that 710 X 300 space. To do that, drag the corners of the crop area to the desired area. You can drag that area around the image until you get just what you want, as below:
Once you get it just right, go to the left-hand side and click “Apply.” This will save the image in the new size.
Now, you need to actually save the image so you can use it. To to the upper-right hand side and select the tab “Save & Share.”
Then, type in a new name for your image (you don’t want to overwrite your original!). You have the choice to adjust how “compressed” you want it to be — this is called “optimizing.” Basically, the lower the file size in kilobytes (K), the lower the quality of the image. The default on picnik is 80%, which is a pretty good quality for most Web pages.
Once you’ve named it and optimized it, you can click the “Save Photo” button (above). This will prompt you to save it to your computer. Click “Save” and you have your newly re-sized image, ready for the Web!
Repeat this for every image you have that’s too big to upload.
Now, go to the gym. You’ve been working in that chair too long!
