Images exported for print often use the CMYK colour model and huge pixel sizes. Older Internet Explorer shows nothing, other browsers shift the colours, and pages slow down. Ask for RGB versions sized for the web.

The brochure photos on the new site

A winery's designer finishes the new brochure and label art, then sends the same files for the website: bottle shots, vineyard photos and a label for each wine.

Uploaded as they came, some look fine. On an older office computer, several photos show only an empty box with a small broken image icon.

On other screens they appear but look wrong: reds turned brownish, the vineyard's greens flat, the labels dull beside the rest of the site.

The files are not damaged. They were made for a printing press, and a browser is a different machine with different expectations about colour and size.

Ink colours and screen colours

Printing builds colour from four inks, cyan, magenta, yellow and black, known as CMYK. Screens build it from red, green and blue light, known as RGB.

A photo prepared for print is usually converted to CMYK, with a profile describing a particular press and paper. Browsers expect RGB, and most expect the common screen profile called sRGB.

Internet Explorer 8 and earlier cannot display CMYK JPEG files at all, so they show the broken image box. Those versions remain common on office computers running Windows XP.

Newer browsers display them but convert the colours in their own ways, and some ignore the profile. The same photo can look right on one screen and muddy on the next.

Sizes meant for paper

Print files are made at high resolution, often 300 dots per inch at the printed size. A photo filling a brochure page can be 3,000 pixels wide and several megabytes.

Screens ignore dots per inch; only pixel dimensions matter. A content column might show 800 pixels of that photo, so most of the file downloads for nothing, on every visit.

On a phone over a mobile connection, a page of such photos can load slowly enough for a visitor to give up, and the images look no sharper for it.

How to spot a print file

A few signs give print files away, before or after upload:

Any image editor shows the colour mode and pixel size. The media library in most content systems lists dimensions and file size, which catches large files quickly.

Why resizing on the site is not enough

Many content systems, WordPress among them, make smaller copies of each upload automatically. That helps with size, but the copies can keep the original colour model.

The large original usually stays on the server, and themes often link to it from galleries and pop-up viewers. A visitor who taps a photo can still download the full print file.

The fix belongs before the upload: images exported for the web from the original files, by someone who knows what the web needs.

What a web version is

A web version of a photo is a JPEG in sRGB, at the width the layout shows, with a little extra for sharp high-resolution screens if the design calls for it.

Flat artwork such as labels and logos usually works best as PNG, which keeps edges and solid colours crisp. Text that matters, such as tasting notes, belongs on the page as text.

Ask the designer for a web set alongside the print files on every job. Exporting is quick for whoever holds the originals, and slow and lossy for anyone else.

A worked example

A window lettering company in Nanaimo cuts vinyl lettering and prints window graphics for shops, restaurants and offices, from a two-person studio with a plotter and a wide-format printer.

Its gallery was filled with the proof files it sends customers for sign-off. Those were exported for the printer: CMYK, full size, some as PDFs.

A property manager browsing the gallery at her office saw a page of broken image boxes. On phones it crawled, and a restaurant's red lettering looked closer to orange.

The studio now exports every job twice: the print file, and a web copy in sRGB, 1,200 pixels wide. The gallery leads with photos of finished windows, already in screen colours.

The proofs that remain were exported again as web copies. Every browser now gets the colour model it expects, at a size the page uses.

Keeping both sets

The print originals remain the master files for brochures, labels and signs. Keep them, clearly named, with the web exports beside them in a folder of their own.

When a printer later asks for a photo from the website, the same mix-up can run the other way. A clear folder of originals means nobody sends a small web copy to a press.

Checking the existing site

Open the site on an older office computer if one is available, or ask a customer who uses one. Broken boxes there point straight at CMYK files.

Then sort the media library by file size and look at the largest images first. Those are usually the print files, and they sit on the pages that load slowest.

The counter-case

Some supplied files need little work. Photographers often deliver JPEGs already in sRGB, which only need resizing, and a well set-up site can handle that.

Some setups also convert colours automatically on upload. Where that conversion is in place and has been tested in several browsers, print files cause fewer surprises.

But the safe default is still a separate web export. It costs a designer minutes and removes the guesswork about what each browser will make of a press file.

Getting web versions of print artwork

  1. Ask the designer for a web export with every print job.
  2. Specify sRGB and the widths the layout shows.
  3. Use JPEG for photos and PNG for flat artwork.
  4. Sort the media library by file size.
  5. Replace any CMYK files already on the site.
  6. Check the pages in an older Internet Explorer.
  7. Keep the print originals in their own folder.

Step one prevents the rest. A designer who exports a web set as routine never sends a press file to the website in the first place.

The same mix-up runs the other way when a website logo goes to a printer, as a trade show banner printed from the website logo describes.

Frequently asked questions

Why do some photos show as a broken box?

They are probably CMYK files made for print. Internet Explorer 8 and earlier cannot display CMYK JPEGs at all, so older office computers show an empty box instead.

Why do the colours look dull or shifted?

Browsers expect screen colours, usually sRGB. Print files use ink colours and press profiles, which browsers convert differently, so one photo can look different on each screen.

Does 300 dpi make images sharper online?

No. Screens ignore dots per inch and use only pixel dimensions. A 300 dpi print photo is simply a very large file that downloads slowly.

How can I tell whether an image is a print file?

Look for CMYK or print in the file name, TIFF, EPS or PDF formats, sizes over a megabyte, and colours that change between browsers.

Will the website resize the images for me?

Many systems make smaller copies, but they may keep the print colour model, and the large original often stays linked from galleries. Export web versions before uploading.

What should I ask the designer for?

A web set with every print job: photos as sRGB JPEGs and flat artwork as PNGs, at the pixel widths the site displays, kept beside the print originals.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Brochure photos looking odd on the site?

Point us to the site, and we will find the print files among your images and prepare web versions to replace them.

Start a Conversation