Resize Images For Your Website Using Adobe Express or Photoshop

|
Content Author:
Hannah Schultes

Resizing your images doesn't have to be complicated. Using Adobe Express makes it simpler than ever.

In this video tutorial, I'll show how you can take images from your phone and upload them to a block on your ISU Sites Landing Page. Specifically, I am using an HEIC image file (common space-saving file used on Apple products), but any image file type will work for this tutorial.

I begin with an email from a teammate asking for help getting the file on the website. By saving the image to my computer and uploading it to Adobe Express (Adobe's online graphic and image editor), I was able to resize, crop, and export my image as a JPG file in around four minutes!

ISU faculty and staff have access to Adobe Express. You can learn more in the ISU knowledge base article.

Adobe Express Image Resizing Steps:

 

  1. Save your image on your computer.
  2. Find the image dimensions you need by editing the block on your website. Look for the size help text near the image upload field.
    Image Size Help Text Preview
    Visit our Help Site for more information on editing Landing Pages on your ISU Sites website.
  3. Log in to Adobe Express using your ISU email and password.
  4. Find the "Quick Edits" menu and click "Resize Image".
  5. Upload your image.
  6. Select the aspect ratio you need for the website block.
  7. Adjust the image by dragging it until it is cropped where you want it. You can use the zoom option to adjust your image as well.
  8. If the file is a JPG or PNG, use the quality scale to adjust your image's file size.
  9. If you don't see this option, click "Open in editor".
  10. Rename your project.
  11. Click "Download" and change the file format to JPG.

If you're looking for the resizing steps in Adobe Photoshop, check out the tutorial below.

Adobe Photoshop Image Resizing Steps:

  1. Save your image on your computer.
  2. Find the image dimensions you need by editing the block on your website. Look for the Size help text near the image upload field.
  3. Open Adobe Photoshop and create a new file. Enter your image dimensions from Step 2.
  4. Use the File menu, and click "Open". Select and open the image saved on your computer.
  5. Select/highlight the entire image, then click the Edit menu, and "Copy".
    Tool selector: Photoshop marquee tool
  6. Switch to the new file tab. Click the Edit menu, and "Paste".
  7. Switch to the Move tool. Make sure "Show Transform Controls" is checked at the top. Drag your image to size it down and adjust it so it crops where you want it.
    Tool selector: Photoshop mover tool
  8. Click the File menu, Export, Save for web.
  9. Select the JPEG file format and adjust the image quality so the size is at least less than 1 MB.
    Photoshop Save for Web Screenshot
  10. Save your image.
Body