10 must-know tips to prepare images for the web

Following our guide to producing print-ready images, here we take a look at preparing imagery in Photoshop for accurate display and presentation on the web. Whether your work’s viewed on a monitor or mobile devices such as an iPad or iPhone, following these ten tips will ensure your work always looks its best.

Even if you do not believe ‘colour accuracy’ is crucial to your work, monitor calibration also ensures that highlight and shadow detail is correctly displayed. This avoids backgrounds that you believe have been painted out showing up as hidden detail when displayed on another monitor or device. You can pick up a monitor calibrator for as little as £50 from Colour Confidence (colourconfidence.com).

Tip 1: Calibrate your monitor
Calibrate your monitor, ensuring the brightness is set between 90 and 120 cd/m2

Although this will limit the contrast of your display, it’s likely to be more representative of what the intended audience will experience on a range of monitors of various ages and qualities. When the imagery is displayed on a brighter, higher- contrast display, this will enhance the image. 

Working on a monitor set to a higher level of brightness will be easier to see detail, but there is the risk of losing highlight and shadow detail when the work is subsequently viewed on an inferior or older monitor. Excessively bright monitors are also not ideal for your eyes and can cause eye strain.

Tip 2: Get your colour correct
In the Adobe Photoshop Colour Preferences dialog (Edit > Color Settings), set your RGB working colour space to sRGB – limiting your palette down from Adobe RGB to what can be displayed more accurately on the web – and the CMYK working colour space to Coated FOGRA39.

Selecting the Europe Web/Internet 2 preset in CS5 apps will pre-configure these accordingly. If you use CS4 or CS3, select Europe Web/Internet. The difference in these does not relate to working in RGB, but to the CMYK settings used when converting your image for four-colour print processes. 

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...