We've all heard the saying, happy designer, happy life. Along with cake, picking the correct file to supply to a designer is the way to their heart. Unsure if you need a PNG, an EPS or an SVG? I'll show you how to pick the right one for the occasion.
On a more serious note, choosing the wrong one can damage your business image. And, if you pick the right file, it can even give your website a boost, which means that the Search Engine Results Page (SERP) rankings get a boost too.
As a bonus, when you work with a designer or a developer, your new understanding will ensure you get what you pay for, and your business image will always look delectable.
Let's get stuck in.
If you've ever enlarged a photograph, and it's ended up blurry and pixelated, it was likely a raster image. JPGs, PNGs and GIFs are made from set amounts of coloured pixels, which make up an image. These are raster files.
When you enlarge a raster file, it can't cope, pixels get stretched to fill empty pixels, and your computer decides which colours will fill the new space. Enlarging raster files blurs detail, distorts the pic and makes it look terrible.
Vector graphics are images created with mathematical formulas. You can scale them to whatever size you like. Without a negative impact. They consist of lines, points, curves, and angles. They're perfect for company logos, illustrations and web graphics.
Whenever a designer creates a new graphic from scratch, like a logo, they will probably draw it in a vector format as they offer the most flexibility in how they can use the images later.
A 'lossy' format that is one of the best-known raster image formats. They display millions of colours, so they are perfect for real-life photographs.
But beware, each time you save, a JPG gets compressed even more, losing valuable data. While this reduces the image size, making it smaller to store and upload to the web, it can come at the expense of high-quality printing.
A simple but powerful 'lossless' format, meaning you won't lose any data if you save the image. Files can have transparency, and you can change the opacity, which gives you the option to layer graphics. They come in two varieties, PNG-8 & PNG-24.
PNG-8 contains up to 256 colours - making it an excellent choice for high contrast simple graphics, logos or screenshots. Fewer colours mean smaller files, so it's perfect for the web.
PNG-24 contain over 16 million colours! They are rich in colour and sharper than PNG-8. As a result, the size of the file is bigger. Causing page load speeds to increase, which is bad.
While JPGs and PNGs are great, neither offer the ability to support animated content. GIFs do but are limited to 256 colours. They are another lossless raster format.
The print industry standard they are a lossless raster file that supports layers. A user can open the file, edit/retouch it and preserve all the original data. These alterations are known as non-destructive. But because they contain all this data, the files can be enormous, making them unsuitable for online use.
Like TIFFs, these native Photoshop files support layers of raster and vector graphics. You could add a photo as a layer, overlay some vector shapes, and throw some vector text in another layer. Then pass this unflattened file to another Photoshop user, and they can add more.
PSD's are the building blocks for animations and graphics, but you need to save them as a JPG, PNG or GIF to use them online.
These are files that only Adobe Illustrator users can open. They are for vector graphic creation. But, you can also include raster graphics. You can't use AI files on the web, but you can send them to print. You can also handily insert them into Photoshop, Adobe Indesign, or Microsoft Word.
Like an AI file, they can contain vector and raster graphics and can be inserted into various programs. The most significant difference is you can open EPS' with Adobe Illustrator, Corel Draw, Inkscape or Affinity Designer, making them widely accessible. Once again, they are unsuited to use online, which has led to the development of new vector file formats like SVGs.
As responsive websites became the industry standard, there needed to be a match in vector file format. SVGs are an incredible answer. You can scale them to any screen size with no distortion.
Because SVGs are XML code-based, they can be output at tiny file sizes, making them super quick to load online, making search engines happy.
You can open them with Adobe Illustrator, Corel Draw, Inkscape or Affinity Designer. Making SVG an incredibly flexible vector format suitable for web use.
The multi-purpose PDF. It's suitable for use in print and online and can hold both raster and vector graphics. Many software options can open a PDF, from inbuilt options on your desktop operating system to smartphones and tablets to high-end options like Adobe Acrobat Pro.
Get my latest branding, design and photography tips straight to your inbox, with a no crap guarantee!