Resizing Pictures in Photoshop

For the purpose of the Seminar, we need to reduce the size of images for faster loading. One of the main issues is related to backgrounds.

Using a background photo can be a real challenge. Here below is an example.

Digital Photo resizing

To start with I choose a digital picture of (this is a mobile phone image and I have not modified it ).

The above image (for the purpose of this post) has been down-sized and re-sampled from 3072 px width to 1000 px and from a doc size of over 15 M to 1.6 M. It’s still heavy with 452 kb at 100% jpg.

[download_box]Download the original 3072×2304 px image 2mb[/download_box]

Resizing in Photoshop

Download the image, decompress it and open it in Photoshop.

You see now an image of 3072 x 2304 px.

We have multiple ways to reduce the size and weight of the image. There are two aspects to resizing:

1. The resizing of the image (pixels)

and

2. the resizing of the document.

Our goal is to end up with a document of about 100 kb and a maximum of image quality.

Resizing the image means that we intervene on the number of pixels per square inch, resize the document means that we intervene on the dimensions of the image.

We aim to optimize the relation between the number of pixels per square inch and the size of the document to obtain the best possible full screen view in Semiomantics Evolution.

Modifying the Pixel Dimensions (tick: Resample Image) will lead to:

Note the resolution remains the same.

If I want to increase the resolution, I need to decrease the Document size, without resampling the image:

Compare the above with the first PS screen above: I have cut the Document size to 50% and kept the Pixel Dimensions: this doubles the Resolution (number of pixels per inch).

The above is the base to understanding Photoshop and the way Photoshop deals with images, whether we import them from a camera or produce them in Photoshop.

Back to our image: The image has 16:9 proportions.

The above demonstrates the example mentioned at yesterdays call about apple and strawberries: you can either fill an inch with fewer but bigger pixels or with more of them but smaller ones (resolution).

When resizing the above image, you will find that the quality finds it’s limits where the gradient of the blue color of the sky starts breaking. This has to do with the resolution.

Practically speaking for a quick result:

Save the original image for Web and Devices and push the Quality slider to the left till the gradient of the sky breaks (that’s just one tick too much). Then resize the image at bottom left by decreasing the width until the JPEG size is about 100 kb.

You can see the final result on the site HERE.