• Mark Benny

4 essential tips to get your images looking great online and printed.

Updated: Mar 23, 2021

Do you struggle to make images look great on your website or brochure? Do they look like a 90's arcade game? Does your brochure look dull compared to what you saw on your screen? You want to post on Facebook and they want you to upload a RGB image at 72 dpi that is 820px X 312px; what does this even mean? Sound like gibberish to you?, unless you're a graphic designer; I can say it does to most people. I'll explain it all in four easy to remember points, and your images will start looking like a professional created them for you.

This article covers the physical attributes to make your images look great, not the image subject's actual content. If you need help with what image to use and want to know the difference between a good or bad image, then head over to this article: Images, the good, the bad and the blurry.

1. Get your colour right.

You may remember this from your school days; there are two ways you basically see colour, with reflective and transmitted light. If you want to know more about this, here is a link. However, to keep it very simple, the image on a phone or screen, e.g. website, is transmitted. The image you see printed on a brochure or magazine is reflected. So because of this, the number of colours you can see can vary greatly. Colours being transmitted can produce many more colours than colours being reflected. This is very important to understand when designing content on a screen that will be printed. You choose a bright blue on your screen for the logo, but it looks dull and darker when it is printed. This is because the printer can't print the bright blue you see on the screen, so it produces the closest thing it can to it. This can sometimes deliver very disastrous results in some colours.

To help make sure the colour space your designing is correct. Use RBG (Red, Green, Blue) for digital, screens, web pages etc. and CMYK (Cyan, Magenta, Yellow, Black) for printed material. Unfortunately, it still won't be perfect because you need to have your screen calibrated as well. At least, making sure working in a suitable colour space, to begin with, will be afoot in the right direction. If you have access to software, you should see a difference immediately. To change your colour settings, look for "colour settings" or "mode" in the software you are using. If you don't have editing software, here are three that I recommend that are free to download, or you may already have them on your computer.

  1. GIMP - A Photoshop alternative that offers more power and features than other free software.

  2. Apple Photos - If you're running an Apple, this is an excellent essential editing tool built right in.

  3. Microsoft Photos - For those on a PC, this works well to edit photos and videos.

2. Use the correct resolution - PPI and DPI

Source: Next Day Flyers

So we've all been there, you download an image from Google and print it, and it looks horrible. Unless they are from a stock photo provider like Shutterstock or Unsplash (Free), then the reason for this is that 99.9% of all images on the internet are RGB 72ppi, not suitable for printing. Like the example above - Crystal Clear, not very clear at all. They've used a logo created for a website, placed text over it and attempted to print it.

A quick side note, you can not download images from Google and use them for any commercial purpose. This is a copyright infringement, and you can end up being fined and sued by the rightful owner.

So what is resolution? Resolution is a measure used to describe the sharpness and clarity of an image. When working with digital images online (RGB), the best resolution is 72ppi (pixels per inch). Over many years, people have stopped using the term PPI and instead default to using DPI for everything; although not correct, it has become the new norm. If you are printing images (CMYK), you should be using 300dpi (dots per inch). If you are printing large posters or billboards, then the DPI can be reduced. That's right, you don't increase the DPI to make more giant posters. For a few reasons. It's not necessary as no one ever looks at a poster like they would read a brochure. The file size will be so big that it will slow your computer and printer down to the point it will just freeze. A poster needs a minimum resolution of about 100dpi if viewed at 2 metres (6ft). Viewed at 10m (30ft), a billboard needs a minimum resolution of about 20dpi. If you're printing a photo on your inkjet printer, then use 300dpi.

© Mark Benny
You can start seeing the loss of detail,especially around the boy's face, hat & poncho. It starts to pixelate.

So can I use a CMYK 300 DPI image on my website? The answer is no, the colours won't look as vibrant, and the image size will be too big. This slows down your website, and customers start leaving. The higher the DPI or PPI, the more significant the file size. Online you want the smallest file size possible without losing detail.

Spend the time, get familiar with photo editing software, take your own photos, spend the money or purchase quality photos to use. If you don't have the time or money, there are plenty of free image providers like Unsplash.

3. Don't distort your images.

Ok, you have the perfect image for your website or brochure, but it doesn't fit where you need it.

  1. Do you stretch or squash it to fit? - No

  2. Do you crop and scale it to work? - Yes

So many times, I've seen a professional website being let down by squashed or stretched photos. Don't do this ever. A very skilled designer can rarely pull this off, so you should just avoid ever doing this. This is usually caused by trying to fit the image in a specific location on a website that requires a particular size. With printed material, you have more freedom, so I won't refer to printed material for now. Just don't squash or stretch photos; if you design a brochure, you should have the ability to crop or trim the image easily. I'll talk about cropping below.

 #markbenny #1madmonkey © Mark Benny
Never stretch or squash photos

The first thing you need to do is find what size image you exactly need; this usually can be found on the platform you are using. Here are links for image sizes to the five most common media that you could be using.

  1. Facebook

  2. LinkedIn

  3. Wix

  4. Squarespace

  5. WordPress

You need to understand pixels and screen sizes; the average PC monitor is 1920px (pixels) wide by 1080px (pixels) high. This is basically the number of dots on the screen. This can, of course, vary depending on the device, e.g. phone, tablet etc. However, using a standard screen as a scale as a reference, you'll understand if that someone wants a 960px X 540px image, it is basically 1/4 of standard PC screen size. To scale an image easily and correctly, it's best to use the correct software mentioned above and create a new canvas to the required scale. If you use a website builder like Wix, they will scale your images for each device your website displays on. Most website builders allow you to check how it will display on a mobile device. I recommend you do this before publishing.

Also, website builders like Wix and WordPress have built in apps that allow you to edit, adjust and crop images easily.

4. Crop images correctly

If you need to make an image fit into a particular location, then sometimes it is best to crop it or trim it to size. Remember to keep the subject clear and the focus of the image. It is important to have room around the subject in the image to be able to crop it correctly. You may have to adjust the image's size and then crop it to get the best possible result. Of course, cropping would rarely apply to deep etched product images. When cropping images, make sure the content looks balanced, like the example below.

It's best to follow the "rule of thirds". When you photograph or buy an image for your website, brochure or social media, try to look at it from the "rule of thirds" perspective. What does this mean? With your imagination, divide the photograph into nine equal segments by drawing two vertical lines and two horizontal lines. Like this

You want your image to effectively communicate your message; you should place your most critical focal points along these lines or at their intersecting points. These are the points that will make the best impact on the viewer and, consequently, the points where your objects should stand. Note : Most website builders have built-in apps that will allow you to crop images.

In summary, make sure your images look as professional as you are, or you will lose customers. Spending a few extra minutes could be the difference between getting the next sale. For more helpful insight and tips on Graphic Design, Branding and Marketing for DIY Designers. If you enjoyed this post, I'd be very grateful if you'd help it spread by emailing it to a friend or sharing it on LinkedIn or Facebook. Thank you!

#1madmonkey #designtips #DIYdesigner #DIYmarketer #markbenny #thebigblogofbusiness #madmonkeymedia #smallbusiness #startups #images

18 views0 comments