×
Introducing Creative Market Pro: Download unlimited assets to elevate your work. LEARN MORE

The Missing Guide to Image Formats: PNG, JPG, TIFF & GIF

By on Nov 11, 2016 in How To
The Missing Guide to Image Formats: PNG, JPG, TIFF & GIF

Unless you're a graphic designer by profession or seriously dabbles in graphic design, chances are, you’ve never had the need to learn more about image formats. But if you're starting to explore this world, the vast selection of the said formats can be pretty overwhelming. Thankfully, there's a method to this madness.

The first thing you need to understand about image formats is the difference between raster and vector. Raster photos are put together by a set of pixels, or singular blocks, to generate an image. The most popular image formats - JPGs, GIFs, and PNGs - are raster images. Every picture found online or in print falls under this category.

Pixels possess a definite proportion determined by their quality (high-res or low-res). When they are expanded to fill up space they're not originally meant to fit in, they distort. This leads to a fuzzy or unclear image. It’s impossible to resize a raster image without compromising its resolution. Because of this, it's highly recommended to save and store raster images in the exact sizes meant for the image’s application.

On the other hand, vector images are a lot more flexible since proportionate formulas are used instead of pixels. Format files like EPS, AI, and PDF are ideal for creating images that need repeated resizing. Logo and brand images are often created as a vector. The great thing about vectors is their ability to be resized as tiny as a post stamp or as huge as a billboard ad without compromising image quality.

In terms of compression, all image files fall under two main categories: lossy and lossless. When uncompressed, lossy image formats lose some of the original data, and therefore come out with lower quality than the original. Lossless image formats, on the other hand, save a precise pixel-by-pixel rendering of the image to preserve image quality. However, the process demands more space.

It’s not unusual to find both compression types when searching for photos online.

Image File Formats

When creating or manipulating graphics, it’s important to learn how the different image formats work. It’s a huge factor for success. If you saved a photo you've meticulously perfected in the wrong format, you may not be able to upload it correctly. Even worse, you may lose its original quality or the option to modify the original work. You can avoid this major blunder if you’re well-informed about image file formats.

Although there are tons of image formats utilized to save and display pictures, there are those considered to be the “heavyweights” in the photo industry. These are the most widely-used image formats today. Most people have encountered and used at least one, if not all of them.

1. JPG

JPEG, aka JPG, stands for Joint Photographic Experts Group. Since its conception in 1994, a JPG file is considered the standard graphic file format. It's arguably the most popular image format online.

JPG files are lossy. This means a ton of information is lost from the original photo once it becomes a JPG file. This format gets rid of majority of the information to be able to save the image into a small file. This also means, to some extent, the quality of the original image is diminished.

Nearly every digital camera uses the JPG format. Users can take pictures and save them as JPG files. Because the file is smaller, JPGs are extremely web-friendly. They don’t take up a lot of room, and only calls for a minimum transfer time. Also, JPGs are less grainy than GIFs.

Use JPGs for photos and images that are packed with countless colors. The file format relies on an intricate compression algorithm that lets users produce smaller sized graphics by reducing the quality of the image.

JPGs are not suitable for photographs with text, sizeable blocks of solid shades, and basic shapes with sharp edges. When the photo is compacted, the text, color, or edge may turn fuzzy. This results in an image that isn't as crisp as it should be if it's saved using a different format.

Benefits of JPGs:

  • Feature 24-bit color, with as much as 16 million different colors and color combinations
  • Possess rich, vibrant colors ideal for photos that require razor focus on color detail
  • Are the most widely recognized and accepted image format
  • Work well for most operating systems

Downsides of JPEGs:

  • Have the tendency to shed off a great deal of information
  • May develop artifacts following a compression
  • Cannot be animated

2. GIF

GIF stands for Graphics Interchange Format. It cuts down the number of colors (potentially thousands to hundreds of thousands) in an image down to 256. Unlike JPGs, GIFs support transparency. They possess the unique ability to display a series of images, much like videos, referred to as an animated GIF. The sequence of individual GIF images linked together systematically creates an action or an animation.

GIFs, similar to JPGs, also feature the ability to load in portions on websites. These graphics, called interlaced GIFs, are generally a bit bigger than regular GIFs. Their unique ability is to enable a GIF photo to be partly seen as it loads on a page. Its interlacing characteristic gives the impression of fast loading visuals. When GIFs are being loaded on a browser, the first GIF to appear is usually blurry and unclear. However, as the data are downloaded, the graphic becomes clearer and more defined.

