Images on your website are not only visually eye-catching but also helpful for establishing the site’s SEO. Quality photos are a must when building the site, and the good news is that they can constantly be tweaked.
However, when it comes to graphic design or images that are going to be used both online and in print, there are a few important differences that designers and business owners need to understand in order to produce the best quality work in both places.
Image Resolution and Size
Digital photos are usually measured in pixels – the square building blocks that make up the digital image. When we size your website, we are looking for images that have a certain pixel size to look best on your screen. For example, if you have a website that is an average of 1080 pixels across, your header needs to be at least 1080 pixels wide for the resolution to look right.
When working with images meant for print, the resolution will be measured in dots per inch (DPI). DPI refers to how the printing equipment is set up because it refers to how the ink will be printed on the surface of the material. For web images, this is not something to worry about but should be a question to be discussed with the professional printer.
Device Size
Online images need to adapt to the device that the viewer is using. The standard size for quality online images is 72 PPI, but with higher resolution screens, that standard may soon change. When selecting image size and resolution, web designers must make sure that the picture is big enough to look good on larger computer monitors and laptops but also be scalable to smaller devices such as tablets and smartphones. Also known as mobile responsiveness, designers work hard to make sure that your entire website looks good – no matter the size of the device.
Translating Color
Your brand logo and colors are examples of images that will most likely be used both in digital format and in print. There are three different color languages you should know about in order to make sure the colors look right in all formats.
| RGB | Hex Code | CMYK | |
| Color References | Red, Green and Blue Light | Red, Green and Blue Light | Cyan, Magenta, Yellow, and Black |
| Online/Print | Online | Online | |
| Format | 102, 153, 255 | #6699ff | (60,40,0,0) |
Web designers use RGB for online use. This format is represented by three sets of numbers, each with a range of 0-255. Each number represents the amount of red, green and blue light it takes to create a specific color. Hex code is another color language for online use. Hex code is a six-digit number that also refers to the red, green and blue light.
Print designers work with CMYK – the four ink colors used by all printers: cyan, magenta, yellow, and black. This language refers to how much of each type of ink is needed to create a color. However, since RGB has a wider range of color options, many print designers will design their work online with RGB and then convert to CMYK using the Pantone Matching System.
Do you have any further questions about online images? We’d be happy to help. Drop us a line today.
