If you have a lot of video elements in your website, you may find yourself running out of your storage quota. Compressing large images can help you regain some of that space back. Here’s how.

Compressing and Resizing Images using Adobe Photoshop

  1. Open the image in Photoshop.
  2. Go to File > Save for Web…
    Screen Shot 2014-01-25 at 3.07.25 PM
  3. The following window should appear (click to enlarge):
    Screen Shot 2014-01-25 at 3.08.19 PM
  4. Using the dropdown menu in the upper-righthand corner, select another file format (GIF generally takes up less space but is lower quality, JPEG is in the middle, and PNG takes up the most space but is higher quality. GIF and PNG support transparency, JPEG kind of does).
    Screen Shot 2014-01-25 at 3.08.37 PM
  5. File size savings (in KB) are shown in the bottom righthand corner of the window.
  6. Images can also be resized in the sidebar. Ensure proportions are locked before resizing.

Resizing Images on a Mac using Preview

Open the image in preview and go to Tools > Adjust Size in the menubar:

Screen Shot 2014-01-23 at 1.11.42 PM

In the resulting dropdown window, change the pixels to the largest size you’ll ever need the image to be in your website. For instance, if you’re resizing the header banner and you know your theme is only 900px wide, then there is no need for your header banner image to be longer than 900px. Resize it so that it is only 900px. Make sure you have the “scale proportionally” checkbox checked. The resulting size section of the window will show you how much space you’re saving in KB.

Screen Shot 2014-01-23 at 1.13.53 PM