Resize Images for the Web
by John Vincent
Posted on May 9, 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
- PNG Options
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
To Square an Image
Start Adobe Photoshop Elements Editor
Drag the jpg
file into the app.
To resize the canvas, for example:
- Image, Resize, Canvas Size
- Width: 160 pixels
- Height: 160 pixels
- Canvas extension color:
- Choose:
#937161
as this will stand out.
- Choose:
The image is resized, now let's improve the background.
-
Select Color Picker Tool
- Click on a background pixel of the desired color.
-
Select Paint Bucket Tool
- Click on the background that needs to be changed.
The background color should now be uniform. However, if not:
-
Select Color Picker Tool
- Click on a background pixel of the desired color.
-
Select Brush Tool
- Brush as desired.
To resize the image:
- Image, Resize, Image Size
- Width:
260 pixels
- Height:
260 pixels
Save a png
file
- File, Save As
cleaned.png
Save as a gif
file
- File, Save for Web
- Save
cleaned.gif
- Save