Formatting graphics for web pages

One common mistake I see on web pages is people not knowing how to format graphics properly; or not taking the trouble to do it.

To be fair, the software spoils us a bit. We can throw in any graphic file, and set it to resize however we want. Just like magic! But of course it’s not magic; it’s a technical process that works in certain ways, even if that’s hidden behind the scenes. If you want good results, a little bit of knowledge about file types and making a good web graphic can make a big difference.


To produce good graphics for your website, you need graphics software that’s capable of some very basic functions. It needs to be able to work with different image file types, resize images, and adjust brightness, contrast, saturation and colour balance.

Photoshop is the best-known name in graphics software, but don’t think they’re synonymous. There are other options too, which is handy as Photoshop tends to be really expensive. I’ve used Paint Shop Pro for many years, and recently picked up the version before last very cheaply on Amazon. Others include The Gimp, which is free, and Serif’s DrawPlus and PhotoPlus. Yes, there’s a certain amount of getting used to the user interface involved in any of these. For most of us the first job is to clear away as many confusing options as possible.

The Paint program in Windows 7’s accessories is a lot better to use than previous versions, and if you want just a basic resize and save it might be OK, though other software will probably produce better-looking results.

Filetype flypast

Images on web pages can be any of the following file types. They all have some level of compression – when saving, the program uses a system to make the file smaller, to reduce download time. Simplistic example: if you have a line of 37 black pixels it takes less space to store “37 black” than “black black black …(x37)”.

GIF. This keeps all the detail in the image but can only have 256 colours. Because the computer uses dots of intermediate colours to convince the eye that edges in the image are smoother, any complex image like a photo needs more than this. So GIF is really only suited for simple graphics like line art or coloured text on a background. It does have a handy feature: you can make animated GIFs, setting up frames like a movie and controlling the transitions between them. That’s what made all those old-style bouncing balls and what-have-you.

JPEG. This has the full colour palette, and manages compression by losing detail from the image. In the save options for JPEGs you can control the level of compression: at low levels the eye can’t spot the difference, but as you turn it up the image starts to look bitty. JPEG is good for detailed images, and has long been the standard for photos.

PNG. The newer kid on the block, designed as an improvement to GIF. It has the full colour palette like JPEG, but its compression doesn’t lose detail. It produces bigger files than JPEG for photos, but smaller files for text and line art. It can handle transparent areas, which JPEG can’t.

Why resizing on the page is usually a bad thing

You can grab a graphic file from your camera, stock art, or whatever; throw it into a page; tweak the settings to make it the size you want; and hit the publish button. It’s easy. But there are several reasons why you should take more care.

Large image forced to resize in browser1) Slower downloads. Imagine you take a 1.5MB photo and tell the page to display it as a small image at the side of the page. When someone views your page, their computer doesn’t just download a small picture: it downloads the whole 1.5MB file, and then needs a bit of processing time to display it at the forced size. So the reader is wondering why the page is taking so long to load. They may even get fed up and go away again. If you have several pictures like this on a page it’s a killer. Click on the windswept and interesting chap alongside to see how big the image really is.

2) Distortion. You may see “aspect ratio” in software settings. This simply means the relative proportions between the image’s height and width. Sometimes people want an image to fit a specific height and width, and they allow the aspect ratio to change to do so. Result: pictures of people squashed and stretched like funhouse mirrors. Because humans are so hooked on faces (and body shapes), this can be disquieting. It’s certainly unflattering!

3) Looking pants. Web browsers are simply not that good at creating high-quality resized images on the fly. That’s especially true where you’re making a big size change, or sizing by an odd factor (like 1/7.2). Often the image appears bitty or jaggy. It fails to reach its potential.

Make the image you want to have

To get the best quality image on a web page, alter it in graphics software to the size you want it to display. That could involve cropping it to chop off unneeded detail and alter the proportions. If you’re going to reduce it, you may find increasing brightness a smidgin first makes it look better; maybe other tweaks too. The undo function (ctrl-Z) is your friend!

Then save it in the most appropriate format. (I sometimes end up trying different size versions to see what works best, and use filenames so I know which is which, eg “cover 300px.jpg”.)

Now this isn’t universal advice. Sometimes it can be handy to post a single image that is small on the page but opens to a larger version when the user clicks on it. For cases like that, use a critical eye to make sure the quality is OK.

The print and PDF connection

Some of this advice relates to other info formats. For instance, if you resize a big graphic to display small in a document and PDF it, the PDF file will contain the original image and will be bigger than if you make a version of the image to fit. As graphics make up most of PDF file sizes, it’s worth keeping an eye on.

For print and PDF there are other image file formats that can come into play. There’s also the question of resolution in dots per inch (dpi). An image for the web has low resolution because that’s all screens can display; it’s not detailed enough for print. Resizing the image includes specifying the correct resolution.

But that’s a bit of a tangent. Bottom line: a bit of informed attention to your images can give you better-looking web pages.


Scroll to Top