Internet Magic Tricks

Home » internet magic tricks » Internet Magic Tricks

Internet Magic Tricks

Internet Magic Tricks Biogoraphy

As long as you don’t mind breaking compatibility with older browsers and have no need for animation, the Portable Network Graphic (PNG) has replaced the Graphics Interchange Format (GIF) as the preferred transparency-supporting lossless image format of the internet. Over the next few weeks, we’re going to explore the different ways you can optimise the size of PNGs while compromising little on quality.

The first trick we’re going to learn is using posterisation to reduce the colour complexity of an image. This process works best on images with few colours and as long as you don’t go overboard, the visual differences are virtually unnoticeable. if you look at the left-hand side of the photo above, you can see an extreme case of posterisation. Similar colours become blobs of the same colour and a lot of detail is lost.

So let’s not go that far. Fire up either Photoshop, GIMP or your photo editor of choice. Load up your image and in PS, go to Image -> Adjustments -> Posterize…, while in GIMP you need to navigate to Tools -> Color Tools -> Posterize or Colors -> Posterize. Both programs will show a dialog box where you can adjust the number of levels of posterisation.

A good starting point is between 30-45, though you should go higher if you notice a huge drop in colour depth and lower if you think you can get away with it. Once you’re happy with the appearance, save the image as a PNG. The compression ratios will vary depending on the size and complexity of the image, but a 640 x 360 shot of the flower here went from 363.1KB to 213.3KB, using Photoshop CS5 and a Posterize setting of 30. That’s a 41.3 per cent drop in file size; for web development, the bandwidth benefits massively outweigh the tiny drop in quality.

Internet Magic Tricks