Image Editing – Quick Guide

Why Would You Would Need to Resize an Image?

Sometimes you need to change the size of an image in order to improve how it looks in a document, email, or blog post.

You may need to change an image's aspect ratio, so it fits in a square when it was originally a rectangle.

You may need to convert the image file to sRGB if the image quality is affected once live on the website.

Or, you may want to reduce the size of an image so it is smaller and loads easier and faster in an email.

NOTE: Do not resize an image you are submitting to the web team for use on the business.wisc.edu website. The web team will only accept original, uncropped images for use on the site.

I Don’t Have (or Don't Know How to Use) Adobe Photoshop, What Program Should I Use?

There is a free online tool called PIXLR X. It can be used to edit your images in many ways. In this guide we are going to cover specifically how to re-size and image to a specific aspect ratio and size.

Outline

Go to https://pixlr.com/ and edit the photo using PIXLR X
Check to make sure the image is larger than the size you need
Use the photo editing software to re-size or crop the photo the the exact size(s) needed
Save and download the photo using the File Naming Conventions and Best Practices
Optimize the image using https://tinypng.com/
Upload the photo into the media library and add it to your blog post or email.

Step-by-Step Guide

How-to Open an Image, Confirm the Image Size, and Resize it

Go to https://pixlr.com/ and open PIXLR X. There is no need to login or sign up for an account on PIXLR.
Click Open Image and select a photo you want to re-size.
Click on "Layout & Template"
Select "Resize Image" to view the dimensions.
Verify the image is larger than the final image size needed. (Never increase the original size of an image, as that will distort it and create a blurry/pixelated image.) Compare the current width and height to the needed size (e.g. if the image is 1200 x 802 pixels(px) it can be cropped down to 580 x 300px or 116 x 116px).
To resize an image, first make sure "Constrain proportions" is turned on (it should be on by default). Change the width or height to the desired size and the other dimension will automatically update to keep the aspect ratio of the image.
Click Apply.

How-to Crop Out a Section of an Image

Open an image in PIXLR X and click on the "Crop" tool.
Re-size the selection to include the area of the photo you want to keep.
Click "Apply".

How-to Crop an Image to a Specific Width and Height

Open an image in PIXLR X and click on the "Crop" tool.
Turn on "Select aspect".
Select "Size".
Enter the "Width" and "Height" you would like the photo to be.
Move and re-size the selection to include the desired portion of the photo.
Click "Apply".

How-to Save and Upload an Image

Click "Save" .
Update the file name to meet the File Naming Conventions and Best Practices (e.g. name-widthxheight).
Select the File Type JPG, unless there is a transparent background, in which case you should choose PNG.
Leave the Quality at 90% and High.
Check that the image is less than 5MB (5000KB) in size.
1. If it's not, decrease the image quality percentage until it is.
2. If the photo's dimensions (width and height) are larger than necessary, decrease them to the appropriate size.
Click "Download".
If you are uploading the photo to an email, we recommend running the photo through tinypng.com to optimize the photo. This is not necessary if uploading to the Wordpress Media Library.
Upload the photo into the media library and add it to your blog post or email. (Media Library: How to Upload an Image or File).
1. If WordPress gives you an error saying your image size is too big, running it through tinypng.com before uploading may help.

How-to Save as sRGB

If the quality of the image changes once uploaded to the site, it could be that the image wasn't saved as sRGB. The easiest way to save as sRGB is through Photoshop.

Once you have Photoshop open, you can open your image by navigating to File > Open