Jay Peg, Ping and Gif aren’t characters in my children’s favourite cartoons. But they are still three of the most commonly used image file formats in today’s digital world.
Recently I was flicking through an old uni book from the late 90’s titled, ‘An intro to HTML’ and these three graphical file formats featured; they were important in the early days of user interfaces and the web and still are today.
This article explains a bit more about each format and why you need to know.
Broad brush-strokes
Gif – Graphics Interchange Format
Best for line drawings, 2D graphics, illustrations, and simple animations (animated gifs)
Jpeg – Joint Photographic Group
Best for compatibility, used by more of the social media websites & publishing platforms
PNG – Portable Network Graphics
Best for compression without loss of quality. Also used when transparency is required
And some others:
RAW –The highest possible quality for photographic images with no compression
Tiff – Tagged Image File Format. High quality photographic images used in print and publications
EPS – Encapsulated PostScript. Editable graphic file format used in printed media
SVG – Scalable Vector Graphics. Used on the web for interactivity and animation
A little bit more colour
Let me explain some of these terms:
Compression – how effectively the files can be made physically smaller, with some or no loss of image quality. This is important if you have limited bandwidth and want to see – or present – the sharpest possible image.
Colour depth – the number of distinct colours that can be represented in each pixel (think of a pixel as a very small coloured dot!), which is closely related to the file size. For example, in order; black-and-white, grey-scale, a web-safe but limited palette of colours, and full photo-quality images take an increasingly large amount of storage.
Transparency – the ability of an irregular shape image (non rectangular) to float above its background without covering it. PNGs and other formats allow for a more subtle shading/grading or partial transparency.
Cropping – as the name suggests, making a file/image smaller by selectively removing part of the image.
Resizing – another way you can make images smaller or more suitable for your needs but keeping the overall shape, for example to look good as your on your twitter profile, or a smaller thumbnail image. However, be careful when making an image bigger or smaller than the original, digital pictures are great but you can’t create something that doesn’t exist!
Conversion – although it is possible to convert between most formats, beware possible loss of quality and relative file sizes. A simple-looking GIF might be bigger than the equivalent better-quality JPG file.
The future looks bright
Why is all this important?
Well as a surfer (Ed. Do people say that anymore?), mobile app user and sophisticated online shopper you can be positively influenced by pictures, and good design, usability etc. Similarly, poor quality or inappropriate images, or solid blocks of text can be very hard to read and off-putting.
And, as a publisher, online business owner or blogger you want your audience to be engaged and have the best possible experience. In an age of shorter attention spans and increasing amounts of information delivered thorough multiple channels and media, pictures that appeal to more basic human emotions and help convey more information more quickly can make all the difference to leads, social interactions, sales or readership.
Want to read more?
Here are some more in-depth and specific articles from our blogging friends at A Bright Clear Web and Polyspiral
Author: Rob Simpson, graphic designer at Squircle Creative
An IT elementary school collaboration
@ITelementary
© 2016 IT elementary school
Leave a Reply