Where should I store the images for my theme?

Hmm. So I’ve built a theme for SharePoint, and it seems to be working, but I’ve a bit of a puzzle – where should I store the images for it? It seems to me that there are some options…

The out of the box themes store their images with the CSS of the theme. When a Theme gets used on a site, all these CSS files and images get copied into a hidden _themes folder within the site. You can see this in SharePoint Designer – here I’ve applied the ‘Vintage’ theme to a site ‘Test’:

Of course, these copies of all of the images are at different URLs – so you end up with two cached copies of the same image on the client. To prove this, I created two sites (Test and Subsite). I applied the Vintage theme, opened up the IE Dev toolbar and took a look at where the ‘settingsgraphic_vintage’ image is coming from:

Yup, that’s right, two different URLs. Looking in my temporary internet files in Internet Explorer:

Two copies! Case Proved!

So what about if I put my images in the _Layouts/Images directory – like so:

You’ll notice that I’ve created my own folder (bridge) to keep my brand’s images together. Next, lets look at the images from a site and a subsite:

This time the sites use an image at the same URL. Looking in my temporary internet files:

Just one copy!

Now, I know it’s not really that much of a hit – the images only weigh in at 101Kb for the entire brand, and you still get the images cached on a per-site basis. However, it doesn’t cost me any effort to make that saving – it’s just some URLs in my CSS file – so why not?

Where should I store the images for my theme?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.