Core
Interaction

Saving for Web

Friday, 2/10 – Studio

Instructions

  1. Save this image
  2. Open it up in Photoshop.
  3. Take a look at the image size by going to Image / Image Size. This image is too big for our needs.
  4. You can resize it in a few ways: in the image setting by adjusting the DPI or pixel height, or by doing it at once at the “Save for Web” screen. If you’re working with an enormous file, your program will run very slowly. Let’s resize the image to 72 DPI.
  5. Now let’s export for web. To do so press command, option, shift, and s.
  6. In this view, you can save the asset as a JPG, PNG, or GIF. PNGs contain the most information. PNGs and GIFs can both be transparent. GIFs are the only ones that animate.
  7. In the bottom right hand corner, you will see the size of the file. You should always aim to have the smallest file size as possible without losing quality.
  8. For our purposes, let’s try to always have an image size 1MB or less.