Every image file you view on the internet is an image file. The majority of what you see printed on paper, plastic, or a t-shirt originated as an image file. These files are available in a variety of formats, each of which is tailored to a certain purpose. 

When you use the appropriate type for the job, your design will be picture perfect and just as you intended. A terrible print or a bad web image, a large download, or a missing graphic in an email could all be caused by the improper format.

So, let’s take a look at it. Greetings, and welcome to Image File Formats 101. Let’s have a look at the fundamentals of each file format.

Do you think GIF is the best sort of peanut butter? And what about AI, the strange sci-fi film starring Haley Joel Osment? You’re not entirely wrong. 

Today, though, we’re discussing picture formats and all those annoying tiny files that we utilize to produce visual content for print and the web.

Most picture files fall into one of two categories: raster files or vector files, each with its own set of applications. This analysis isn’t flawless. Certain formats, for example, may have components of both types. However, when deciding which format to employ for your work, this is an excellent place to start.

Image file formats come in a variety of shapes and sizes.

1. Raster file formats
   • JPEG
   • GIF
   • PNG
   • TIFF
   • RAW
   • PSD
2. Vector file formats
   • PDF
   • EPS
   • SVG
   • AI

Raster File Formats

What is a Raster Image?

Raster images are made up of a grid of dots called pixels, each of which has a different colour allocated to it. Raster images, unlike vector images, are resolution dependent, meaning they only exist in one size. When you alter a raster image, you stretch the pixels, which might cause the image to become “pixelated” or blurry. 

When you expand an image, your software simply makes a guess about what image data is missing based on the pixels around it. The majority of the time, the outcomes aren’t ideal.

Photographs, digital artwork, and web graphics are all examples of raster images (such as banner ads, social media content and email graphics). Adobe Photoshop is a popular image editor for creating, designing, and editing raster pictures, as well as adding effects, shadows, and textures to existing designs.

CMYK vs. RGB

All raster graphics can be saved in either the CMYK or RGB colour models.

CMYK (cyan, magenta, yellow, and key) is a four-color printing technique (black). The four inks that will be combined throughout the printing process are represented by these hues. The files you save in this format will be optimised for printing on paper.

RGB stands for red, green, and blue and is a light-based colour model. These are the three basic hues of light that can be combined to create other colours. This format will optimise files for the web, mobile phones, film and video—basically everything that appears on a screen.

Lossy vs. lossless

Depending on how the format handles your picture data, each raster image file is either lossless or lossy.
Lossless picture formats save all of the information from your original file. 

The phrase “lossless” refers to the fact that nothing from the original file, photo, or work of art is lost. Even though the file is still compressed, all lossless formats can restore your image to its original state.

Lossy picture formats get close to replicating the appearance of your original image. A lossy image, for example, may lower the number of colours in your image or analyse it for any unneeded data. These ingenious technical tactics will usually lower the file size, albeit the quality of your photograph may suffer as a result.

Lossy files are typically substantially smaller than lossless files, making them perfect for online use when file size and download speed are important.

JPEG/JPG

JPEG (Joint Photographic Experts Group) is a lossy raster format established by the Joint Photographic Experts Group. This is one of the most used online formats for pictures, email graphics, and large web images such as banner ads. JPEG images use a sliding compression scale that reduces file size significantly while increasing artefacts or pixelation as the image is reduced.

Compression

No Compression

You should use a JPEG when…

• You’re working with photos and/or artwork from the internet. JPEGs provide the most raster editing and compression options, making them excellent for web images that must be downloaded rapidly.
• You would like to print photographs and/or artwork. JPEGs are ideal for editing and printing high-resolution files with little compression.
• You need to send a client a brief preview image. JPEG photos may be compressed to extremely small sizes, making them ideal for sending through email.

Don’t use a JPEG when…

