Portfolio A Belief In Design
And A Love Of Photography

Don’t Gamble With Your Image (Part 1)

PNG transparency demonstration

PNG transparency demonstration (click image)

It may not always seem so but things really do change, look in the mirror if you don’t believe me.

1990 no internet, 1991 internet starts. Digital cameras? Texas Instruments patented a film-less electronic camera in 1972, August 1981 the Sony Mavica was giving single image capture and back to 1991 where Kodak introduced a Nikon F3 based digital ‘pro’ camera.

This is recent history for me, for the young it is a lifetime though. When I first started in design getting images ready for print, or for that matter screen was a tedious and expensive process.

  1. Shoot Image
  2. Process Film
  3. Scan Negative or Transparency
  4. Watch Money Leave Bank Account

Yes the last aspect was hideously expensive. One had to take an original to an expert in a white coat in a dust free environment in a repro house and get the wallet well and truly drained to digitise an image, £50-£150 per shot. Further to this it was far from quick, days running into weeks could pass.

It is worth reflecting on this for those occasions where the technology isn’t quite doing what you want. If it isn’t now it may well be doing so soon but the bottom line is that now, if you want you can photograph something, get it posted on the internet and for that matter get it listed on Google in less than a quarter of an hour. Things really do change.

So in this DIY era a bit of knowledge may help, because in the moments when we are doing it ourselves creating our WordPress blogs, from our offices in Topsham or Exeter and things aren’t going quit right I suspect a reminder about the above won’t necessarily help.

Digital Images, Some Basics

Pixels

In web (or screen) based design, images are made up from pixels. A Pixel is the smallest unit that a screen can display and these pixels combine together to create a bitmap image.

  • A bitmap image is literally a grid or map of pixels
  • Each pixel can only show one colour
  • Because the pixels are so small our brain smooths the edges and colours out
  • Screens are RGB (red green and blue) devices

A screen can display a certain number of pixels. This number is generally dependent on how good the screen and Graphics Card in the computer are and how they are set up.

Monitor resolutions are steadily increasing. In the past a standard monitor would have been able to display 640×480 pixels or 800×600 if it was a good one. Now these specs are virtually unused. 1024×768 accounts for around 20% of the market but this will undoubtedly diminish in the near future.

There is a problem though and it is that,

more pixels = bigger files = slower uploads or downloads

Even in this day of reasonably fast broadband we shouldn’t stop caring about filesize. If pictures are too big the page will load slowly the viewer will get bored and worse still Google will penalise your site for having poor Page Speed. Don’t forget too that connectivity to mobile devices such as phones is slower whilst the use of phones to access the internet is increasing.

It is fairly intuitive then that an image of 1000 pixels width will fill the width of a 1024×768 monitor (allowing for the browser frame and scrollbars). On a higher resolution screen, say 1440×900, the same image will spread across around two thirds of the width of the screen. Obviously if the image was 1000 pixels tall it would need to be scrolled up and down on both viewers to view, this isn’t always satisfactory. It is important to grasp that the same file will take up more or less space on a screen as a result of differing screen resolutions. Clearly a balance needs to be found.

A 1024×768 monitor will display 786,432 pixels (1024 times 768)

A 1440×900 monitor will display 1,296,000 pixels (1440 times 900)

That’s around half a million more ‘things’ for a computer to deal with.

So, in order to make things more workable there are ways of reducing the filesize of a standard bitmap image to make them smaller.

There are three standard types of image that one will find in a website,

  1. GIF (say, Jif) – .gif
  2. JPEG (say, Jay Peg) .jpg (or .jpeg)
  3. PNG (say, Ping) .png

When you export for the web ideally you are looking to export either a GIF file or a JPEG. Nowadays PNG files are supported too but a word of warning, our old thorn Internet Explorer has historically had limited support for PNGs which necessitates websites to rely on support such as PNG fix.

Not All Filetypes Are Similar

GIF

If I was going to paint a house white it would be a bit silly to take all of the colours of the rainbow to the house. Better still travel light, take a tin of white paint. This is in effect what GIFs do. They analyse an image, decide how few colours the image needs in order to look OK and then create a small palette of colours as part of the file. If you look at the smiley above you will see that this image probably only uses half a dozen colours although it does use more than just yellow and black. GIFs are great for logos, and in the past they were popular because they are able to be made partly transparent and show apparent movement. However they are crude and don’t always show complex images well. The movement is nothing much more than a digital flick book although it can appeal.

JPEG

So, if GIFs are better for ‘graphic’ images with fewer colours., JPEGs are generally more suited to photographic images. Most people will have heard of JPEGs it’s what cameras generally create as one of the default file types. They are good, they can reproduce complex images faithfully and they can reduce the file size dramatically by compression.

However JPEGs are ‘lossy’. In order to make a smaller file a JPEG accepts some loss of quality. You make a simple choice when you save a JPEG,

Small file but low quality
Large file with better quality

PS. Don’t JPEG a JPEG. Each time you re-save it you will loose quality, a bit like photocopying a photocopy.

PNG

Ping, stupid name, (Bing another stupid name.) Let’s get Ming out of the way (animated PNGs children).

PNGs are rather good. They combine the useful bits of JPEGs and GIFs. They are able to compress but the compression is lossless so the images retain quality. In addition they can have transparent bits on them. The transparency effects are much better than with GIFs, click on the dice image at the top to understand this.

Sounds all too good?

Well sadly PNGs don’t do as good a job of compression as JPEGs although they handle transparency much better than GIFs. The compression is lossless but the file-sizes are generally larger than JPEGs. Sadly PNGs are not well supported by all browsers particularly IE. But, if you have a photo that would benefit from a transparent background, or includes some text then PNGs are great.

PSD

I am going to add this format here although it isn’t a web format. I, and most other professional photographers use Photoshop (CS) as the main image editing software. Whilst working an image the sensible option is to save it as a PSD (Photoshop) file which is relatively small, uncompressed, and can be saved with editing layers in place.

Once edited images will need to be saved as one of the above formats prior to web use.

Summary

These three file formats all have a place on a website.

If you want to put a small graphic logo up a GIF will probably be the first choice, it will handle simple transparency too and motion.

If you need more complex transparency effects or if the image has a photographic content a PNG will do the job but watch the file size and be aware that it may not look as expected on all browsers without a ‘fix.’

Finally if you are putting a large photographic image up JPEGs are the tools for the job. Ideally create a gallery with small, compressed thumbnails which allow the user to decide whether or not to view the full size image, and keep the full size image a reasonable pixel size, don’t waste bandwidth or the Google man will get you!