Print and web are fundamentally different output environments, and the image format choices that work well for one tend to be wrong for the other. A file optimised for a website will look poor when printed at large sizes. A file prepared for a print shop is unnecessarily large for web use and may be in the wrong colour space. Understanding why they differ makes the format choices obvious rather than arbitrary.
Why the environments are different
Screens display colour using light — red, green, and blue channels combined (RGB). Print reproduces colour using ink — cyan, magenta, yellow, and black (CMYK). An image in RGB colour mode sent to a printer will be converted to CMYK by the printer's software, which can shift colours unpredictably, particularly in saturated blues and purples. For print work where colour accuracy matters, preparing files in CMYK from the start gives you control over that conversion.
Resolution works differently between the two. Screen resolution is measured in pixels per inch (PPI) relative to the display, and a web image that's 1200px wide is perfectly sharp on any monitor regardless of its DPI value. Print resolution is measured in dots per inch (DPI) relative to physical size — a 1200px image printed at 4 inches wide needs 300 DPI to look sharp, but the same image printed at 12 inches wide would only be 100 DPI and would look pixelated. For print, the physical output size and DPI together determine whether the image has enough resolution.
Formats for web
WebP is the best default for photographs and complex images on websites. It produces files roughly 25–35% smaller than JPG at equivalent visual quality, supports transparency, and is supported by all major browsers. For most web images, converting to WebP before uploading is the single most impactful optimisation step. Portimg's converter handles JPG and PNG to WebP in the browser.
AVIF compresses better than WebP (typically 20–50% smaller than JPG) and is supported in all current major browsers. Worth using for large images where file size is a priority; WebP is the safer default if you need broader compatibility.
PNG is lossless and supports transparency — right for logos, icons, and graphics with flat colours or crisp edges where JPG's lossy compression would introduce visible artefacts. Larger than WebP for photographic content, so reserve it for cases where transparency or lossless quality is genuinely needed.
SVG is a vector format for logos, icons, and illustrations. It stores images as mathematical descriptions rather than pixels, which means it scales to any size without quality loss and produces tiny file sizes for simple graphics. The right choice for any graphic that appears at multiple sizes — a logo in a header and a favicon, for instance. Not suitable for photographs.
JPG remains the most universally compatible format for photographs where you need to support contexts beyond modern web browsers — email clients, older software, file sharing with unknown recipients. For the web specifically, WebP is better in every measurable way; JPG's advantage is legacy compatibility.
Formats for print
TIFF is the standard format for professional print work. It's lossless, supports CMYK colour mode, and preserves all image data without compression artefacts. File sizes are large — a single high-resolution TIFF can be 50–100MB — but for print originals where quality must be preserved through editing and handoff to a print shop, TIFF is the right format. Most professional print workflows specify TIFF or PDF at 300 DPI in CMYK.
PDF is widely used for print-ready files, particularly for documents that combine images with text and layout. A properly exported print PDF embeds fonts, colour profiles, and bleed settings in a single file that print shops can use directly.
JPG at high quality (minimal compression) and 300 DPI is acceptable for print when TIFF isn't required — brochures, flyers, standard commercial printing. The key constraints: use maximum or near-maximum quality to avoid artefacts, export in CMYK, and don't re-save the JPG repeatedly since quality degrades with each save.
The 72 DPI web myth
A persistent misconception: web images should be 72 DPI. This is outdated. DPI is a print concept — it describes physical dot density on paper. Screens don't have a fixed DPI; they display pixels, and a pixel on a retina display is physically smaller than a pixel on a standard display. For web images, what matters is pixel dimensions, not DPI. An image that's 1200px wide is 1200px wide on screen regardless of what DPI value is embedded in its metadata. Setting web images to 72 DPI in an image editor changes the metadata but not the actual pixel dimensions, and has no effect on how the image appears on screen.
What does matter for web images: pixel dimensions relative to the display size, file size relative to load time, and format relative to compression efficiency. For print: pixel dimensions relative to the physical output size at 300 DPI, colour mode (CMYK for offset printing), and lossless format to preserve quality through the production process.