How to Quickly Edit Photos For Your WordPress Site

Do you ever need to make a quick tweak to a photo before you add it to your site? You need to change the size, crop, or adjust coloring quickly and are stumped to find an easy solution? One of my favorite down & dirty image editing sites is PicMonkey.

Why you should edit photos before putting them on your website

Often, people use photos from their cameras for their websites. Today’s cameras, be it professional SLR or camera-phone style, produce huge image files. The size of an average JPG from an average camera can be anywhere from 1-3 Megabytes. On a website, a file that large takes f-o-r-e-v-e-r to load. Simply uploading a photo directly from your camera is usually not the best way to make sure visitors are amazed with the blazing-fast speed of your site because they’ll be waiting for molasses to drip. A good size for any web image is to be under 100KB.

In addition to helping pages load faster, you may have a specific place to fill with photos that requires a certain size, or editing effect to transform the page from a choppy pasted-together look to a well-designed, carefully thought-out layout.

Getting started with PicMonkey

PicMonkey comes in two varieties, Free and Royale. The free version will do most of the basic things you need, while the Royale version gives you extra bells and whistles, effects, fonts, and designs. The Royal version also comes without annoying ads. It costs around $35/year, but don’t quote me on that.

You don’t even need an account to use the free version of PicMonkey, but if you want to save any of your work within the program (as opposed to saving it to your own computer), or upgrade for Royale, you need to set up an account.

Cropping to fit a particular size

Say you have a photo that you need to fill a space that’s 600 pixels wide by 300 pixels high. On PicMonkey’s home screen, you’ll want to click “Edit” then, select the photo you want to crop from one of many locations such as, your computer, Dropbox, Facebook, or your Flickr account.

Once your image is open, click the “Crop” button. Under “Actual Size”, enter the dimensions you need the photo to be. In this case we’re going for 600 x 300. PicMonkey will create a crop box on your photo showing how the dimensions you entered would crop your photo. If your photo is huge, the crop box will be tiny and will likely cut off some of the photo you want to see. There’s a simple fix for this.

Click the “Scale photo” checkbox and then you can move the handles in the corners of the crop box to make the crop box bigger and cover more of the image. Notice how the proportions of the crop box are now locked, so your final image will be proportionate to the final dimensions you entered. Adjust the handles until the crop box covers the part of the image you want to remain. Because you checked the “scale photo” button, the image will be proportionately scaled down to the size you indicated.

Before you click “Apply”, double check that the “Actual Size” is the same size you originally entered for your finished size and that the “scale photo” checkbox is checked. If not, enter your size again, check to scale the photo, and adjust the crop box. Click “Apply”. Your cropped image will appear in the window. Click “Save” and follow screen prompts to choose a name, quality (Pierce is usually a fine choice), and location to save your file. Then, you can upload that file to your website.

Adding text-overlay

This one’s pretty simple. Once you have your photo opened an cropped according to your needs, click the text icon in the far left column of the editor (it has an uppercase and lowercase T). You can browse the different fonts you can use, sorted by type. Best thing is they’re PicMonkey pre-approved fonts, so you know you’ll be in style. No Comic Sans or Papyrus here, big sigh! Choose a font, apply some color, change the size, and voila! Instant text overlay.

Making a collage

Sometimes, it’s beneficial to have a collage of images on your website. We find collages to be a good solution for home page slider images that are gigantic. If your slider image is horizontal and your photo is vertical, why not put two vertical images together to make an eye-catching slider without making the shape of your slider wonky?

To create a collage of your photos, click the collage button on PicMonkey’s home screen. Click the second icon down the far left editor bar to choose the type of collage you want. (Any style that shows a crown with it means it’s a Royal paid style. You must be a subscriber to use this style.). Note: you can adjust the size of each photo within the collage, so don’t worry if they’re out of proportion. We’ll fix that. 

If you need your final image to be a specific size, you may enter it in the dimension box at the bottom of the screen. Be sure to uncheck the padlock so proportions are unlocked if you need an image that isn’t perfectly square. Once you have the size of your image set, you can load your photos into PicMonkey using the tools on the left.

Drag the white border between the photos to adjust sizing and spacing of your images. You can hover over an image and click “Edit” to zoom in, change orientation, etc.

I like the white borders around my collage to be thin, so the last step for me is to click the artist palette on the left column to adjust the spacing. I like values between 5 and 10. Here you can also adjust the color of the border. Save your image. That’s it!

 Using PicMonkey to edit your photos can be one of the simplest, quickest ways to spruce up your website. That’s why it’s one of Ekcetera’s top picks!