• You’ll need a transparent web graphic. Because JPEGs lack a transparency channel, they require a solid colour background. Transparency is best achieved with GIF and PNG.
• A layered, editable image is required. JPEGs are a flat image format, which means that all alterations are recorded as one image layer and are irreversible. For a completely editable image, consider a PSD (Photoshop) file.

GIF

Graphics Interchange Format (GIF) is a lossless raster image format. The important question is: how do you say it? GIF’s creator pronounces “JIFF” as if it were peanut butter. Because graphics begins with a “guh,” this writer (and a lot of the rest of the world) says “GIFF.” Anyway, we’ll leave it to you to decide. GIF is a popular digital image format for animated visuals such as banner advertising, email attachments, and social media memes. Despite the fact that GIFs are lossless, they can be exported in a variety of highly adjustable settings that minimise the quantity of colors and visual information, resulting in a smaller file size.

You should use a GIF when…

• You’d like to make a web animation. All of the animation frames and timing information are contained in a single GIF image. It’s simple to produce a brief animation and export it as a GIF with image processors like Photoshop.
• Transparency is required. GIF pictures contain a translucent “alpha channel,” allowing you to set your image on any colored background.
• You’ll require a tiny file. The GIF format’s compression algorithms allow image files to be drastically reduced in size. GIF is the finest image file type for very simple icons and online graphics.

Don’t use a GIF when…

• You’ll need a photo of photographic quality. GIFs have a limit of 256 colours, despite their great quality (unless you know a few tricks). When converted to GIF, photos with thousands of colours will appear flat and less colourful (and occasionally strange owing to colour banding).
• You must print a picture. Most printed images will lack depth due to the colour limitation. If you need to print images, TIFF, PSD, and JPG are the formats to use.
• A layered, editable image is required. GIFs are a flat picture format, which means that all changes are recorded on a single image layer and cannot be reversed. For a completely editable image, consider a PSD (Photoshop) file.

PNG

PNG stands for Portable Network Graphics and is a lossless raster format. Consider PNGs to be the GIF of the future. This format has transparency built-in, but it can also display larger color depths, resulting in millions of colors. PNGs are a web standard that is swiftly becoming one of the most popular image formats.

You should use a PNG when…

• You’ll require high-resolution transparent web graphics. In contrast to GIFs, which only have on/off transparency, PNG pictures feature a changeable “alpha channel” that can have any degree of transparency. Plus, compared to a GIF, you’ll get a more vibrant image with richer color depths.
• You’ve got illustrations that aren’t very colorful. Though any image will work, PNG files with a limited color palette work best.
• You’ll require a tiny file. PNG files, especially images with simple colors, shapes, or text, can compress to exceedingly small proportions. As a result, it’s the best image file format for web graphics.

Don’t use a PNG when…

• You’re putting together a photo or a piece of artwork. PNGs can readily accommodate high-resolution photographs due to their high color depth. However, because it is a lossless web format, file sizes can quickly grow to enormous proportions. If you’re working with photographs on the web, JPEG is the format to use.
• It’s a print project you’re working on. PNG graphics are suited for viewing on a computer screen. A PNG file can be printed, although a JPEG (lossy) or TIFF file would be preferable.

TIFF/TIF

TIFF stands for Tagged Image File Format and is a lossless raster format. The format is mostly utilised in photography and desktop publishing due to its incredibly high resolution. When you scan a document or snap a shot with a professional digital camera, you’ll almost certainly come across TIFF files. It’s worth noting that TIFF files can also act as a “container” for JPEG images. These files will be a fraction of the size of regular TIFF files, which are notoriously huge.

You should use a TIFF when…

• You’ll require high-resolution print graphics. TIFF files, along with RAW, are among the highest-resolution graphic formats accessible. Use this format when printing images, especially at large sizes.
• You’re scanning something of great quality. When scanning documents, pictures, and artwork, use TIFF to ensure you have the greatest original file to work with.

Don’t use a TIFF when…

