When creating graphics for your business, it’s important to understand what is required for a web-based graphic/design and a print-based graphic/design. Even if you are not a designer, these are principles that are important to help you manage anyone who is uploading images to your website, creating your graphics for social media, or creating your designs for print.
We’ve created a list below of some basic concepts and differences for web and print graphics. Get ready to get graphics geeky!
1| RGB is for Web vs CMYK is for Print
RGB stands for red, green, blue. CMYK stands for cyan, magenta, yellow and black. RGB and CMYK are important concepts to understand when you’re creating your graphics. The rule is, when creating a design, you or your design or web team will use RGB for web and CYMK for print. RGB and CMYK are color modes and will be determined by whether you are creating the design for web or print.
Why do you use one color mode for screens/web and the other for print?
Your computer monitor (or any screen) will output RGB colors and will appear more bright and vibrant than CMYK. Although CMYK will print out less vibrant than RGB, it will translate better when mixed on paper. All printers will print in CMYK (you can even open your printer to see the ink cartridges and see that they have CMYK printed on them). Some printers will convert your design to CMYK as it prints but it’s generally good practice to make sure your file is in the right color mode before printing.
Note: When creating designs for print, you’ll want to do a couple of test prints to make sure that the colors are matching up correctly (sometimes colors will print out darker than they appear on the screen).
2 | Image Resolutions
Just as web graphics and print graphics use different color modes, they also use different resolutions. Because web-based graphics will appear on the web and typically need to be loaded onto a website they don’t need to be (nor should they be) very big files. A web-based graphic should have an image resolution of 72ppi (pixels per inch). You’ll want to keep your web graphics less than 1 MB. Print graphics and designs on the other hand are typically much larger than their web counterparts. Due to this a typical print resolution should be 300ppi for the best quality. And as a word of caution: scaling a small image up will give you a pixelated image. If you have to scale, scale down.
Note: Dimensions are still important for graphics! Even if you have an image that’s 300ppi but it’s 1in x 2in it’s going to be small. Makes sure to do your research on what the best size is for the design you’re trying to create. There’s a plethora of information of document sizes, all you have to do is google it.
3 | JPG vs PNG vs PDF
When using an image on your website, using a JPG is best because it’s a smaller file that won’t slow down your website optimization. One of the only times that you’ll use a PNG on your website is when you need the image to have a transparent background (PNG’s are the only image file that can provide that).
Use a PNG when:
- Are posting the image on social media
- Need a transparent background
- Need a better quality image than a JPG
Using a PDF file to print will give you a better result than a JPG or a PNG. PDFs will give you better quality and most of the time printers will ask for one anyway. There are two types of PDF’s you can have: Print and Interactive. A PDF for print is used as you would think you would use it: with printing. An interactive pdf is a pdf that you use when you know that the pdf will be for web use. You can then place links within that pdf. Remember that when designing a file that will be a pdf to make sure it’s in the right color mode (RGB or CMYK).
Now that you have a more basic understanding of the differences between web and print graphics, it’s time for you to tackle it yourself. Use these principles and set yourself up for success!