Graphics formats for Microsoft Office add-ins

Chances are that in the majority of Microsoft Office add-ins, you’ll be using at least one ribbon or command bar button. I do not know about you, but I can sometimes get hung up about which icon to use and deciding on which image will convey more accurately the task that will be performed once the user clicks on said ribbon or command bar button.

In today’s article, we’ll explore the various graphic formats supported by MS Office components and how to make them appear the best they can be.

• Configuring the ImageList component
• Supported image formats and sizes
• The Glyph property – a better alternative to ImageList
• Common MS Office icon sizes

Configuring the ImageList component

When using images on any Add-in Express components such as Ribbon buttons, ribbon galleries and the Back stage view, you’ll need to first add the images to an ImageList control and set the Add-in Express components’ ImageList and Image property to the name of the ImageList and the index of the image.

You’ll then need to set the ColorDepth and ImageSize properties of the ImageList control before adding images to the list. The properties should be the same color depth and size as the images you’re adding to the list.

If not, the images’ color depth and sizes will be adjusted to reflect what have been set in the properties and it will not display nicely inside your add-in.

Supported image formats and sizes

Microsoft Office Ribbons and toolbars support ICO, BMP and ICO files. As I’ve mentioned earlier, if you’re building you add-in using Add-in Express you’ll assign an image to the Office controls by first adding the images to an ImageList control and setting the ImageList property of the Add-in Express control.

ImageList controls support the following image file formats:

• BMP
• GIF
• JPG
• JPEG
• PNG
• ICO

Bitmap file format

The Bitmap file format was developed by Microsoft for storing bitmap files, thus it is one of the oldest file formats available on the Windows platform. In general, it is not the best format to use for your Office control icons as the file size can be pretty large and it does not have very good transparency support. The following image is an example of a Ribbon Gallery button using an icon in BMP format, you’ll notice it does not have a transparent background. The icon also has a file size of 3.05KB

GIF file format

Graphic Interchange Format or GIF was introduced by CompuServe in 1987 and has become widely adopted due to its general support and convenience. It does support transparency and can be used as icons for your Office add-ins. However, its transparency can sometimes look a little jagged depending on your image editing software. In the following image, we’ve used the same image as an icon on the same Ribbon Gallery button. You’ll note that it does have a transparent background and its file size is 1013 bytes.

JPEG and JPG file formats

Both JPEG and JPG file formats were proposed and supported by the Joint Photographic Experts Group. The files can have either a .jpeg or .jpg file extension. The reason for this is in the early days of Windows the only file extensions that were supported was three letter extensions, thus, the file extension was changed to JPG.

JPG files does not support transparency and generally does not make for a good choice for Office icons. In the following image, we’ve used the same icon image as before, but this time in JPG format. It does not have a transparent background and has a file size of 817 bytes. The file size can vary based on the compression option selected.

ICO file format

The ICO file format can contain one or more small images with different sizes and color depths. Generally it is a good choice for icons as it has good transparency as well as the option to embed multiple images in one file. In the following image, we’ve used the ICO format for a Ribbon Gallery button. The ICO file contains three color depths, True Color+Alpha, 256 Color and 16 Color and has a file size of 7.10KB.

PNG file format

Generally, I’ve found the Portable Network Graphics or PNG file format to be a good choice as it has an acceptable balance between file size and quality. It also has very good transparency support and was invented as an intended replacement for the GIF format. In the following image we’ve used a PNG file for the Ribbon Gallery. It has a file size of 1.05KB

The Glyph property – a better alternative to ImageList

Since version 7.6.4084 of Add-in Express you might have noticed a new Glyph property on any Add-in Express control that supports icons. This property was added to provide a workaround for a limitation of the ImageList component. In essence the ImageList does not work with the Alpha channel, it truncates it and only works with RGB colours.

The end result is image that might look a bit distorted and ugly in some cases.

Common MS Office icon sizes

Add-in Express provides a variety of visual designer for the different Microsoft Office UI elements, such as toolbars and ribbons. Let’s look at what icon sizes some of the MS Office UI controls support:

The Office ribbon

The Office Ribbon supports a variety of different controls that in turn support both 16×16 and 32×32 sized icons. In the following image, we’ve created a Ribbon Tab that contains a Ribbon Gallery with a 32×32 icon for the main button and 16×16 icons for the child buttons. We’ve also added 3 additional buttons, 2 with an icon of 16×16 and another with a 32×32 icon.

Office toolbars

Office 2007 and earlier versions still use the toolbar instead of the Ribbon UI. Because of the size of the toolbar, all icon sizes should be 16×16. In the following image, we’ve added a CommandBarPopup to a toolbar control and two child buttons. The CommandBarPopup does not allow for an icon. We’ve also added two additional buttons.

Office Backstage view

The Backstage view was introduced in Office 2010 and adds a new way for users to discover Office application features. The Backstage view also adds a host of its own UI controls. The Backstage view can be a challenge to get the design right and you’ll also see a few controls that support 48×48 icons. For example, in the following image we’ve created a backstage view that contains a Task Form Group Task control. We’ve added a new ImageList that support 48×48 images and set the control’s Image property to one of the images in the ImageList.

Thank you for reading. Until next time, keep coding!