• You’re working with graphics for the web. TIFF files are suited for printing and are supported by many web browsers. When you need to display high-quality photographs online, choose JPEG or PNG.

RAW

The unprocessed data acquired by a digital camera or scanner’s sensor is stored in a raw picture format. Images are usually processed (color, white balance, exposure, etc.) before being converted and compressed into another format (e.g. JPEG or TIFF). Raw photos divide the unprocessed and processed data into two files, leaving you with the highest-quality image you can edit non-destructively with a photo editing program like Photoshop. There are many other raw formats, but the most common are CRW (Canon), NEF (Nikon), and DNG (Digital Negative) (Adobe).

You should use RAW when…

• You’re capturing and editing images. To capture the most adaptable image, make sure your camera is set to RAW. Then, using a compatible photo-editing application, make any necessary adjustments to your image.

Don’t use RAW when…

• You’re working with graphics for the web. RAW was created with the intention of being used in photo editing. Convert your images to JPEG when you’re ready to share them on the web.
• You’re all set to print your pictures. Because many printers won’t take raw formats, convert to JPEG or TIFF first.

PSD

PSD stands for Photoshop Document and is a proprietary layered image format. These are Photoshop-created original design files that may be fully edited with various layers and image tweaks. PSDs are most commonly used to produce and edit raster pictures, but they can also contain vector layers, making them incredibly versatile for a variety of projects. A PSD file can be saved in a variety of picture file formats, including all of the raster formats mentioned above.

You should use a PSD when…

• It’s time to do some photo retouching. Do you have a photo that needs to be colour corrected? Or do you want to add a text layer? PSD stands for “pictures.”
• Editing artwork for digital or print is required. It could be a photograph, a picture, a drawing, or something else entirely. Photoshop is the ideal tool for ensuring that every line, shadow, and texture is perfectly placed.
• You need digital images for the web, such as images for social media, banner ads, email headers, and videos, among other things. These images will be the proper size and optimised for the web if they’re created with Photoshop.
• You must develop a mockup of a website or app. Layers make moving UI elements around a breeze.
• You’d want to dabble in animation and video. Photoshop makes combining simple video clips and adding graphics, filters, text, animation, and more a breeze.

Don’t use a PSD when…

• You need to upload a photo to the internet or email a client a sneak peek. JPEG images are supported on the internet. To ensure that your viewers can see your image (and that it does not take many minutes to download), convert it beforehand.
• You’re all set to print your pictures. Many printers will not accept PSD files, so convert to JPEG or TIFF first.

Vector File formats

What is a vector image ?

Vector images are digital artwork in which the computer calculates the points, lines, and curves. They’re essentially enormous arithmetic equations, and each one can be given a color, stroke, or thickness (among other things) to make them into art. Vector images, unlike raster graphics, are resolution-independent. When you shrink or enlarge a vector image, the shapes become larger, but no detail or pixelation occurs. There is no such thing as a lossy or lossless vector image type because your image will always render similarly regardless of size.

Logos, icons, typesetting, and digital artwork are all examples of vector imagery. Adobe Illustrator is a vector image editor that is widely used for creating, designing, and editing vector pictures (though it can also incorporate raster images, as well). Logos, icons, typesetting, and digital artwork are all examples of vector imagery. Adobe Illustrator is a vector image editor that is widely used for creating, designing, and editing vector pictures (though it can also incorporate raster images, as well). Logos, icons, typesetting, and digital artwork are all examples of vector imagery.

PDF

Portable Document Format (PDF) is an image format that allows documents and graphics to be shown accurately on any device, application, operating system, or web browser. PDF files have a sophisticated vector graphics foundation at their heart, but they can also display raster graphics, form fields, and spreadsheets. Because it is a near-universal standard, printers frequently require PDF files when sending a final design into production. Both Adobe Photoshop and Illustrator can export directly to PDF, making it simple to get started and finish your design.

You should use a PDF when…

