Photo Editing

Some images that you’ll want to add to your website will need to be edited, either because they are too large for use on a website or you’d like for them to be a specific height or crop.

Also, always remember that some users will be viewing your website on a phone using mobile data, they’ll have trouble loading large images and you’ll be using up a portion of their data plan.

Image Sizes

Full Screen Image: 1400px wide (Image height is 450px, but more image height can be revealed on mobile. See below for cropping tips.)

Full Screen Sliders: 1400px wide (All slides are 450px tall regardless of width.)

Box Width Image & Slider, full width (single): 970px wide

Image & Slider 3/4 page width: 637px wide

Image & Slider 1/2 page widths and smaller: 600px wide (Stacks full width on mobile.)

Staff listing images: 170px x 170px (The theme “crops” your images to a square. If you don’t like the result, it’s helpful to crop your image square before uploading.)

All photos need to be 72 ppi and compressed for web; 60% jpeg compression is plenty.

Photo Editing Software

Wake Forest does offer Adobe Creative Cloud to students, faculty and staff, and Photoshop is the best Adobe software for editing photos. Wake Forest also offers free training if you are interested in learning more than the following basics.

If you are using Photoshop to edit your photos, you’ll begin by opening Photoshop, then going to File > Open in the top bar and finding the desired photo on your computer.

Click on any of the images below to view them larger.

Photoshop Image Size

If you’d like to simply make your photo smaller, the setting you should update is your photo’s image size. You’ll find this under Image > Image Size in the top bar.

Image size

The Image Size box will pop up showing you the height, width and resolution of your photo. For web, you’ll need to change your unit of measure to “Pixels” in the dropdown to the left of the height and width (changing one will change them all). You’ll need to ensure that the check box next to Resample is checked. Then, in the Resolution box, you’ll enter “72” for web resolution. Finally, change the width to the desired value from the list above and click OK.

Image scale

Your photo should scale smaller and be ready to Save for Web below. If your photo became larger, or the Image Size was already much smaller than your desired width at 72 resolution, you may need to choose another larger image. Images that are scaled up will look very pixelated.

Cropping in Photoshop

If you would like to make your photo a specific height and width, or you’d only like to use a portion of the photo, you can choose to Crop your photo. You’ll find the Crop Tool in the left sidebar.

Crop Tool

Now you’ll see that there is a dotted line box around the edge of your photo and the top of your work area has now changed to show your cropping options. You can grab the handles in the corners and center of the edges of the dotted lines and move them to your desired crop. When you are done, click the checkmark in the far right of the top of your work area or hit “Enter” on your keyboard.

You can now review your Image Size settings to make your new crop the correct size, then Save for Web below.

If you’d like for your photo to crop to a specific size, you can use the cropping options in the top of your work area. This is useful if you are editing images to use in the Full Screen Image or Full Screen Slider. (View tips for these content types below). After clicking the Crop Tool in the sidebar, you need to click on the first drop-down now showing in the top of your work area. This will reveal all of your controlled cropping options. Choose “W x H x Resolution.”

Cropping specific sizes

You’ll now be able to enter your exact dimensions, and the cropping box will scale proportionally. Choose “px/in” in the unit selection drop-down and enter your height and width in pixels and 72 in the third box for your resolution. The “Clear” button will reset these values when you’d like to change them. Now make any desired changes to the cropping box over the image, then click the checkmark in the far right of the top of your work area or hit “Enter” on your keyboard.

crop values

Your photo should scale smaller and be ready to Save for Web below. If your photo became larger, you may need to choose another larger image. Images that are scaled up will look very pixelated.

Cropping Tips for Full Screen Images

If you are editing an image for the Full Screen Image or Full Screen Slider, there are some special features to consider. Both of these Content Types have a recommended image size of 1400px wide by 600px tall, but will “crop” to 450px tall on desktop computers. The “cropping” is a feature of the responsive, mobile friendly nature of this theme, so your 1400px wide desktop image will only be 640px wide on a mobile phone and will reveal more of the height of the image.

Here is an example of a Full Screen Image image on desktop:


And now you see the same image on mobile. Notice that the logos on the laptops are now visible, but the man is not:

The best way to choose a great crop for this image on all devices is to use the grid that Photoshop provides in its cropping tool. Use the “W x H x Resolution” setting from the example above, enter a width of 1400px wide by 600px tall and a resolution of 72. The crop box will appear over your photo and, when clicked, it will have a grid divided into thirds.

The middle third vertically (highlighted in blue) is a fairly good representation of how your image will look on mobile, so choose a good subject. The middle third horizontally (highlighted in pink) is a “safe” area for very wide desktop monitors. If there are people in your photo, try move the crop to keep their eyes inside in this part of the grid to avoid their heads being cut out.

safe area

If your image doesn’t work well in this grid, you might want to consider another image. Similarly, if your image has text, then the Full Screen Image content type might not be your best option. The Box Width Image scales instead of cropping, and would be better.

Save for Web

Once your image is edited and ready, then you’ll want to save it with compression so it will be smaller for easy viewing on your website. You’ll find this under File > Export > Save for Web (Legacy) in the top bar.

Save for Web

The easiest setting here that will always produce great results (harder compression produces “fuzziness” in your photo) is to choose “JPEG High” from the Preset drop-down on the right menu. In my example here, using the 2-up comparison tab (to gauge your “fuzziness”), you can see that the original image was 2.4MB. It is now going to be saved at 394.9KB, and even can be down to 192.1KB on the “JPEG Medium” setting, if desired.

Click Save… A window will pop up asking where you’d like to save your new image, and then you can upload that image to your WordPress site.

save for web interface