Know how

Article categories

Grow your own

Whatever the scale of your ambitions or plot you'll find something useful here.

Make your own

Reduce your footprint by making your own, from knitting to soap-making to adorning your home.

Livestock and pets

Find out about rearing livestock from the farm to the garden, and doing the best for your pets.

Energy efficiency and construction

Discover how to adapt, change and even build your own home to enable you to tread more lightly upon the planet.

Cooking, preserving and home brewing

From the home brewery to ambitions of chefly grandeur. Find out how to do it all here and really taste the difference.

Wild food

Subsidise the larder in a sustainable way. From fishing, to shooting, to foraging safely, find it among these articles.

Conservation and the environment

Conserve our world for future generations. See how you can help in these pages.

Marketplace

From shopping with a conscience to building your own enterprise. Find advice and encouragement among these pages.

Everything else

Sometimes the diversity of downsizing can throw up an unusual topic.

Editorial

Past editorial items from the downsizer front page.

You are here: Home arrow Articles arrow Everything else arrow Sizing Digital Images

Print

Sizing Digital Images

Written by Barefoot Andrew

A question that comes up regularly on Downsizer is how to size an image: How do I make a picture small enough for an avatar? Is my JPEG file too big to upload into a forum post? How big will an image be when printed?

Image size on screen, in print and as a file on your hard drive are all related, and this article I’ll explain the basics of how “image size” works.

Pixels, megapixels and colour

A digital image is made up of millions of tiny dots called “pixels”, arranged into a rectangular grid.

When an image is viewed normally, our eyes can’t detect the individual pixels, and we see the image as a whole.

But if we zoom into a corner of the brick, we can see the individual squares of colour - the pixels - and how they’re arranged as a grid.

This rectangular grid is a certain number of pixels wide, by a certain number of pixels high. How many pixels will depend on the capabilities of your camera, and whether you’re taking a landscape or portrait shot.

Camera specs are quoted in “mega” pixels because cameras produce millions of pixels (in the same way that millions of bytes of computer memory are referred to as megabytes). My digital SLR is a 10 megapix model and produces images containing 10,036,224 pixels. If I take a landscape picture the image will be 3872 pixels wide by 2592 high; if I take a portrait picture it will be 2592 wide by 3872 high.

A digital image may contain many, many colours, but each individual pixel is a single colour. You can see this effect above: the brick on the left has many hues of red and pink to it; in the brick’s close-up on the right each pixel is a single hue of red or pink.

Viewing images on screen

Your computer’s display is also made up of millions of pixels, and how many pixels will depend mostly on the capabilities of your monitor. A common display size for a home or office PC with a 17inch monitor is 1024 pixels wide by 768 pixels high. Some of this space is used for “windows clutter”, like tool bars, scroll bars and so forth.

It follows then that an image straight out of your digital camera will probably be too big to fit on your screen - or anyone else’s screen - and you’ll need to reduce the quantity of pixels in the image so that its width and height are smaller. If you include a huge picture in a Downsizer post, you won’t be able to see the whole thing, and instead you’ll need to use the scrollbars in the browser window to move around the pic. That can be annoying!

A picture from my digital SLR - measuring 3872 x 2592 pixels - would need to be reduced to about 25% to fit a 1024 x 768 display, and even then it would occupy most of the screen!

A good rule of thumb for resizing a picture is to aim for around 640 x 480 (or 480 x 640 if it’s a portrait image). These particular numbers come from ancient computer history, but are a good guide because an image of this sort of size would just about fit on an older computer display of 800 x 600, would still be a decent size on modern displays like 1024 x 768 or widescreen 1440 x 900, and would be quite modest in terms of file size (more on this later - bigger image means bigger file means slower download).

So, here’s how to scale down an image in Photoshop Elements:

  1. Open your image in the editor workspace.

  2. From the Image menu click Resize->Image Size, and you’ll see this dialogue:-

  3. Make sure that "Constrain Proportions" is ticked. This means if you make a change to width, height is automatically recalculated to keep the proportions of the image correct - or vice versa. If you untick this option you’ll be able to change the width and height independently, which in most circumstances won’t be what you want. If you reduce width to 25% but height to just 30% the resized image will look vertically stretched.

  4. Make sure that "Resample Image" is ticked - if it isn’t you won’t be able to change the width and height in pixels. (Unticking this box is to do with printing images, and we’ll return to this later).

  5. In the "Pixel Dimensions" area, select "pixels" for the units, not "percent".

  6. Then, enter a number for width (and height is calculated for you), or a number for height (and width is calculated for you).

  7. Click OK, and your image will be resized.

  8. Click View->Actual Pixels to see your image at the actual dimensions you entered at step 6.

  9. Save it as a different name to avoid losing the original. (If you’re using “version sets” you probably don’t need to read this article :) )

  10. Hey presto, image now at a suitable size for upload to your next post!

Remember to aim for around 640 x 480 in the numbers you enter at step 6. If you enter 640 for width, the automatically calculated height is unlikely to be 480 - it would be something roughly in this ballpark, which is completely fine. You’re aiming for an image of roughly these sorts of dimensions, so feel free to choose dimensions a little larger, or a little smaller, if you wish.

