Being a business owner can be tough. If it wasn’t hard enough running the actual business, you also have to keep your brand sharp and consistent. There’s a lot of confusion regarding which file type to use for websites versus business cards versus letterheads and so on. Why are they different? Which one is best? Why is this one all blurry when I shrink it?
This is one of the most common pain points with my clients and it’s my job to put them at ease with using their brand packages and collateral. So I’m going to break down the best file formats for print and web here as a reference.
To help even more, you can download a FREE one-page PDF “Best File Formats for Print and Web” cheatsheet at the end of this post!
Ready? Here we go.
JPG – Print + Web – Best for Photos
This is one of the most common file formats you’ll come across. Its fancy name is “Joint Photographic Experts Group” and it’s one of the most versatile file types. It’s best for images and photos and is pixel-based, meaning it’s made up of a certain amount of pixels (tiny squares of one colour). The image can look fuzzy if you scale it too much from its original size.
Use it for Web as a *logo or image on your website, email signatures, ads and social media. JPG’s for web should be low resolution (72dpi) and RGB colour. For your website, JPG files shouldn’t exceed 400kb or they can slow down your site.
Use it for Print as photos or images to send your designer or printer (avoid text-heavy images). JPG’s for print should be high resolution (300dpi or higher) and CMYK colour.
*NOTE: JPG’s will ALWAYS have a background. Usually white. If you don’t want a white background behind your image or logo, use a PNG or SVG.
PNG – Print + Web – Best for Logos + Text
This is a very common file format on the web, although it can also be printed. Its fancy name is “Portable Network Graphic” and while it can be used for images, it excels for line drawings, text and icons (like your logo). It can also be saved with a transparent background, which is helpful for logos or illustrations. It’s pixel-based, so it shouldn’t be scaled up or down too much. It’s also often larger in file size compared to JPGs.
Use it for Web as a logo or image on your website, email signatures, ads and social media. PNG’s for web should be low resolution (72dpi) and RGB colour. For your website, PNG files shouldn’t exceed 400kb or they can slow down your site.
Use it for Print as photos or images to send your designer or printer. PNG’s for print should be high resolution (300dpi or higher) and CMYK colour.
SVG – Web
SVG is like the EPS of the web world and is more powerful than JPG or PNG. It’s vector based and can scale up or down without losing quality or resolution. It’s ideal for logos, icons and line artwork that need to retain sharp edges. Its fancy name is “Scalable Vector Graphics”. Some drawbacks are that it’s often larger in file size than JPGs and PNGs, and some upload apps won’t support it (although they’ll always support JPG and usually PNG).
Use it for Web as logos, icons, line artwork, images and other graphics on your website. Its best in RGB colour and can be scaled up or down without losing quality. Files should be 400kb or less, or they’ll slow down your website.
Note that the best image for your website is the smallest, sharpest one. It’s better for load times, speed and SEO to have a small image size. Use the file format that looks the best while also being under 300kb.
PDF – Print – Best for Documents
PDF is the most common print format you’ll find. Its fancy name is “Portable Document Format” and they’re used for printing documents on paper. You can also read them online (you’ve likely read or downloaded a PDF document or eBook online before) and open them in Acrobat. All magazines, books, brochures and business cards are sent to print as PDF’s.
Use it for Print as documents, print ads, books, business cards or other print collateral. Documents with a lot of text are best as PDF. PDF’s should be high resolution, especially when they contain images (300dpi) and CMYK colour. They may also need crops and bleed for proper printing.
EPS – Print – Best for Artwork
EPS is a great format for printing when you want a transparent background or need to enlarge a logo without losing quality. Its fancy name is “Encapsulated Postscript” and it can be scaled up or down while retaining the same sharpness/resolution.
Use it for Print as logos, icons, illustrations, artwork files, print ads and other collateral. They don’t need a high or low resolution as they are vector-based and always remain sharp. CMYK colour is best.
Extras
Below are a few others that you probably won’t encounter much in your day-to-day work, but I’ve outlined them below just in case you do:
GIF – Small simple graphics files for web that can also be used for animations. You’ll often see them as carousel ads on a website or sent to you as short, funny clips from shows or movies on messaging apps.
TIFF – An older print file format that isn’t used as much these days, but still powerful and useful for print documents, graphics and images. The file sizes are often quite large. Since PDF became mainstream, this file type is used a lot less. Some younger designers haven’t even heard of it.
AI, INDD, PSD – These are the acronyms for the most common Adobe design programs: Illustrator, InDesign and Photoshop. You may encounter these file types when passing files along from photographers and designers to printers. You can’t open them without the Adobe Programs though, and can’t preview them either; they work only in Adobe. When required, designers can provide a packaged AI or INDD file that includes all the linked images and fonts that are used within the artwork. PSD doesn’t need to be packaged up.
I hope that helps you figure out what file type you need for what and when. If you have any questions, you’re always welcome to contact me.
