Using Images

Using Images

Editing Images

"Resizing" Images

The two things you may need to change about your image are file size and image size.

  • File size refers to the amount of space required for your photo when it is stored on the server. Large file sizes will equal longer waits for your page to load. Not a good thing! 

  • Image size refers to the dimensions, or width and height of your photo as it appears on the page. It doesn't change how much storage space the image takes up, but can affect how it looks on your page.

Cascade limits your photo file size to 3MB to best present your information to users. Analytics tells us that 53% of mobile site visitors leave a page that takes longer than three seconds to load. You do not want to lose visitors at that rate! It's important to resize your images to the smallest file size possible, without losing quality, to provide users the information they need in a timely manner and to help your site show up higher on search engines.

If your file size is already small, but you need to adjust the way your image appears on the page:

If your image file is way too large, then the appearance of your image is probably also way too large for your page! You will need to adjust the image size in order to reduce the files size. Follow the instructions below for decreasing the size of both the file and appearance.

There are many ways to resize your photos to decrease file size. We suggest using Photoshop for experienced users or Fotor for beginners.

Using Photoshop

  1. Find the image that you would like to resize. For example, our image we're using is 6.6 MB.
  2. Open Photoshop and go to File -> Open and select your image.
  3. Navigate to Image -> Adjust Image Size

    image-size.gif

  4. Change the width or height. 

         - If the photo is landscape, adjust with width to 1000 pixels.
         - If the photo is portrait, adjust the height to 1000 pixels.

    width-crop.gif
  5. File -> Export -> Save for Web (Legacy)... always as a JPEG
    1. Quality between 80-100

       save-for-web.gif