Picture this: You send an email to a potential client. Your logo looks sharp in light mode, but in dark mode? It ends up with an awkward white box around it. Not exactly the first impression you were hoping for, right?

I’m Lyndon, a graphic and web designer based in Alberta. Today, I’m diving into image formats and why the right choice can make all the difference for your business. From transparent backgrounds to file sizes, this post will help you understand when to use which format so your brand always looks its best. By the end, you’ll know exactly what to ask for when working with designers—or how to tackle it yourself.

A Quick Overview of File Types

There are a lot of image file types out there—each designed for a specific purpose. For instance:

• Printer-friendly formats like PDF and SVG are perfect for business cards, flyers, or large banners.

• Everyday formats like PNG and JPEG are the workhorses of the web.

• .heic files are unique to Apple, so if you’ve ever tried to transfer photos off your iPhone, you know what I’m talking about.

• GIFs have become synonymous with memes or simple animations.

While this isn’t an exhaustive list, today we’re focusing on JPEGs and PNGs—the two formats that really stand out in the online world.

Transparency and Why It Matters

Let’s talk transparency and why it’s crucial, especially for logos. Imagine setting up your email signature: your logo looks fine on a white background, but when your recipient switches to dark mode, that same logo ends up with an unsightly white box. Not only is this distracting, but it also comes off as unprofessional.

This is where PNG files shine. PNG supports an alpha channel—a feature that lets you have a clear, see-through background instead of a solid color fill. With a PNG’s transparency, you can overlay your logo on any background, and it will blend in seamlessly. But there’s a catch: if your logo includes dark elements, it might just disappear against a dark background—even with transparency.

The solution? Multiple logo variants. A light version of your logo (with white text and accents) is specifically designed for dark backgrounds. Many modern website builders allow you to automatically switch between your regular and inverse logo versions based on whether the user is in light or dark mode. This way, you avoid that jarring white box on a dark background and keep your branding consistent.

For those who want to automate this switch, CSS comes in handy. If you’re not familiar with CSS, it’s a coding language that tells elements on a webpage how to look and where to go—and yes, you can even use it in some email clients.

Here’s a quick example of the CSS code that makes this magic happen:

@media (prefers-color-scheme: dark) {
  .logo {
    content: url('logo-light.png');
  }
}
@media (prefers-color-scheme: light) {
  .logo {
    content: url('logo-dark.png');
  }
}

In this snippet, if someone’s device is in dark mode, the code swaps in the light logo; if it’s in light mode, it uses the dark logo. A simple step, but one that ensures your brand always looks on point.

Here’s some instructions on how to do this:

Notes:

• Since many email clients have restrictions on CSS for security reasons, inline CSS tends to be more reliable than external or embedded <style> blocks.
• Always test your email signature by sending test emails to different email clients to ensure it displays as intended.

By following these steps, you’ll be able to integrate custom CSS into your email signature, ensuring your branding looks sharp whether your email is viewed in light or dark mode.

Tools and Best Practices

When it comes to creating and editing your images, you have plenty of options. If you’re using paid tools like Photoshop or Affinity Photo, you already have robust features to create transparent images and export them in various formats. But if you’re on a budget, free tools like Canva, Photopea, or Squoosh work right from your browser and can get the job done.

If you’re having a logo professionally designed, here’s a tip: always ask for multiple formats—PNG, JPEG, PDF, and SVG—in at least three variants: light, dark, and full-colour. This ensures you’re prepared for any situation, whether it’s a business card, an email signature, or a billboard.

At my company, Mountain Thirteen, this is our standard. We provide clients with three colour variants in all the necessary file formats, so you’re never caught off guard with an “Oh no, I need a transparent version!” moment at the last minute.

When to Use Each Format

Here’s a quick summary of when to use the most common file formats:

• PNG – Use it when you need transparency or a crisp logo on various backgrounds.
• JPEG – Great for photos and images where file size is a concern—ideal for product shots or blog images.
• GIF – Perfect for simple animations or memes, but not typically used for professional branding.
• PDF – Best for print materials like business cards, flyers, or posters. (Though, PDF and SVG open up a whole conversation about vector files—a topic for another day.)
• SVG – Ideal for scalable logos or icons that need to remain sharp at any size. Like PDFs, SVGs have their own set of complexities that deserve their own discussion.

Wrap-Up

To sum it up: choosing the right image format for your logo is essential. Whether it’s ensuring transparency, optimizing file sizes, or having multiple logo variants for different backgrounds, the format you choose plays a key role in your overall branding.

A little planning goes a long way. Talk to your designer—or try out some of the free tools available—and make sure your brand assets are set up to shine on every platform.

If you have any questions or need help getting your logos in the right formats, feel free to drop a comment below or reach out to us at Mountain Thirteen. We’re always here to help—whether you need to tweak your current logo or design a brand new one with every file format you might need.

Thanks for reading, and stay tuned for more insights on making your brand look amazing!