• You’re all set to print. Because PDF is so widely used, many printers use it as their primary delivery format. Consult your printer for instructions on how to prepare your file.
• You wish to put documents on the internet. A PDF isn’t appropriate for a single icon or logo, but it works well for posters, flyers, magazines, and books. Your complete design will be contained in a single PDF file, making it simple to see, download, and print.

Don’t use a PDF when…

• You must make changes to your design. PDFs are excellent containers, but the contents should be handled by other programmes. Photoshop and Illustrator both allow you to modify raster images and vector graphics. When you’re finished, put everything into a PDF for easy viewing.

EPS

Encapsulated PostScript (EPS) is a type of picture format. An EPS file can contain both vector and raster image data, despite its primary use as a vector format. An EPS file usually contains a single design element that can be used in a larger project.

You should use an EPS when…

• A vector logo must be sent to a client, designer, or printer. You don’t have to worry about where your logo will be put or printed when you use an EPS file. It will always show at the correct resolution, regardless of its size.

Don’t use an EPS when…

• It’s either images or artwork you’re working with. Although EPS can handle raster images, it is designed primarily for vectors. When working on a photo project, use a PSD, TIF, or JPEG.
• You must upload an image to the internet. First, export to JPEG, PNG, or GIF.

SVG

SVG stands for Scalable Vector Graphics and is a two-dimensional vector image format based on XML. It is perfect for the web since it can be searched, indexed, resized, and compressed, and it can result in smaller file sizes than other file formats. SVG files can be edited in text editors as well as graphic editors.

SVG should be used when…

• You wish to post computer-generated graphs and diagrams on the internet.

When it comes to SVG, don’t utilise it…

• For a print workflow, you’ll need a file format.

AI

Adobe Illustrator is a proprietary vector picture format abbreviated as AI. The Adobe EPS and PDF standards were used to create the format. AI files, like those other formats, are generally vector-based, though they can also contain embedded or linked raster images. AI files can be saved as PDF and EPS files (for easier reading and printing), as well as JPEG, PNG, GIF, TIFF, and PSD files (for web use and further editing).

You should use an AI when…

• A vector design must be edited. With only a few clicks, you may move and change every single piece in your design.

• You’ll need to design a logo, symbol, or mascot for your company. Illustrator’s vector shapes and lines may be blown up to any size, making it excellent for pictures that need to be used in a variety of ways.

• You’re looking for a one-page print item. Illustrator is ideal for creating posters, business cards, flyers, and notecards that incorporate raster pictures.

• For a logo, you’ll need to choose a typeface. Illustrator’s typesetting tools are extremely strong, allowing you to bend, skew, and manipulate any text in any way you can imagine.

Don’t use an AI when…

• You must edit photographs. If a raster image (picture or artwork) is utilised in a composition, Illustrator only has a few tools for editing it directly. Photoshop (PSD files) allows for more in-depth colour, contrast, and brightness alterations.

Last but not the least, a format which I consider underrated.

WEBP

WebP is a contemporary image format for the web that offers greater lossless and lossy compression. Webmasters and web developers can use WebP to create smaller, richer images that load faster on the web.

When compared to PNGs, WebP lossless images are 26% smaller. At the same SSIM quality index, WebP lossy images are 25-34 percent smaller than comparable JPEG images.

Transparency (also known as alpha channel) is supported by lossless WebP at a cost of only 22 percent more data. When lossy RGB compression is acceptable, lossy WebP also offers transparency, resulting in file sizes that are typically three times less than PNG.

WebP Support

Google Chrome, Firefox, Edge, the Opera browser, and a slew of additional tools and software libraries all support WebP natively. A number of picture editing programmes have also been given support by the developers.

WebP comprises tools for viewing, muxing, and animating WebP images, as well as the lightweight encoding and decoding library libwebp and command line utilities cwebp and dwebp for converting images to and from the WebP format. The complete source code can be found >> Here.