How to Use the Picnik Online Photo Editor to Resize Photos & Images

We've recent had a few clients that use our SiteManager CMS systems have trouble figuring out how to scale high-res photos to meet specific dimensional size requirements to ensure that the image appears correctly on their website.

In this tutorial we're going to walk through how to resize images using Picnik. Picnik is a Free, web based photo editor that makes it easy to enhance your photos for web or print... For this tutorial we're going to set our parameters around an example size of: 300 pixels wide by 200 pixels tall.

How to Use the Picnik Resize Tool to Scale Photos & Images

1. The first step is to upload your photo by clicking the Upload button
2. Once the photo is loaded, click the Resize button. Next we'll enter the first dimension 300 - in the screen below you'll see that the editor automatically set the next dimension to 225 and if I attempt to change it to 200, the first dimension will change from 300 to 267 - this is because the checkbox Keep Proportions option is checked. Setting this option (which is default) ensures that the image is proportionally scaled down from the original size to keep the photo from looking distorted.
3. I unchecked the Keep Proportions option which now allows me to set the dimensions the way I want as shown in the screen below. Now if your photo looks unpleasantly distorted, it's because the dimension is too far from the proportional dimensions of the original photo. This is really common when using a photo that is vertical and the dimension we want to scale to is horizontal. In this case, you'll need to use the Crop tool.

How to Use the Picnik Crop Tool to Resize Photos & Images

1. The first step is to upload your photo by clicking the Upload button
2. Once the photo is loaded, click the Crop button. Next we'll enter the first dimension 300, then the second dimension 200 - you should now see the Crop Markers sized to 300x200. In the example below you'll notice that the Crop Markers are focusing on too much detail and if we save our image now the photo is not going to be ideal because we're up too close to the action.
3. By checking the Scale Photo option, I can drag and adjust the Crop Markers to include as much or as little of the image action as I want without affecting the 300x200 dimensions I entered.
4. Once I've adjusted the Crop Markers and click the OK button, you'll see that the photo is now 300x200 and is cropped into a nice view of the photo.