Skip to content
Search Icon

Reduce Image File Size

Why File Size Matters

While a larger file size may be better when it comes to ensuring a high-resolution experience, bigger is NOT better when you consider page load time. Page load time is one of the main factors in Google’s Core Web Vitals algorithm. Due to this, make sure your largest image file size is no greater than 300kb.

If you’ve got plans to put more than one image on your webpage, each image file size will add on to the total page size. Large file sizes, and multiple files, will affect site performance and page loading times.

How to Check the File Size

On Windows:

  1. Right click on the image file
  2. Click Properties
  3. View the "Size" property (Not the size on disk property)
    pc file size property

On Mac:

  1. Hold "Control" on your keyboard and click on the image file
  2. Click on "Get Info"
  3. View the File Size next to the image dimensions
    get info menu on mac to view the file size

How to Reduce File Size

Below are some step by step walk-throughs on how to reduce the file size of your images without reducing the dimensions. This essentially compresses the image and some quality loss may occur but is generally minor depending on how much compression you use.

For the website it is recommended to keep your image file sizes less than 300kb. The smaller the better. Keep in mind, if you upload a large image you are actually costing the viewer bandwidth that translates into money for people not having an unlimited data plan.

  1. Open the image in the "Photos" app
    photo app icon
  2. Click on the elipse at the top of the window and select "Resize Image"
    resize image menu option
  3. Use the "Quality" slider to reduce the file size below 300kb
    quality slider
  4. Click "Save"
  1. Open the image in "Preview" app
  2. Go to "File > Export"
    preview file export menu
  3. Use the "Quality" slider to reduce the file size so it's less than 300kb.
    preview quality slider
  4. Click "Save"
  1. Open the image in "Photoshop"
  2. Go to "File > Export > Save for Web (Legacy)"
    • or you can use keyboard hotkeys
      • on Windows click "ctrl + alt + shift + s"
      • on Mac click "control + command + shift + s"
    Save for Web Menu
  3. Click the "Optimized" preview tab
    Optimized Preview Tab
  4. Select the "JPG High" preset
    Select Preset JPG High
  5. For non-hero banner sized images make sure the width or the height is no larger than 1600px
    Max image width/height should be 1600 pixels
  6. Use the quality slider to reduce the file size to be less than 300kb
    Quality slider
  7. Click "Save"

Last Modified: 11/9/23 12:07 PM | Website Feedback