Resize Images for the Web

Resize Images for the Web

by John Vincent


Posted on May 09, 2018



This article suggests a procedure for resizing images for use on the web.

Mac Screen Snapshot

  • Full screen: Command Shift 3
  • Partial screen: Command Shift 4

Save .png file to desktop.

Handle the Image

  • Start Photoshop Elements
  • Open Image

  • File, Save As
    • PNG Options
      • Compression: Smallest/ Slow
      • Interlace: None

This may be a large image suitable for demonstration purposes. Also useful for my blog.

Crop Image

It may be necessary to crop the image.

Image, Crop

Use the crop icon (left menu) to crop a piece of the image.

There is so much that can be done but this is beyond the scope of this document.

Resize Images for the Web

Image, Resize, Image Size

  • Pixel dimensions
    • Width: 360 pixels
    • Height: 300 pixels

Try with constrain proportions to get a idea as to how suited is this image for the proportions required.

If the image is not properly suited, it is best to remake the image.

Save image if required

Save for the Web

  • File, Save for the Web
  • Change size and colors.

Get image size to < 200kb

Save as a gif