About Image Formats

GIF format

The most common example are animated GIFs which are several images or frames combined into a single file. These are those cool soundless loops that autoplay and are more like a flipbook. This format is lossless meaning that visual quality is not degraded and supports both animated and static images. The GIF (Graphical Interchange Format) was invented in 1987 by Steve Wilhite, who was a US software writer looking to animate images in as little a size as possible and in colour. At the time there was an equivalent format(RLE) but was only in black and white. GIF is not suitable for colour photographs and images with colour gradients due to its limits. However it’s great for simple image like logos and graphics with solid colour.

Fun fact: GIFs have become so popular that in 2012, the word “GIF” was named the Oxford Dictionary Word of the Year.

When to choose GIF:

• They are a great way to provide instructions and share content because of the range they give.
• Great for getting your audience attention for about 8 sec since they are more interesting to look at that static images.
• This format has been around long on social media can be used as reaction or emotion instead of emojis and words
• Great for sharing small animations from large files, low-resolution video clips, flat images e.g. logos
• Has transparency support of one colour that can be useful in editing

GIF was the standard for 8-bit colour images on the internet until PNG became a useable alternative and despite having moving images much better formats to GIF exist e.g. MNGs (multiple image network graphics)

PNG format

This lossless data compression format was created to replace the (GIF). It is an open format that has no copyright limitations. First developed in 1995, PNG (Portable Network Graphics Format) was created to keep up with technology where GIF was lacking. At that time GIF was well established but unable to support a wide spectrum of colours.

When to choose png:

• Designed to transfer images without compromising quality on the internet and can have a lot of editing effects.
• Due to support of transparent/semi-transparent backgrounds can be used to design logos or icons
• Enables large selection of colours along with easy placement of an image on a background of a picture, pattern or solid colour palette making it the ideal choice in editing and digital art.
• Supports a single, static picture and has a standard unaltered quality making it great for taking screenshots.
• Best for saving images for later edits or use as the quality will remain similar despite how many times it is saved
• Very portable, efficient and lossless. Can be used on devices regardless of the software or hardware

This makes it tough for the GIF format as it has almost been replaced completely by PNG in the publishing world despite its popularity. The win that GIF has though is the smaller compression size compared to PNG.

If you want to optimise in PNG what you want to do here is reduce colours, maximize repeated pixel areas, minimize drop-shadows, and control all smooth transitions with application of dithering. Tools such as Photoshop that are specialized can help reduce images significantly while retaining acceptable quality.

JPG format

This file format widely used in professional photography. Introduced in 1992, JPEG(Joint Photographic Experts Group) in short JPG, can be compressed to as small a size as you like and is a matter of trading off file size and image quality because it uses lossy compression. As much as there’s little perceptible loss in quality you run the risk of losing data due to heavy compression. The typical ratio is 10:1 which means that if you had a 10mb photo that you want to convert to JPG format conversion it will be 1 mb.

When to choose jpg:

• Due to its popularity is remains the most used formats in compression of digital images, in digital cameras, different operating systems and on the Internet.
• Smaller file size that is much easier to store and share.
• Has adjustable compression standards and an ideal nature of high-quality and detailed images that are great in photography, paintings and the editing processes.
• Very widely supported across most platforms and services
• Functions with more responsive usage on the web due to the reduced data in the images.

SVG format

While the formats (PNG, JPG, GIF) I mentioned are Raster formats, SVG is a vector format. Developed in 1999 SVG (Scalable Vector Graphics) is an XML (Extensible Markup Language)-based vector image format for two-dimensional images. A vector is an element with a specific magnitude and direction. SVG files are simply plain text files that describe lines, curves, shapes, colours, and text and come with support for animation and interactivity.

The Raster formats are composed of a fixed set of pixels while the Vector format is composed of a fixed set of shapes. So the key difference comes out when scaling the different formats. When scaling Raster formats, the pixels are revealed while in Vector format the shapes are preserved.

When to choose SVG:

• To create realistic images and rendering because shadows are more realistic from a 3D perspective.
• Due to being lossless, the details of objects are stored fully and can be modified later easily without degrading the quality.
• Can be used in specification of dimensions in device-independent units, that can then be used in conversion.
• Operates easily with computer languages and technologies and is the vectors standard in browsers
• Meets web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
• Plain illustrations and diagrams translate perfectly to SVG
• Clearer logos and icons
• Animations inclusive of cool line drawing effects and the code interacts with computer language for more options in this.
• Interactivity (charts, graphs, etc.) in plotting information and updating dependent on user actions or occurrences and also being searchable and indexable.
• Has special effects enabled e.g. changing shapes
• Can be used in building interfaces and applications
• Due to SVG files being smaller than their equivalent in other formats, they are useful in reducing size and decreasing loading times

NOTE: This article is specifically about image formats for the web. There are a whole lot more image formats used in the design world for print media.