Alexander Haneng
Jul 15, 2014
  4487
(1 votes)

EPiServer CMS Site Performance Part 3: Optimizing images and using sprites

In the last post we looked at bundling and minifying JavaScript and CSS files on the demo site. This time we will take a look at the image files.

Web Essentials
The Web Essentials extension to Visual Studio is as the name says essential. If you haven’t already, you need to download it now

Optimizing images
Most often you will find that you can make image files even smaller without decreasing the image quality. With Web Essentials installed it is simply a matter of right clicking the image(s) in Visual Studio and select “Web Essentials –> Optimize images”.

optimizepngs

The optimization shrank the file sizes between 3% to 95%. Here is one example:
Optimized triangle.png
Before: 3061 bytes
After: 303 bytes
Saving: 2758 bytes / 90,1%

Creating sprites
If you look in the header area of the demo site you will see that we have five share icons, each consisting of its own small image. 

image

<ul class="follow_icon"> <li><a href="#"><img src="/img/follow_icon1.png" alt=""></a></li> <li><a href="#"><img src="/img/follow_icon2.png" alt=""></a></li> <li><a href="#"><img src="/img/follow_icon3.png" alt=""></a></li> <li><a href="#"><img src="/img/follow_icon4.png" alt=""></a></li> <li><a href="#"><img src="/img/follow_icon5.png" alt=""></a></li> </ul>

One way to reduce the number of requests is to combine these five images into one sprite, and then use CSS to only show the part we need. To create the sprite we select the five images in Visual Studio, right click and select “Web Essentials –> Create image sprite…”.

createsprite

This is what the sprite looks like:

FollowSprite

Not only will Web Essentials create a new image sprite file, but also the CSS code you need to use the sprite (as well as LESS and SASS code). All we have to do is to copy the CSS code to our style sheet and modify our HTML to use the sprite.

image

<ul class="follow_icon"> <li><a href="#"><div class="img-follow_icon1"></div></a></li> <li><a href="#"><div class="img-follow_icon2"></div></a></li> <li><a href="#"><div class="img-follow_icon3"></div></a></li> <li><a href="#"><div class="img-follow_icon4"></div></a></li> <li><a href="#"><div class="img-follow_icon5"></div></a></li> </ul>

Result
Lets run YSlow again and see what impact our image optimizations have had.

image

Bytes transferred: 287.1KB down from 326.5KB (Step 1: 333.3KB)
Requests: 26 down from 30 (Step 1: 35)
Time: 1.09 seconds down from 1.16 seconds (Step 1: 1.27 seconds)

Jul 15, 2014

Comments

Henrik Fransas
Henrik Fransas Apr 15, 2015 04:56 PM

Where are the CDN part :-)

Please login to comment.
Latest blogs
Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog

404 Error on Static Assets Within an Optimizely plugin

Background With the move to CMS 12 and .NET 5/6, developers are now able to build Plugins and Extensions using Razor Class Libraries (RCL).  These...

Mark Stott | Sep 23, 2022

How to bypass the content creation view in Optimizely

Something that has come up a couple of times in the last few year is feedback from content editors about the editing view that comes up when creati...

Ynze | Sep 23, 2022 | Syndicated blog

Welcome to Optimizely World's New Tech Video Portal

Optimizely, leader in the digital experience realm, has become a wealth of world class SaaS products including Web Experimentation, Full Stack, B2B...

The Developer Marketing Team of Optimizely | Sep 22, 2022