When To Use JPG, GIF, SVG, And PNG In Your Design




Unless you have been living under a rock for the past twenty years, you must already be familiar with the very popular social media gif trend. The gifs are everywhere, and now you can even send them as a text message and post it in the comments section. It’s the works. We all know about Gifs, but do we know about the rest of the formats that can be used for design and image purposes?

GIF

Online graphic design courses will have you know the best formats for different purposes. If you’re thinking of, oh no so many to choose from, what do I choose? Just remember that all of these different formats have a specific purpose for existing. All these cater to you differently when incorporating them in your design.

GIF (Graphic Interchange Format) is a type of bitmap, but unlike PNG or JPEG, it is limited to a palette of 256 colors. 256, isn’t that enough? Well unfortunately not, when you have complex photographs, a lot of color is lost during the conversion to GIF, which is why it is better not to use the GIF format for too vibrant images.

While GIF may not be that great for colorful photos, the limited palette does have its own advantages, for example the file size remains minimum which may be ideal when dealing with slow internet speeds. For years GIF was the go to format for online imaging, but now PNG and SVG serve the same purpose with better resolution.

When should you use GIF?

  • Simple Animations
  • Small Icons
  • Graphics with flat colors mostly

JPEG

JPEG (Joint Photographic Experts Group) also known as JPG is a 16-bit format, which means unlike its partner GIF, it can combine red, green and blue light to display millions of colors. JPEG is a very popular format for photography and most digital cameras available in the market today are set on this format.

The format also allows the user the liberty to compress the image. You can choose from 0-100% , but the best setting for compression is between 60-75% as it does not lose quality and decreases the file size.

JPEG although is useful, but does have its down side. JPEG images if processes oer and over tend to lose their quality. Kind of like a photocopy of a photocopy. This is why most professional photographers tend to shoot on the RAW format which is lossless and allows for ongoing editing. JPG can also not preserve transparency; this is where GIF and PNG trump it.

JPEG can be used for:

  • Photography
  • Still images
  • Images that have complex dynamics and colors

PNG

A relatively new and useful format is the PNG (Portable Network Graphic) is a combination of GIF and JPEG. It has two main variants:

It has two main variants:

PNG-8

PNG uses the 256 color palette too, and has better transparency options and exports a slightly smaller file size. Unfortunately PNG-8 has no animation function.

PNG-24

PNG-24 like the JPEG can render images with millions of colors, but here’s the fun part, it can also preserve transparency unlike the JPEG. PNG-24 is a lossless file type, which is why the file size will be larger, but if you need a better quality and file size doesn’t really matter, there’s no better option than PNG-24. Graphic design classes will most probably make you deal with this file format a lot more than the others. There is a down side here too; PNG-24 is not compatible with every app and platform which is why it may not be the best for web sharing.

PNGs are best for:

  • Web graphics that require transparency
  • Images that have complex colors
  • Images requiring re-edit and export.

SVG

SVG (scalable Vector Graphics) is not like the three aforementioned formats because it is not a pure bitmap format. It’s a vector format which is quite close to the adobe illustrator’s EPS format and is increasing in popularity among UI and Web Designers.

SVG is perfect for icons logos, flags, maps, charts and other graphics that are created in vector based software. It’s written in XML, so SVGs can be edited via any text editor. For any sort of responsive design, SVG is perfect because Vector images can be scaled to any size without distortion.

SVG although being vector can cater to bitmap images by embedding tem in the SVG file.

SVG is best for:

  • Icons and Logos, basically anything that can use the crisp look of a vector illustration.
  • Graphics for multiple screen sizes
  • Responsive graphics for devices
  • Graphics that require re-editing and uploading.

So choose wisely the next time you decide to create an illustration and are thinking of a better format for it to suit the needs of your design. Online graphic design courses can help you achieve a better understanding of the different courses and how they can help you in your future design based endeavors.

About The Author
Shamsah
VP Channel Sales at QuickStart

Shamsah Malik

Shamsah is an entrepreneurial, innovative professional with over ten years of sales, relationship management and business development experience within highly competitive SaaS, information technology, and SLED markets.