- |
- ·
The basics of graphic design file formats come down to the raster (pixel) versus vector distinction. Below you will find what JPG, PNG, GIF, TIFF, AI, EPS, SVG, PSD, and PDF are, which to use when for web versus print, and which files to request from a designer. The most common mistake is getting a logo as a JPG only.
The Basics: Raster (Pixel) vs Vector
The foundation for understanding all file formats is the raster versus vector distinction; everything rests on it. Raster (pixel-based) images are made of tiny colored dots (pixels), like a photograph. They have a fixed resolution; when enlarged, they become pixelated and distort or blur, and they are ideal for photos and detailed images (JPG, PNG, GIF, TIFF, WEBP).
Vector images, on the other hand, are created not from pixels but mathematically (points, lines, curves). Their biggest advantage is that they can be scaled up or down infinitely with no quality loss, which makes them ideal for logos, icons, illustrations, and anything printed at various sizes (AI, EPS, SVG). Roughly, a realistic image like a photo is raster, while a scalable graphic like a logo is vector; if you save a logo as a JPG, it will distort at large sizes, but saved as vector (AI or SVG) it stays crisp at any size. You can find the basic definition in general sources too.
Raster Formats: JPG, PNG, GIF, TIFF, WEBP
The most common raster (pixel-based) formats and their uses are as follows:
- JPG (JPEG): the most common format for photos; it compresses well (small size), but is lossy and supports no transparent background.
- PNG: supports transparent backgrounds, ideal on the web for logos and icons; it is lossless but the file can be larger than JPG.
- GIF: limited colors but can animate; used for simple moving images.
- TIFF: a high-quality, lossless format; preferred in print and professional photography (large size).
- WEBP: Google's modern web format; offers good quality and small size, and is increasingly common for web performance.
Quick guide: web photo = JPG or WEBP, transparent logo = PNG, animation = GIF, print and high-quality photo = TIFF. You can study the web side of image formats in sources like MDN; choosing the right raster format affects both quality and file size (load speed).
Vector and Working Formats: AI, EPS, SVG, PSD
Vector and working formats are generally used for designs being created or edited, or for scalable graphics. AI (.ai) is Adobe Illustrator's native format; it is the master source file for editable vector designs like logos and illustrations and is opened and edited in Illustrator. EPS (.eps) is an older but widely used vector format, used for sharing vectors between programs and for print.
SVG (.svg) is a scalable vector format for the web; it is ideal so logos and icons stay crisp on every screen, and it can be edited with code. PSD (.psd) is Adobe Photoshop's working file; it is raster-based but a layered working file, the editable source for photo editing and layered designs. In summary, AI is the vector working file, SVG is the web vector, EPS is for vector sharing, and PSD is the Photoshop layered working file; these are usually editable sources, not final outputs, and keeping them is crucial for editing a design later. I also stressed keeping logo source files in my logo design article.
PDF: For Print and Sharing
PDF (Portable Document Format) is a versatile, important format in graphic design; it can hold both raster and vector elements together. Its main use is the print-ready file: printers usually request a PDF for printing, because a PDF packages all the design's elements (fonts, images, colors, vectors) consistently and in a print-suitable way; a properly prepared print PDF (correct color mode, bleed, embedded fonts) is the standard for professional printing.
PDF is also ideal for sharing and preview, because it looks the same on any device or program and requires no special design software; it is used for multi-page work like catalogs, brochures, and presentations, and for archiving. Its strength is portability and consistency: the PDF you send looks the same and does not break on the recipient's end. It is one of the most preferred formats both for print delivery and for client approval; when preparing a print PDF, learn your printer's required technical settings.
Web vs Print: Which Format Where (JPEG or PNG?)
Web and print are two worlds with different format needs. For web, file size (load speed) matters and screens use RGB color mode; ideal formats are JPG or WEBP (photos), PNG (transparent images and logos), SVG (scalable vector), and GIF (simple animation). For print, high resolution (usually 300 DPI) and CMYK color mode are needed; ideal formats are PDF, vectors (AI or EPS), and TIFF. I also covered the print side's technical details in my packaging design article.
A frequently asked question: is JPEG or PNG better? It depends on the use, not one being universally better. JPEG is better for photos on the web (smaller file size, good for complex, colorful images), but it is lossy and has no transparency. PNG is better for images needing transparency (logos, icons, graphics with no background) and for sharp text and flat graphics, because it is lossless, but files are larger, so it is not ideal for large photos. For print, though, neither is ideal; use PDF, vector, or TIFF instead, since PNG is RGB and web-oriented. So the JPEG-versus-PNG question is answered by the content and the use case. You can see the web performance side in sources like web.dev.
The 5 Key Image Formats and How to Choose
The five key formats you will encounter most in graphic design are JPG (for photos, web and general use; small size, no transparency), PNG (for transparent-background images and logos, web; lossless), PDF (print-ready files and universal sharing; looks the same everywhere), AI (Illustrator's vector working file; the editable source for logos and illustrations), and PSD (Photoshop's layered working file; for photo and composition editing). You can add EPS, SVG, TIFF, and GIF to this list.
To choose the right format, ask yourself three questions: where will it be used (web means JPG, PNG, SVG; print means PDF, vector, TIFF), do you need raster or vector (a scalable logo needs vector AI, SVG, EPS, while a photo needs raster JPG, PNG, TIFF), and does it need to be editable (if you will change it later, keep the working file AI or PSD, otherwise an output format JPG, PNG, PDF is fine). The three questions cover almost every situation; the general rule is to always keep your working and source files (AI, PSD) and export the appropriate output format for each use.
Which Files Should You Request From a Designer?
When you receive work from a designer (for example a logo), it is important to request the right files rather than just a single image, or you will run into problems later. Especially for a logo, always request the vector format (AI and/or EPS, SVG) and, if possible, the editable working file; this lets you use your logo at any size from business card to billboard without distortion and edit it when needed. Getting only a JPG or PNG will trap you for large prints or changes; I covered this in my logo design guide too.
Beyond that, request different use formats (PNG and JPG for web, PDF and vector for print, properly sized versions for social media), color and black-and-white versions, different background versions (transparent, white, dark), your brand's color codes (HEX, CMYK, RGB), and a usage guide if available. The most critical thing is getting the editable vector source file (AI, EPS, SVG) and various use formats; requesting these at delivery guarantees you can use your brand's visual assets freely and at high quality in the future. Clarify in writing which files will be provided before delivery.
Frequently Asked Questions
Quick answers for readers who skipped to the end.




