Does your website logo look pixelly, or your email logo is too darn big? Has Facebook turned your white background grey and Instagram’s illegible? Well, I’m about to sort hella problems for you.
A great logo is such one of the most important assets of a brand, you need to treat her with the utmost care and respect. You also need to know the best file formats for keeping her fresh, refined and stunning, honey.
Vector files: .ai, .eps, .svg
Best for: your master logo file, print collateral, PR, lasers
A vector file can be scaled to any size and remain crisp. This is because a vector isn’t really an image, but a set of co-ordinates that map out lines and polygons to create your logo. The proportions and ratios are maintained as the display size gets larger or smaller.
A master vector copy of your brand logo allows you to create the specific different sizes and formats you need for all media. Vector logo files are also commonly used in print production which isn’t limited to a number of available pixels, although some online builders are happy with other image types that meet their quality standards.
As vector files are a set of instructions for how to draw an image (as opposed to an image themselves), they’re able to be converted into specialist file types too. Our resident laser lady Rae Flay requires vectors to create laserable files for her laser cutter. Rae has also specifically asked me to include the sentence “jpegs are the devil, and if you send them to Rae Flay she will spit on you and call an excorcist…”. More about .jpg files later…
Now I suck at saving files correctly, so I have a secret backup of master vector files that are never edited. When I inevitably accidentally save over an .eps or .svg, I just duplicate my master file and praise myself for remembering to keep spare copies.
Graphic files: .png
Best for: Websites, email campaigns
When used in websites or email campaigns, and even when your logo is sitting on a colour, your file should have a transparent background. During rasterisation (when you turn a vector into an image with a fixed size) and compression (an important step in managing images for online use) you cannot always guarantee the colour will remain exactly as you intended, and pixels can merge to form unnecessary intermediate tones.
There will always be some pixellation, also called noise and ‘artefacts’, particularly on non-retina screens. .png files with transparent backgrounds allow your logo to sit on any colour and look her best.
Bonus tip: logos seem to pixellate quite easily in MailChimp. There’s a little checkbox nobody talks about: “Constrain image dimensions by 50 for high-definition displays”. Make sure to tick this so that your retina devices users get an extra fresh experience.
Photo-style files: .jpg, .jpeg
Best for: Social media images, Etsy
Let’s get this straight: .jpg files are a ruddy daft choice for clean graphics. A .jpg is a lossy compression file that is perfect for photographs and complex illustrations, which is why it is the file type of choice for most social networks.
Etsy, Facebook, Instagram, Twitter, Pinterest and the rest do not work with .png files, and even if they say they do, they’re liars. These will usually convert a .png file to a .jpg which can result in ugly-ass pixellation .
It’s best to create a .jpg image containing your logo so that you can control the level of artefacts, ensuring the best outcome whilst still meeting the requirements of this ruddy daft file type choice.
The good news is that most social network profile pics are currently accepting the same size file. I personally use my vector files to create .jpgs that are 1,080 x 1,080 pixels. Why that specific number? Well it’s the exact size of an Instagram post, so ready to share in the feed if it’s on-brand.
If you’re anal about these things, you can Google ‘social network images sizes 2018/19/20’ to find an up-to-date list. I’m not going to include one here though as I’m hella lazy and won’t keep it updated.
Super fun files: .gif
Best for: Email signatures
I ruddy love a .gif, but they’re pretty freaking pointless as a logo file these days. They’re lossy, difficult to compress, and can’t handle too many colours.
But.
They can be animated, and that tickles all sorts of mittens for me. In my opinion, and animated .gif is a dreamy choice for any email signature. The small size means compression artefacts are relatively minor, the 30 year-old file type is *pretty much* guaranteed to render in any email client, and it adds a touch of memorable whimsy that’ll make you and your customers feel fuzzy every darn time.
Creating a simple animated .gif is super easy too. I run off two to five individual frames with simple changes from my vector file, and use a website like EZGIF or Giphy to stitch them together.
So that’s how to choose the best file type for your logo on your website, emails, social networks and whimsical wonder. This article is part of our September 2018 challenge: 30 five-minute tasks for marketing a small brand. Check out our blog for more, or follow Studio Cotton on Instagram for more tips and lots of plant pics.