Image file sizes

Generally speaking, the more pixels an image contains, the bigger the file on your hard drive will be. With JPEG images there isn’t a straight forward correlation between image size in pixels and file size on disc, because the actual content of the image itself has a bearing (a busy street scene will likely create a bigger image file on disc than a landscape with a large area of blue sky).

If you’re only working with images on your own computer, file size isn’t an issue as such. But when you start emailing images as attachments, or uploading images to your Downsizer posts, you’ll need to become aware of the size of the image’s file.

The original of the brick image above is a 2.8Mb file on my hard drive. It would be pointless to upload this file to Downsizer because the original image is 3872 x 2592 pixels - far too big to fit on anyone’s screen. Everyone reading my post would need to use scrollbars, and I’ll have needlessly used 2.8Mb of my broadband capacity, and needlessly used 2.8Mb of Downsizer’s hard disc space.

To guard against being cluttered up with big files, Downsizer will only allow you upload a maximum of 2Mb in any one go. If you resize your pics for screen as described in section 2, your files will be well within this limit, and faster to upload.

If I resize the original brick image so its width is 640, its height is automatically recalculated to 428 pixels. This new 640 x 428 image is much more suitable for on-screen viewing, and its file size is just 81Kb - even on a dial-up connection uploading this would take mere seconds.

Finally for this section, be aware that when you include a file in an email as an attachment, the size of the attachment is around 37% bigger than the original file on your hard drive (this is for reasons to do with how email works). If I emailed the original brick image, I’m not sending an email of 2.8Mbs, I’m sending an email of 3.8Mbs - a considerable difference. If I email the 640 x 428 version, I’m sending an email of 111Kb - still very small indeed even for a dial-up connection.

Printing images

When an image is printed on paper, the image’s pixels need to be printed at a certain density to achieve a crisp, quality print. This density is called “resolution” and is usually expressed as pixels per inch, or ppi.

Generally, the best results are achieved by printing at 300ppi. This means that my brick picture - measuring 3872 x 2592 in pixels, would be a print of 12.91 inches wide by 8.64 inches high.

Images straight from your camera will probably be at 72ppi, so you’ll need to change this prior to printing. Here’s how in Photoshop Elements:-

  1. Open your image in the editor workspace.

  2. From the Image menu click Resize->Image Size, and you’ll see this dialogue:-

  3. Make sure that "Constrain Proportions" is ticked as before.

  4. Make sure that "Resample Image" is NOT ticked - you’re not changing the image’s size in pixels, you’re changing the density of pixels per printed inch, the "resolution".

  5. In the "Document Size" area, change the "resolution" to 300 (you may need to change the units to pixels/inch), and you’ll what the printed width and height will be (you can switch between inches, cm and other units as you see fit). Alternatively, enter a width or height; the other dimension will be automatically calculated (because of step 3 above), as will the resolution needed to meet those printed dimensions (more on this in a moment).

  6. Click OK, and the printing resolution of your image will be changed (but its size in pixels otherwise left intact).

If you experimented at step 5 you’ll have noticed that different resolutions produce different printed image sizes. An image printed at 200ppi will be bigger on the printed page because you’re printing the pixels at a lower density, therefore they go further.

As mentioned, the best results are to be had by printing at 300ppi, but if you wanted a bigger print you can print at a lower resolution - to a point. Printed at 200ppi the brick picture would measure 19.36 inches wide by 12.96 inches high. 200ppi still gives excellent results, and larger prints are generally viewed from a greater distance anyway. You should avoid printing at lower than 150ppi though, and if you forget to change an image’s resolution and print it at 72ppi the results will be a poor quality print spread over acres of paper.

Finally for this section, a quick word about pixels per inch PPI versus dots per inch DPI. These two terms are often mistakenly confused, when they mean different things. In brief, dpi refers to the way that “full colour” is printed using just a few inks - cyan, magenta, yellow and black (and maybe a couple of others on modern photo inkjet printers). In terms of sizing your images for print, avoid using the term DPI and always refer to resolution as PPI - pixels per inch.

Finally, those three questions

How do I make a picture small enough for an avatar?

The maximum size in pixels for a Downsizer avatar is 170 x 170 pixels. So, using the procedure described in section 2, resize your chosen image so that both width and height are 170 pixels or less - neither should be greater than this number. Save your resized image under a new filename (to preserve the original), and then upload!

(There is a secondary restriction that your avatar JPEG file should be no more than 13Kb in size. You’re unlikely to breach this, but if you’re having problems PM me and I’ll help you out).

Is my JPEG file too big to upload into a forum post?

Hopefully not any more! If you’re now resizing your forum post pictures in the way described above, your file uploads will be small enough visually to fit on screen, and small enough in file size to meet the 2Mb upload limit.

How big will an image be when printed?

That depends on the number of pixels in the image, and the print resolution you set. Working out how big an image will be when printed is easy - see section 4. If however you wanted to make a printed image fit a certain size (e.g. a particular slot in leaflet/poster/booklet you’re designing), this is slightly more complicated and involves some arithmetic. PM me and I’ll explain!