Compress your images

When building a website we need to think about the target audience along with the devices and networks they will be using. It would be fool hardy to think that most people will be accessing our website via a high speed fibre broadband and to forget about people on slower connections. We therefore have to optimise large images, video’s, music and other types of media to maximise the target audience.

The most common area that is overlooked is images. You don’t need to be a graphic designer or have access to software such as Adobe Photoshop as there are plenty of free websites out there that can do the job for you. To save you time I’ve checked out half a dozen and top of the list is tinypng.com which is free, easy to use and gives excellent results. The service supports jpg images and png files. Simply upload your file(s) and the service compresses them and provides a link to download the resulting image.

What does TinyPNG do?
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Why should I use TinyPNG?
PNG is useful because it’s the only widely supported format that can store partially transparent images. The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and websites. It will use less bandwidth and load faster.

How does it work?
When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency.

The files produced by TinyPNG are displayed perfectly on all modern browsers including mobile devices.

By using this free service I was able to save almost 1 megabyte from just the homepage of a clients website. This makes the website load much faster.

That is a reduction of 66% saving 47kb.

Can you tell the difference?