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.
Let’s make the page a bit fancier because SharePoint pages now support coloured sections.
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.
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.
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.
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.
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.
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.
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
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.
Also published on Medium.