A GIF file is lossless, and therefore, more efficient in compressing graphics with a solitary shade. However, its quality is not as good when it comes to crisp and detailed photos. GIFs can be utilized efficiently for limited-color graphics, like logos and charts, or for visuals where transparency is essential. Avoid using GIFs for full-color product images and portraits where color variations are necessary.

Use GIF format for graphics that feature a small, preset quantity of colors. The data compression algorithm for this format is much less intricate than for JPGs. The format is not made for photographic images or visuals with gradient shades. Since a GIF file has a small number of colors, photographs and gradients saved as such will turn out with obvious pixelation.

This particular image format is relatively old. In 2012, it celebrated its silver anniversary with the introduction of GIFs. And though the format is still widely used, designers tend to set it aside in favor of the PNG format.

Benefits of GIF:

  • Supports transparency
  • Performs modest animations
  • Features lossless quality
  • Works well for graphics with restricted colors

Downsides of GIF:

  • Limits graphics to only 256 colors
  • Considered to be somewhat outdated compared to other formats

3. PNG

PNG stands for Portable Network Graphics. It is an image format compression that, at some point, is expected to replace the GIF format. Unlike the latter, PNG was created by an Internet panel specifically to be patent-free. PNGs also offer a variety of upgrades and better features when compared to GIFs.

But similar to a GIF, a PNG file is compressed in a lossless manner. It's not meant to replace a JPG file, but rather enables the user to make a trade-off between the size of the file and the quality of the image when it's compressed. In general, a graphic saved in a PNG format is usually between 10 and 30% more compressed than an image saved in a GIF format.

Like a JPG, a PNG file is useless in terms of animation. However, it's extensible. Software developers can create versions of PNGs that have a series of scriptable graphics. With its ability to host layered colors, PNG files are arguably the best option for photos going through the editing process. Aside from being lossless, PNGs are also open-source. They can also be created using a transparent background.

The PNG format was created as an alternative to the GIF format when it seemed that GIFs would be subjected to a royalty fee. And similar to them, PNGs are also unsuited for standard photographs. While it's possible to find a way to fix the banding issue, the predominant problem about the image's size never goes away. Old phone models don't support PNGs too.

Benefits of PNG:

  • Features lossless compression so the graphics don't lose quality and detail
  • Has better features than GIFs
  • Creates a smaller file size compared to GIF
  • Supports better transparency

Downsides of PNG:

  • Produces extremely large files that require too much space (sometimes even larger than JPGs)
  • Unable to support animation
  • Unsuited for all browsers

4. TIFF

TIFF stands for Tagged Image File Format. It’s widely used by professionals in the photo industry who prefer to use lossless compression. Ironically, it's the least popular in this category of “heavyweights.” This is perhaps because it's rarely acknowledged as a type of file by websites. Also, there are several types of TIFF files, but not a single reader can scan and read them all. This leads to different format issues down the line. But in terms of printing, TIFF format is regarded as one of the best choices with its organic end result.

TIFF was developed by Aldus for the purpose of desktop publishing. By 2009, its key control has been transferred to the Adobe system. TIFF formats are well-liked by common users, but they truly gained recognition with graphic designers and photo experts involved in any visual niche. Also, studies show that TIFF is a popular format among Apple users.

This particular image format is a breeze to use on programs that handle page layout, page posting and photo manipulation. TIFF is an extremely flexible format for it can be lossy like JPGs or lossless like GIFs and PNGs. It's also a rich image format that is backed up by different imaging software. It's able to record halftone graphic data using various pixel intensities, which makes it perfect for processing, storing, and printing graphics. When it comes to raster image format, TIFF is considered the king.

TIFF is also the most common file format found in photo software like Photoshop, as well as page layout programs like Quark and InDesign.

Benefits of TIFF:

  • Extremely flexible
  • Supports different compression formats (including zero compression)
  • Produces high-quality images with all the color and information stored
  • Saves formats with layers

Downsides of TIFF:

  • Extra-large file sizes
  • Demands long transfer time
  • Requires substantial disk space consumption

Other Notable Image Formats

5. RAW

