Image Resizing for Web and Email

Here’s the hypothetical: you’ve shot a bunch of images using your 12-megapixel compact camera and want to email them over to your family. But the catch is that at full resolution and finest quality, each of the JPEG files from the camera are around 5MB each – physically far larger than required and too big to transmit using a regular email account. As obvious as it may seem, downsizing and compressing these images is the answer to the conundrum – and it’s easy to do using Photoshop Elements or a variety of other photo-editing software.

Of course, with the rise of social media websites such as Facebook out there, it is possible to share your pictures in other ways. Facebook has a clever widget that auto-resizes and compresses images to conform to its standards – however, these aren’t especially large on screen and are fairly compressed too, so the quality decreases. Plus, if you’re uploading 100 single 5MB files, that’s the same as streaming 500MB via your internet connection and will take a long time. A more sensible solution is to have already downsized your images’ physical proportions, resaving as smaller files.

There are things to consider with resizing, however. First, ensure the original file is saved, and the smaller version saved as a copy with an easy-to-understand naming convention that won’t confuse you. Second, when viewing images via the web it’s important to have them in the correct resolution, at a sensible size and in the correct sRGB colour space to view properly. Also, as with any form of resizing, you’re entirely adjusting the original image and, as such, sharpness suffers and a sharpening method is recommended where possible. There are many things to consider, including how long resizing can take – whether you need to resize a single image, a batch, change their names, make multiple sizes available and so forth.

Image Resizing for Web and Email – Step-by-Step

Here’s our quick step-by-step on how to resize for web and why each process is necessary…

Step 1 – Changing Resolution

In Photoshop Elements, Image > Resize > Image Size will bring up the image’s dimensions and resolution information. The Resolution box within will vary depending on camera used, usually showing 72, 180, 240 or 300 pixels/inch (ppi). For the purposes of web-based work, including email, the convention is to work at 72ppi. Changing this may also resize the pixel dimensions should you be lowering the ppi, as size and resolution are intrinsically linked.

Step 2 – Resizing

Within the Image > Resize > Image Size panel, with resolution set to 72ppi, you can adjust physical width and/or height. To maintain image proportions, ensure that the ‘constrain proportions’ box is ticked. As we are downsizing, select ‘Bicubic Sharper (best for reduction)’ at the base of the panel. When considering size, note that the most common screen resolution is around 1280×1024 pixels. A common target size is 800 pixels wide for small file sizes with ample quality.

Step 3 – Save For Web

File > Save For Web… will open a dialogue box for compression. Here it is possible to select output format, with JPEG best for photos (ignore Gif or Png). A Quality field provides a slider from 0-100 with the Optimized preview window showing the result. To the bottom left will be the file size – something no more than a few hundred kilobytes maximum is ideal, less if possible. Save For Web automatically assigns the sRGB colour space that’s standard for Browsers.

Step 4 – Naming Convention

As you click ‘Save’ in Save For Web… a further (and final) ‘Save Optimized As’ window will prompt where to save the image. It’s integral not to overwrite the original large image, as then you’ll not have a copy eligible for high-quality printing. Instead, preferably in a separate folder, add a ‘_SM’ to the end of the file name to distinguish it as the ‘small’ version. This is to your preference, however, as you may choose to apply a different naming convention.

Alternatively…

Batch Processing

To perform the same action on multiple images: Select File > Process Multiple Files for a new dialogue box. Here you can select from folders and subfolders, and also the destination folder for the processed save. The File Naming section provides renaming tools, with Resize Images controlling resolution and image size to be applied to all. Batch is slightly less detailed than individual processing, but much quicker.

Image Resizing for Web and Email – Tips

Tips

A number of social media websites, including Facebook, will auto-resize and compress your images to conform to that given site’s standards. This may result in an undesirable compression or size. A site such as Flickr provides greater user-definable size and compression controls, including the original full size image for sharing, should you wish.

Batch processing is possible by recording actions or using programs such as Bridge, Lightroom or Aperture. Consult the manuals of these programs if it is likely you’ll be undertaking considerable name and size edits frequently.

Outside of ‘social media’ there are online-hosting sites, such as Photoshop.com and others that provide large amounts of space for a subscription fee. These archives aren’t as ‘open’ as social media websites, allowing for more peer-to-peer sharing of images, even interactive editing in some cases.

If the smaller version of your image doesn’t look as crisp and sharp as the original, then look into sharpening. Photoshop’s ‘Unsharp Mask’ feature will find edges within the image and amplify them for a sharper appearance.

Rather than sending multiple files in an email (and slowly attaching each), and as it’s not possible to send a folder, multiple files may be ‘zipped’ together. WinZip, WinRar or StuffIt are common examples of such programs. Email attachments are usually returned as undelivered if greater than 10MB.

Camera selector tool

Competition

Create stunning slideshows from your images with this great software program. MAGIX Photostory 2015 Deluxe offers over 300 effects, animations and decorative elements. You can combine images to make panoramas…