The power of transparent images in SharePoint — Modern experience

Stefan Bauer

I case you are working with photos; it is obvious to have these pictures full-sized in your SharePoint. Sometimes it makes sense to handle images that should land, for example, on a communication site with a little bit more care. Especially when you are dealing not with photos but with illustrations.

Sometimes you don’t like to have a background on your images. Let me show you why.

Take, for example, the SharePoint Pattern and Practices mascots Parker, the friendly porcupine. Doesn’t he look cute?

So when you upload this image and place it on a page. In general, everything looks fine.

Parker as jpeg on a page
Parker as jpeg on a page

Parker as jpeg on a page

Let’s make the page a bit fancier because SharePoint pages now support coloured sections.

Parker as jpeg on coloured section background
Parker as jpeg on coloured section background

Parker as jpeg on coloured section background

Well, now still looks good, but you see the white background of the images. The image I uploaded here is a jpeg, which doesn’t support a transparent background. To make Parker shine, we have to re-upload the images as Portable Network Grapuics PNG or SVG (Scalable Vector Graphics, which transparent background and has a good portion transparent.

Parker as png on coloured section background
Parker as png on coloured section background

Parker as png on coloured section background

In this case, a massive part of Parker is just transparent, but he has a white border around. The difference between the previous image and the new one is dramatical.
Now we have a more seamless integration in the page then before which looks a bit nicer from my perspective.

Even when the background of this section is switched to the “Soft” background option selected the difference is noticeable.

Parker as png on soft coloured background
Parker as png on soft coloured background

Parker as png on soft coloured section background

This is just a small trick to make your pages in SharePoint shine and look modern. For graphical presentations like this, it makes more sense to show the images like this.

Unicolors logos and presentations

Especially when you like to use logos in your organisational asset library that only have a single colour, these assets need to get special treatment.

Again to showcase this, I use a logo from the SharePoint PnP media repository.

Transparent logo as png on soft coloured section background
Transparent logo as png on soft coloured section background

Transparent logo as png on soft coloured section background

On a soft background, this image still works and even on a white background too, but in full cover mode, the situation with this black logo changes a little bit.

Transparent dark logo as png on coloured section background
Transparent dark logo as png on coloured section background

In this case, the logo is now too dark, so for some presentations, it makes sense to upload a second variant. In this case, just the white option of the logo.

White logo as png variant on coloured background
White logo as png variant on coloured background

Now we have the same significant effect as before. Primarily when on-site, for example, the dark theme will be used, you have all the needed options of images to choose from.

Black logo on dark themed SharePoint site and coloured section background
Black logo on dark themed SharePoint site and coloured section background

Black logo on dark themed SharePoint site and coloured section background

White logo on dark themed SharePoint site and netural section background
White logo on dark themed SharePoint site and netural section background

White logo on dark themed SharePoint site and netural section background

What is the best option an SVG or PNG file

Personally, I would vote for scalable vector graphics (SVG) for graphics like Parker or the logo. This format is not binary; instead, it renders the graphic directly in the browser. So this format is faster, smaller and the graphic looks crystal clear whatever size the graphic is.

The logos, for example,, as SVG only have 4kb independent of the resolution. The equivalent PNG-File also has 4kb but at a size of 300px width and it is not a sophisticated presentation.
The file can become in this specific case, and a higher resolution has about 17kb.

Still, no colossal file size but the more colour these images have, the more significant the file size increases.

The downside of using SVG graphics in SharePoint is that there are small gaps in handling this file format appropriately depending on how the SVG is set up.

To play it safe, transparent PNG is a fail-safe and great option.

Make your SharePoint pages amazing

Screenshot taken from a SharePoint Page using the SVG SharePoint logo and transparent png as sun glasses.
Screenshot taken from a SharePoint Page using the SVG SharePoint logo and transparent png as sun glasses.

Screenshot taken from a SharePoint Page using the SVG SharePoint logo and transparent png as sun glasses.

With this simple trick and to keep in mind what you can accomplish with transparent graphics in SharePoint I think this helps you to create a fantastic experience for anyone who visits your page.

Be creative!!!


Originally published at Stefan Bauer — N8D.

Stefan Bauer

Written by

Sharing ideas about art, design, web and development. I'm a professional #SharePoint consultant and developer. Microsoft Community Contributor Award 2011/2012

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade