Tutorial: How to crop and size images with Preview
For the majority of web designers and developers, the go-to image tool is Adobe Photoshop. But there are a lot of people running blogs or contributing to blogs these days that are not familiar with Photoshop, and don’t want to spend the time it takes to learn this powerful but difficult program. Adobe Photoshop also isn’t cheap; at $20 + per month, it’s overkill for many common blogging tasks.
For this reason, here is a quick, short how-to about using Preview (free and pre-installed on Macs) to crop and re-size images. For you Windows and Linux users out there, I’ll do a future tutorial on how to do this using GIMP (Free and available on both platforms.)
In this example, I’ll take a large image and make it 250px by 150px and adjust the color and file size and file type. I’ll start with a screenshot in it’s default png format. For our example, we’ll assume I am going to write an article about the Patagonia website, so I’ve taken a screenshot from their home page.
1. Open the image in Preview. Double-clicking the image will do this by default.
2. From the menu select Tools >> Adjust Size
3. Select the image dimensions using pixels as measurement. Preview will scale proportionally, so choose the height and width accordingly. If the aspect ratio of your initial image is different than your target (for instance if you are starting with 100 x 200 when you need to end up at 50 x 50) you’ll have to go with either the desired height or width and then use the crop function to reach a target size without distorting proportions. Here I’ll choose the width of 250. But I still need to crop to adjust the height.
4. I’ll use the rectangular selection tool to select everything, then just drag the top and bottom bars up and down to reach the exact height I want – here 150 px. Preview keeps me updated on the current file dimensions in the small black box as I drag.
5. Once I have selected the size and placement I want, I click the crop icon, and ta-dah! it’s done. The image below shows the ‘edit’ icon, the ‘rectangular selection’ icon, and the ‘crop’ icon all highlighted with red.
6. At this point, the image is sized, and can be closed, saved, renamed, and uploaded. But just for fun we’ll do a couple more things…
7. From the menu select Tools >> Adjust Colors. Here you’ll see lots of filtering levels to play with. Preview shows you how they look as you try them, but only keeps what you select. Here I’ll turn up contrast, sepia, and sharpness.
8. When you are happy with your adjustments, close the tool by clicking the ‘x’.
9. Finally, we’ll make the file a jpg and optimize it slightly. This means making it more compressed so it will load faster on your blog. From the menu choose File >> Export.
10. If you wish, you can change the name of the file in the Export As field. In our example I’m changing the file type to JPEG. Under the Format selector you can adjust quality. If your file size is large and you can afford to bring the quality down a little, you’ll improve the file size and the loading time. In general, it’s best to keep the image size under 100k for a typical image. We don’t recommend using too much compression and ruining your image quality, but you also don’t want to create noticeable lag for your average user.
Hope that was helpful; please comment if you have any questions. Preview has come a long way since it was first released as a viewer, and has become quite a useful tool. (For those on Windows or Linux machines, we’ll add a new post outlining how you can easily do the same thing soon.)