Maintenance Notification: WSB Wiki will be offline January 8th from 7:30 - 10:30 AM for planned maintenance

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Why would you would need to resize an image?

Every now and then you will need to resize an image. For example: You may need to change its aspect ratio, so the image fits in a square area when it is a rectangle. Or, reduce the size of it so it is smaller and loads easier and faster. And sometimes you need to change the size of an image in order to improve, how it looks in a document, email, blog post, or webpage.

I don’t have 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 website page or email. 


Step-by-Step Guide

How-to Open an Image and Confirm the Image Size

  1. Go to https://pixlr.com/ and open PIXLR X.

    Screen shot of the Pixlr home page and navigation menus

  2. Click Open Image and select a photo you want to re-size.

    Screen shot of the open image button

  3. Click on "Properties" and "Re-Size Image" to verify the image is larger than the final image size needed. Compare the current width and height to the needed size  (e.g. if the iamge is 1200 x 802 pixels it can be cropped down to 580 x 300 pixels or 116 x 116 pixels). 

    Screen shot of opening properties, re-size image, and then viewing the image size


How-to Resize an Image

  1. Open an image in PIXLR X and click on "Properties".
  2. Click on "Resize Image".
  3. With "Constrain proportions" on change the width or height to the desired width. 
  4. Click Apply.

    Screen shot of how to re-size an image


How-to Crop Out a Section of an Image

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

    Screen shot of the cropping tool in use


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

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

    Screen shot of the cropping tool with a specific output size


How-to Save and Upload an Image

  1. Click "Save" .
  2. Update the file name to meet the File Naming Conventions and Best Practices (e.g. name-widthxheight).
  3. Select the File Type JPG. Unless there is a transparent background.
  4. Leave the Quality at 90% and High.
  5. Click "Download".
  6. Optimize the image using https://tinypng.com/ (Image Optimization/Compression Recommendations and Settings).
  7. Upload the photo into the media library and add it to your website page or email. (Media Library: How to Upload an Image or File).

    Screen shot of the steps to save an image.



Learn More









  • No labels