Start with the image’s destination

Before exporting an image, find out where it will appear and how large it needs to be. A photograph for a website card, a full-width banner and a printed postcard may all begin with the same original, but they need different crops and exports. Ask for the display dimensions, the intended crop and any specifications from the website platform or print provider. Keep the original file so you can make a fresh export for each use.

Pixels describe the width and height of a digital image. A 2400 × 1600-pixel file contains the same number of pixels whether it appears small on a page or fills a screen. File format, compression and colour settings are separate choices. Treating these as separate questions makes it easier to diagnose a soft-looking image: it may be too small, heavily compressed or simply cropped from a small part of the original.

Size images for screens without unnecessary weight

For web use, start with the space the image occupies in the layout. If a photograph displays at 800 pixels wide, an export around 1600 pixels wide can provide detail for higher-density screens. This is a working example, not a rule for every image. A page may offer several sizes so a narrow phone screen does not download the same large file as a desktop display. Check the actual layout at different screen widths before deciding which exports are useful.

Choose dimensions after settling the crop. A square thumbnail and a wide banner need different compositions; forcing one file into both spaces may cut off the subject. Compress each export enough to reduce file size without introducing obvious blur, blockiness or colour changes. Preview it at its intended display size, not only while zoomed in. For text placed over an image, also check that the crop leaves a readable area at each layout size.

Match web formats to the content

JPEG is a practical choice for photographs when transparency is not needed. It uses lossy compression, so repeated saving can gradually reduce quality; make new exports from the original rather than from an already compressed copy. WebP and AVIF can also work well for web photography and graphics, but check that your publishing tools handle them as expected. PNG is useful when an image needs transparency or crisp, flat-colour detail, although a photographic PNG may be much larger than necessary.

SVG suits simple logos, icons and illustrations made from vector shapes because those shapes can scale without becoming pixelated. It is not usually the right container for a photograph. If a brand mark contains text, check that it displays reliably in the intended environment. Format selection is less about finding one universally best file and more about matching the artwork to the place it will be used.

Calculate print size from the original pixels

For print, consider the image’s effective resolution at its final physical size. Pixels per inch, or ppi, describes how densely an image’s pixels are placed on the printed page. Divide the image width in pixels by its intended width in inches to estimate its effective ppi. For example, a 1800-pixel-wide image placed at six inches wide has an effective resolution of 300 ppi. Place that same image at twelve inches wide and it has 150 ppi.

Around 300 ppi is a common target for close-viewed print, but requirements vary with the printing method, paper and viewing distance. Ask the print provider for specifications when possible. Changing a resolution label without changing the pixel count does not create detail, and enlarging a small file cannot reliably restore detail that was never captured. If the image falls short, consider a smaller placement, a different crop or another original before trying to upscale it.

Prepare a print-ready export and check both versions

A finished print layout is often delivered as a PDF, while an individual photograph may be requested as a high-quality JPEG or TIFF. Follow the print provider’s requirements for file format, colour settings, bleed and safe margins. RGB is common during image editing and for screens; some print workflows request a specific CMYK profile or handle conversion themselves. Avoid guessing at that conversion when specifications are available. Vector logos can remain sharp in a suitable PDF, whereas a small raster logo may look rough when enlarged.

Build a short export check into your process. For web, verify the crop, display size, file weight, transparency and appearance on a phone and a larger screen. For print, verify the final physical dimensions, effective ppi, colour requirements and any bleed. Name files by their purpose, such as “portrait-web-wide” and “portrait-print,” so collaborators can identify the right version. A few deliberate exports are more useful than one oversized file passed between every channel.

Back to category ↗