How to: Resize Images for the Web

Images taken with a digital camera are typically saved in either RAW or JPEG.  Even as a JPEG, the images are very large as they were saved using the full resolution of the camera, or in my case, 10 megapixels.

In their original format, these images are far too large to upload to the web.  The large display size makes them difficult to show on normal monitor resolutions (1024×768) and the large file size makes them time-consuming for you to upload and visitors of your site to download.  Additionally, the large file size requires a large amount of web server storage space, which can be expensive.

To remedy all of these negatives, we are going to use Adobe Photoshop in order to resize the images to a constant width for uploading to a webserver:

1. Open Adobe Photoshop (Any version, but these instructions were created using CS5)

2.  Open an image by selecting File -> Open -> and selecting the image

3.  Select Image -> Image ResizeImage Resize Example

In the dialog box, set the width to 300 pixels.

Hit OK to apply the image resizing

4.  Save the newly resized imaged using a new file name – we never want to overwrite the original image file because once the original data is lost, it is lost forever!

5.  In my example, the starting file size was originally 3.68 MB and the new image is a mere 57.3 KB.

Those are the simple steps required to resize your images for web use.  In our example, we maintained the original file format.  However, as discussed in class, JPEG is typically the best choice for pictures on the web.

~Nick Marnik

~ by nkmhockey on January 31, 2011.

One Response to “How to: Resize Images for the Web”

  1. I didn’t know it was that easy to resize photos. I usually google a site to do it for me. The only “trouble” I had was that I was specifically looking for “Image Resize” and it was under “Image Resize.” It could be that it’s another version of photoshop. Oh well, great job on the steps!

Comments are closed.

%d bloggers like this: