Wondering how to avoid pixelation? This is the blog for you.
Pixels, dots, resolution and vectors – if graphics isn’t your bread and butter, these terms can all leave you feeling a little confused.
But don’t fear, we’re here to give you a helping hand. Here’s a quick guide on how to avoid pixelation and keep your artwork looking crisp, colourful and clear.
Join the dots
Pixels, points, dots, dpi, ppi, definition, resolution; there are so many different terms for one specific aspect of image creation. But it all boils down to this – images, whether on a screen of on a page are made up of tiny dots or squares. The more of these you have in a very small area, the smaller they’ll be and the better your image will look.
Web vs print
One of the major differences between creating images for printing and those for your website is the ‘colour mode’. For print you need to save your images as CMYK, whilst RGB is best for digital work.
‘Why’s that?’ you ask. Well, printing presses use four different colour inks – Cyan, Magenta, Yellow and Key (black) and all other colours you see are produced by blending those inks. Saving in this mode means that your chosen colours are saved in a language that the printer will understand and faithfully reproduce.
When you create a gorgeous, glossy print document, one thing you’re sure to notice is that you end up with a huge file size that probably slows down your computer. This is because print images require 300dpi (dots of ink per inch) to look their best. Computer screens can however make do with a lot less detail. 72dpi is the sweet spot though you can go for a slightly higher resolution if you’re targeting HD mobile devices (but do consider your audience’s download limits please!).
This means that you should never use a web image for print. As in the vast majority of cases it’ll be less than a third of the resolution you need and in the wrong colour mode. Going the other way – from print quality, to web quality is absolutely fine though, and leads us to…
When you’re creating your graphic or taking that photo make it as big as possible. In graphics this means creating it in the biggest possible size you could want to use it. In photo terms this means taking you picture in the highest definition setting possible for your camera.
You can always ‘down-sample’ to reduce the file size or resolution but you can’t add detail you never captured in the first place. Down-sampling is simply saving a version of your image at a lower resolution or a smaller size. As long as you start with a large high-quality image you’ll end up with a great looking small version or web version.
But try this the other way round and try and increase the size of a photo or graphic, and all you’ll be doing is making those few blocky pixels bigger and more noticeable. Avoid this at all costs!
Don’t fiddle with the file types
And last but not least, keep photos as jpegs (jpg files). Don’t save them as gif’s or png’s, as these are designed for much simpler images. These two files types are great for graphics, though if you have a lot of detail in the design then saving as a jpeg would be the best option here as well.
Follow the above advice on how to avoid pixelation and you should skip the frustration of fuzziness with pixel perfect designs.