RAW image files typically include information straight from a digital camera. The images are called "raw" for the simple reason that they're still untouched. They haven't been processed, so they can't be edited, manipulated or printed yet. There are plenty of these formats. Each camera brand generally features its own proprietary raw format.

Images considered RAW usually have a substantial amount of uncompressed data. For this reason, the file size of a raw image is incredibly large. They are usually converted to TIFF before the editing process begins.

6. BMP

BMP or Bitmap are Windows image files. At one point, it was one of the very few image formats. BMP files are huge and uncompressed. But, the images are vibrant with colors, high-quality, pretty straightforward and well-suited for all machines and gadgets running a Windows operating system. BMP files are also known as paint images.

Bitmaps are made of millions of dots referred to as pixels with various colors and placements to generate a picture or a pattern. The file can be an 8-bit, a 16-bit or a 24-bit image. So, when you edit a BMP image to make it smaller or larger, you're actually making the individual pixels smaller or larger. This results in shapes that look jagged and sometimes unclear.

BMP files are not that popular since they're not web-friendly and are only limited to Windows programs.

7. SVG

SVG stands for Scalable Vector Graphics. SVG files are web standards based on XML that identify fixed graphics and animations with two dimensions. The format has been around for over a decade now. But with the current breakthrough of HTML5, it’s finally getting the attention it deserves. For the time being, the SVG format enables users to produce particularly high-quality static and/or animated graphics that don't shed information as their size changes. This means, with SVG, it's possible to create an image that looks equally good on a small phone display and on a 60-inch TV screen.

8. EPS

In contrast to the prior samples of raster images, the EPS format is under the vector category. Vectors are wonderful since they enable the creator to resize and scale images to whatever size they want without getting pixilated. EPS files can be easily transferred to different programs for photo manipulation. It's also quite popular with photographers and artists who plan to print out their art.

9. PDF

PDF is the most universal of all file formats. It can be edited, shared, copied, printed and more. It embeds all the data in a file, which may include images, text and layout, no matter what program is used to create said file. It's also one of the easiest formats to use since it's pretty straightforward. More importantly, it's compatible with all operating systems and applications, even those free software available online.

Choosing the Right Image Format Matters

In building a website or a blog, great content can only do so much. In the competitive online world, more often than not, words are not enough. If you really want to take your website to the next level, adding a compelling image tremendously helps. Visuals add a degree of complexity to a post since images bring about different emotions. Graphics also add pops of color to an otherwise bare or plain website.

Using ordinary photos won’t do. Choosing the right image to incorporate to your article takes time. If you have the skills to do your own blog photos, so much the better. Otherwise, you have to use your research skills to find an image online that is the opposite of generic, standard images you see on other sites or blogs.

Choosing the right visuals also mean saving photos in their right format. This is crucial if you want to spruce up the image by changing its color tones or adding text. Even a simple touch-up to an image can distort its quality, especially if you save the edited file using the incorrect format.

It’s also important to note that licensing is a consideration you must look into. Unless you’re posting photos you took yourself, or a drawing/sketch you created, you must check the image’s licensing information. If you use photos from stock photo sites, you may need to pay for them before you can post the images on your own site. If you find a website that offers free stock photos – which are typically free to use – it’s still important to pay attention to the site’s licensing guidelines. When you download and save stock photos, free or otherwise, you also need to choose their format. Depending on how you’d want to use the stock images, your choices may vary.

Hopefully, this quick image format overview helps you demystify the different image formats. This way, on your next post or project, you’ll know the exact format to use in saving your images.

Related Articles:

  1. Graphic Formats Explained
  2. Infographic: The Missing Guide to File Types
  3. The Missing Guide to Font Formats: TTF, OTF, WOFF, EOT & SVG
  4. Design Dictionary: 36 Terms You Should Know and Understand + Cheatsheet

Products Seen In This Post:

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

6 Comments

  1. In the RAW section, I would touch on DNG as it is the open source file type for RAW images. Also you say that raw images can't be edited, but that is incorrect, as editing raw images is the best way to work as a photographer.

  2. I'd also add that, between JPG and PNG, the latter can't be saved as CYMK, so it's a no-no for print.

  3. Agree with what Zack said about RAW. Would also mention that PDFs can contain Raster, Vector or both types of graphics. Just because it is a PDF doesn't mean it will scale cleanly. It just means whatever was used to create the design is included in a portable, view-able and shareable format.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →