Activate Media
Resizing images for web using Photoshop
  1. Open the image you want to resize

  2. Adjust the image's size by going up to Image>Image Size...

    Screenshot 1

  3. Check the image resolution.

    Be sure your Resolution is set to 72 if you're outputting your image for the web. Your image will be much too large for the web if it's set to anything higher. If your Resolution was set to something higher than 72, you will notice that the image will automatically be resized once you change the Resolution to 72 if Resample Image is selected.

    Screenshot 2


  4. To adjust the Resolution of your image without affecting the image size, uncheck the Resample Image option.

    The reason not to use higher Resolutions than 72 for the web is file size. An image with a Resolution set to say 300 has about 4 times as much information in it. This is important for print media because of the level of detail needed to produce an acceptable print, however, that same image would be much too large of a download for someone to wait for.

  5. Input the new sizes you want for your image. Be sure to have Constrain Proportions selected. This will ensure the ratio of height to width are maintained and will prevent your image from being distorted or unevenly resized.

  6. Select 'Save for Web' by going up to File>Save for Web & Devices...

    Screenshot 3

  7. In the pop up window set the preset dropdown to either GIF 128 Dithered or JPEG High. GIF is suitable for simple images made up of large colour blocks while JPEG is suitable for detailed or photographic images. Then click the save button.

    Screenshot 5

  8. From the second pop up window, select where you want to save the image and click save using the default settings.

    Screenshot 6