So how large should your website images be? In this interview Reece Lamshed asks John Parnell Pierce to explain the best approach for keeping images small on a website.
- raw image files are too large for websites
- use compress image formats
- JPEG is best for compressing photographs
- GIF is usually best for compressing logos and text
- PNG is becoming a more popular format for image compression
- resize your images to your target dimensions before placing them in your website
Note: This interview is 6 years old. It was part of a training resource for beginner interactive media students. Though web technology has changed, the principles discussed are still relevant.
REECE: I want to now talk about uploading media into a web page, though here it’s about file size and no matter what we’re talking about because, and you can explain why that’s the case. But let start at that point of how important it is to get a size that is small?
JOHN: Reality is that a photograph that’s going to fit into your computer screen is going to be over a megabyte in size as raw data. If you have a digital camera that’s a high resolution one, you know, some of you pictures is gonna be 4 or 5 megabytes in size or more. You going to have users which are on 56k modems, and there are always some users who can be on slowest technology. You know there’s some parts in Central Australia with a phone line that is so bad that you will be lucky to get up to 300 bits per seconds on your connection. You don’t have all your users on fast broadband connections. So you have to try to cater for quite broad range of users.
One of the great thing we have is image compression, particularly the JPEG and GIF image formats which allow you to strip out enormous amount of information from that file and reduce it a really small file size. Even on the highest quality, a one megabyte image can be converted to 200 kilobytes with JPEG and if we go lower, and I typically work with between about 60 to 80% of quality, that 100 megabyte file can get down to about 50 kilobytes. So it necessarily that you actually do compress your images before putting it into your web page, so that they’re at a size that is going to be easily downloaded. But the same time you want to try to maintain sufficient quality so that the image hasn’t look completely horrible.
One of the best approach is to think about what the image type is, and use the appropriate compression format. JPEG is best for photos, any image which is complex is going to work well with JPEG. GIF is better for an image that has flat color and regions of the same color. So the things that work better on GIF are going to be logos, text looks quite well in GIF, so if you’re scanning in newsletters, let’s say you scanned a page of a newspaper and wanted to put that into your website, or document, then GIF is gonna work better than JPEG.
There’s a new format PNG which is now available on some web tools, such as Photoshop and Fireworks, can also save as PNG. PNG is sort of really across between JPEG and GIF I guess in the way it operates and you’re seeing more of it. One of the reasons why PNG is being adopted is it has no licensing restrictions. Both JPEG and GIF have patents that are owned by different laboratories. PNG is an open format and we will see more of it over time.
REECE: The other mistake of some people make with images is not reduce their size, the actual dimension, until they bring it in to web page and then they use the handles to bring that down. And make it smaller as if this is making it actually lighter.
JOHN: And it’s really important that you pre-size your images in Photoshop or Fireworks before you bring it in to your web page. So if the image is gonna be displayed of 500 pixels by 200 pixels, size and crop it in Photoshop, when you in there. When you’re in Photoshop or File works or whatever program, you might want to also use some color correction. It the photograph’s too dark you could try lightening it. You can also get in there with the tools and remove red eye for peoples photograph if you want to. I get sick of seeing picture with red eye on websites like MySpace.