Choosing the right file format is essential to delivering a design that looks correct across media. Formats determine whether an image scales smoothly or falls apart, whether colors print accurately, and whether file sizes stay manageable. Understanding the strengths and limitations of each format — and the underlying difference between raster and vector graphics — is a core competency for any designer.
Raster graphics are made of pixels and lose quality when scaled up. The most common raster formats are JPEG, PNG, GIF, and TIFF. JPEG uses lossy compression to achieve small file sizes, making it ideal for photographs on the web, but quality degrades each time the file is re-saved. PNG supports lossless compression and transparency, which is why it is favored for logos on backgrounds, sharp-edged graphics, and images that must retain perfect quality. GIF supports up to 256 colors, transparency, and simple animation, which is why it became famous for memes and short animations, though its limited color palette rules it out for photographs. TIFF is a high-quality lossless raster format used in professional photography, print production, and archival storage, producing very large files. Vector graphics, by contrast, are made of mathematical paths rather than pixels. SVG (Scalable Vector Graphics) is an XML-based web standard that scales to any size without quality loss, ideal for logos, icons, and illustrations online, and can be styled with CSS or animated with JavaScript. PDF preserves exact layout, fonts, and graphics across devices, supporting both vector and raster content, and remains the standard for print-ready files. EPS (Encapsulated PostScript) was once common in professional print design but has largely been superseded by PDF and AI.
Vector graphics are built from paths defined by anchor points, the nodes that mark each corner or curve, and handles, also called direction lines, which extend from anchor points to control the curvature of segments. Moving handles adjusts how curves flow between points, allowing designers to sculpt any shape with mathematical precision. Other essential vector and image-editing concepts include the clipping mask, which uses one shape to define the visible area of another layer (content outside the mask is hidden but not deleted, making it ideal for cropping images into custom shapes like circles or letters), and anti-aliasing, which smooths the jagged edges of raster images and text by blending edge pixels with surrounding colors to create the illusion of smooth curves on pixel-based displays.
Resolution determines how much detail an image holds. In print, resolution is measured in DPI (dots per inch), the number of ink dots a printer places per inch; the standard for high-quality print output is \(300\) DPI, while newspapers use about \(150\) DPI and large-format billboards may use as little as \(30\)–\(50\) DPI because of viewing distance. In digital displays, resolution is measured in PPI (pixels per inch); web images are typically displayed at \(72\) PPI, though modern high-density Retina displays often use 2x or 3x assets. For web work, pixel dimensions often matter more than PPI, since screens display a fixed number of pixels regardless of PPI setting. Image compression reduces file size for faster loading. Lossless compression (PNG, TIFF) preserves all data perfectly, while lossy compression (JPEG) discards some data to achieve smaller files, with adjustable quality levels. The choice between print and digital design ultimately determines many of these settings: print uses CMYK color, \(300\) DPI resolution, and physical dimensions in inches or millimeters with fixed layouts, while digital design uses RGB color, \(72+\) PPI, pixel dimensions, and responsive, flexible layouts that adapt to different screens.