Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows

Images as Style Attributes


:P
On this page:

Here's a little tip that I started using more frequently recently that involves images. When embedding images into pages you're often inclined to use an IMG tag or an ASP.NET image control. In some situations though - especially if the same image repeats on the page - it can be much more efficient to use a style that references the image rather than embedding the image into the page itself.

For example, if you look at the WebLog here and you look at the time image for each of the posts (in the byline) that image is linked in the style sheet as:

.byline 
{ 
    background: transparent url(images/time.gif) no-repeat; 
    padding-left:16px; 
    font-size: x-small;
}

and then embedded into the page as part of a repeater template column like this:

<div class="byline">
<%# WebUtils.WebLogDateString( ((DateTime)Eval("Entered")),true ) %> - &nbsp;from <%# Eval("Location") %> </div>

The idea is that you can use the style to display the image as a non-repeating background image and then set enough of an offset so that any content the follows will show past the image.

Now why would this be better than an embedded:

<img src='<%# this.ResolveUrl("~/images/time.gif") %>' />

First if at all possible it's a good idea to keep any formatting information that might be reused in a style sheet. I've been slow to adopt CSS in the past mainly because I've had tons of pre CSS HTML around, but once you start with CSS it's hard to stop <s>. Anyway it's a good idea to abstract whenever possible.

Second if you have repeating images you are reducing page size by not embedding image link information for every image embedded. If you embed an image 30 times or so (once for each item) given that URLs that are fully Web site pathed (ie. created with ResolveUrl - you are using ResolveUrl right? <s>) aren't exactly short. So it definitely can save some bytes returned to the client.

Finally the nice thing about images referenced by CSS files is that they are relative to the CSS file and not the page so when you reference the style there's no need to try and figure out or reference a Web site relative path (ResolveUrl) for consistency. Less code needs to run (let the browser figure it out) and the size of the page gets reduced by not repeatedly embedding the same image Url into the page.

This is nothing new of course - CSS designers have long been telling us to rely on CSS for all it's worth, but as a developer I find myself a little behind the times with some CSS concepts. This has been one of the more useful ones...

Posted in ASP.NET  CSS  HTML  

The Voices of Reason


 

Bruno
June 29, 2007

# re: Images as Style Attributes

Hi Rick

Great idea. Unfortunately it doesn't work using Firefox, at least for me.

Bruno

Bruno
June 29, 2007

# re: Images as Style Attributes

Rick

Forget about the previous message. Seemed to be a problem with a cached .css. Works like a charm.

Bruno

stephenpatten
June 29, 2007

# re: Images as Style Attributes

Rick,

for the life of me I can't see where you're using this class on this page?

Stephen

Rick Strahl
June 29, 2007

# re: Images as Style Attributes

Search for class="byline" and class="commenttime". The actual definition is in the style sheet.


July 04, 2007

# 英语阅读推荐:使用样式显示图片 &amp; .NET中的颜色操作 - Cat in dotNET - 博客园


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024