The importance of correctly-sized images

Computer file formats are something which we shouldn’t need to know about, but we have to. I’ve documented the need-to-know stuff about PDFs here, but what about image file formats? Judging from the state of some of the photos and logos I see around the web, quite a few people don’t know their JPEGs from their DPIs, so here goes.

The first thing to mention is the size of the image, or resolution. For print, you need to supply images in as high a resolution as possible: typically, printers will use 300 “dots per inch” (DPI), so an image to be used across the width of an A4 page (21cm) needs to be at least 2500 pixels wide on screen. But never, ever enlarge an image using Photoshop. If it’s not big enough, and you really can’t get a bigger original image, discuss a strategy with a graphic designer or other professional Photoshop user.

For web use, the image needs to be as small as you can get away with. But on screen we’re not interested in physical measurement sizes; we work with actual pixels, so your image needs to be no more than the maximum pixel size at which it will ever be seen. Don’t forget, with responsive web layouts, images can expand and contract to fit the screen, but there’s normally an upper size limit set in the design.

For example, on the web page where this article appears, images won’t be seen at more than 620 pixels wide (they could end up smaller, but that’s the maximum), so that’s the size I’d need.

Again, if you’re working with a professional designer, don’t try to resize images, let them do that. But when collating the images for a page, find out how large they might end up and ensure that your originals are at least that big.

If you’re adding images to a page directly yourself, through a content management system, find out if the system will automatically resize any that you upload to a certain specified width (it probably will). But if not, find out what width you should be using and resize the images before you upload them; never just upload huge original files. The eventual website visitor’s browser will resize the images on the fly to fit, but it has to load the (possibly huge) oversized image first, and this can make page load time painfully slow.

Tomorrow I’ll look at image file storage formats.

Leave a Reply

Your email address will not be published. Required fields are marked *