Different Image File Types: Huh??

When working with a graphic designer to make a website, you may be asked for images such as logos, headshots, candid snapshots, or graphic icons. They may also supply you with files that have a variety of different file extensions. 

As a designer, sometimes a client will give me an image that’s huge, low quality, or the “wrong” file type (or all three!). Clients have no idea that these photos or files, such as a logo someone designed for them, are different from one another. That’s okay. This article defines them so you understand them a bit better when working with your designer. 

Clients might not understand that some file types cannot be used for specific purposes. For example, a logo with a white background can’t be placed on a green website background without looking unprofessional and low-tech. This leaves me, sometimes the second designer to edit the file, left trying to create a file type that the image never was to begin with. Sometimes this isn’t possible at all. 

This means the logo you paid someone on Fiverr to design can’t be used. A kind designer will do their best to make use of this kind of file, but it may not look great. The best thing to do in this case is try to reach back out to the original designer to see if they can supply you with the right types of files.

Here are some brief definitions of the different types of graphic/image files and why you might need/want them.

HEIC (High Efficiency Image Container): A newer, compressed image format that offers better quality at a smaller file size (than JPGs). Most iPhones take these by default, (but you can manually switch this off). Generally, designers (and you) cannot use them for website design due to incompatibility of file type. For example, some websites won’t accept that file type, so you’re saddled with figuring out how to turn it into a JPEG. And FYI, these images are literally 33 inches on their longest side. Most people will never use them to print a lifesize canvas, so this size is wholly unnecessary.

JPG (Joint Photographic Experts Group) or “Jay-peg”: is a widely used compression format that balances quality with a small file size (how many KB or MB). They’re also a lot smaller in dimension, (like 5 inches instead of 33). 

When it’s an image like a photo, it’s great to send because it’s not huge. But, when it’s a logo, these files have a white background by default. You can’t save a JPG with a clear background (that’s only PNGs). 

When giving you files, a designer would probably provide you with a JPG for use in simple digital displays (such as your email footer) or small print form (like stationery headers). It has universal compatibility (not just Apple) and efficiency (sends in an email quickly). A good designer will also give you a PNG file.

Now that Dark Mode exists, PNGs are essential. This is because you want a file with a clear background so that the white box behind your logo doesn’t show up. This is also true if you’re going to put it on a mauve-background webpage.

PNG (Portable Network Graphics): A lossless compression format that's excellent for web graphics, especially those with transparency. Designers often use this for logos or icons that need to be overlaid on different backgrounds on a website. A good designer will give you this kind of file for this reason. If you didn’t get this from them, please write them back and ask for one. It’s mind-blowing if you didn’t get one. Your new designer has to import the JPGS into Photoshop and try to delete the white and save it as a PNG. It’s not always possible to get rid of all the white, so sometimes you end up with a silver lining of sorts.

PDF (Portable Document Format): You probably recognize this file format from emails and downloads. PDFs are versatile and can display online + print documents consistently across different devices and operating systems (such as Linux, Apple, PC, Android, iOS, etc.). Designers use PDFs to share final designs with clients– for their review, or to send “press-ready” files. A printing company or “printing press” often needs a PDF to print everything from business cards to postcards to brochures.

TIFF (Tagged Image File Format): is a “lossless” format, (which means no image data is lost when the file is compressed, or “lossy”). TIFFs retain all their image data and are also commonly used in professional printing and publishing. Designers use TIFFs for high-quality print production, such as large-format banners, tablecloths, and signage because they preserve detail and color fidelity. Most therapist clients don’t need their logo on these kinds of things and most clients won’t know what it’s for (and what they’re not for). Only certain kinds of computer programs can handle TIFFs.

PSD (Photoshop Document): The native file format for Adobe Photoshop, an image-editing software. PSDs have layers, masks, and other editable features, such as hidden bleed marks for printing. A designer would provide this to a client who needs to make future edits to a complex design (or if someone else needs to edit it later), or to a collaborator who also uses Photoshop. PSD files can only be opened in Adobe software. Sometimes you can’t even see a preview of these files on your computer.

AI (Adobe Illustrator): The native file format for Adobe Illustrator, it's a “vector”-based format that's ideal for logos, illustrations, and typography. Vector graphics can be scaled up, down, and every which way without losing their integrity or image quality. You might have tried using a small file on a large project before and found it gets fuzzy or blurry. Designers use AI files to maintain the scalability and editability of vector graphics and will provide them to clients (to give to their printer) for use on everything from billboards (huge) to favicons (tiny). AI files can only be opened in Adobe software. Most of the time you can’t even see a preview of these files on your computer.

SVG (Scalable Vector Graphics): An XML-based vector image (Extensible Markup Language) format that's perfect for two-dimensional graphics on the web. Meaning they’re FLAT designs or single color shapes, not like photographs. Designers provide SVG files for web development because they too can be scaled up and down a million times without losing quality. They are also “lightweight” or lower-memory files, making them ideal for logos and icons on websites. Many laypeople cannot open SVG files in their existing computer programs.

Here’s an example of a JPG logo I was given that I had to convert into a PNG so it could have a transparent background:

When you have a logo surrounded by white, you can only use it on a white background such as a blank webpage or a document (like your Superbills). This example worked out alright (but if you zoomed in a bunch, you’d see it’s a bit fuzzy.

Here’s another example. This client ended up changing to a logo by a different designer:

As you can see, the green background behind the logo is always there. Initially, it was on a green background that was a different color, (“Hex codes” were not retrieved from Squarespace colors to use in the second design). A good designer knows how to do that.

So, when it’s on a dark background, this is what it looks like:

You can never get away from the green background on the logo. Thus, they had to match the site to the logo, not vice versa. This may be because they created it himself on a platform like Canva. Canva does actually have a way to export to PNG with “transparent background”. If you use Canva, try it out.

I provide JPGs and PNGs to clients in color, black, and white (for different printing purposes, such as a black tee shirt if the color logo is dark and won’t show up). This is because many of the logos I make have “raster” layers, (to the dismay of some printing presses). If it turns out a client needs a higher-resolution file for printing something large, they can always reach back out to me and I can create a SVG for them, but it will only be single colors, not blends. Your Fiverr guy may not be able to do that. Hopefully, they saved the original, especially if it was a few years ago. 

We’ll hope any designer gave you a variety of files you can work with for various reasons. Inversely, if you give your designer a file they can’t use, they’ll usually turn it into one that they can. Or, they may ask you if you have other file types. To avoid your own confusion, just send them everything you have and they will make sense of it!