I’m a big advocate of standards and correct semantic markup, and poorly executed markup drives me crazy(*). Though, I’m not without sin myself.

Oh well, onward and hopefully upward.

Chris

(*)My personal peeve is (nearly daily) seeing some supposed expert advising people to set an empty alt attribute ( to get their code to validate, rather than realizing that if there isn’t an obvious alt interpretation for an image it has no business being in the HTML as a semantically significant element at all. It should be a with a background-image CSS attribute set.

In your second example, you have rectangles of solid color that you say would be needlessly output as graphics. That might be what you would do if slicing, but if these color rectangles are individual layers, SiteGrinder will output them as HTML/CSS only, no graphic at all.

If you have a graphic that repeats on a page, or across pages, SiteGrinder can detect this and output it only once, no needless duplicates. If you have overlapping non-interactive graphic layers that are repeating across pages, SiteGrinder will automatically merge them together for you and output just one graphic for all of them

Similarly, SiteGrinder finds CSS entries that repeat and/or share a majority of content, and groups them together. It also groups your CSS into a common.css file for those entries that are shared across pages, and individual CSS for the CSS that is unique to any page.

And, for any Photoshop text layer, you can choose to have it output as styled HTML text (no graphic) or as a graphic. It even warns the user if it detects a page will have no real HTML text on it when converted.

SiteGrinder supports background colors for the page and/or browser window area (no graphic needed for those). And the Pro edition supports repeating tiles, so it can exploit Photoshop’s Pattern Overlay layer FX and output a very small graphic sliver and set the repeat value on that graphic for you. It has a few different tile options and users use them to fill the browser with gradients, make infinite headers, put drop shadows on the page, etc. What is nice about SiteGrinder’s tile ability, as opposed to setting something like this up by hand, is that SiteGrinder will include it any compositing that needs to happen, so your other layers will be correctly composited to the tile (if they have any drop shadows, anti-aliasing, etc.)

SiteGrinder isn’t a good tool for all sites, but if a Photoshop design is the starting place, it’s probably the best option. SiteGrinder doesn’t create code that is as good as an expert web developer, but it does produce validating XHTML and if used properly it’ll do B or B+ level work. Much better than you probably think.

But on the optimization front, the subject you broached, SiteGrinder, when used properly, does a fantastic job. Given the same constraints of taking some graphic-intense Photoshop created design to the web, SiteGrinder will produce a smaller download than a human can 99% of the time. Optimization is the type of thing that computers are really good at - you don’t want to compete with them on that field.

And, SiteGrinder is fast. If you have a Photoshop design and don’t want to waste your time doing the monkey work of re-producing it by hand in DreamWeaver, use SiteGrinder. If you are worried about the resulting code and want that A level work, do what many people do: save time by using SiteGrinder and then modify the code downstream.

I’m one of the SiteGrinder programmers. We didn’t write it because we thought the world needed another slicing tool. We wrote it because we were getting handed Photoshop files as source designs all the time, and there was no good alternative. Either do the monkey work by hand, or use a slicing tool that produced terrible brittle 1997 era HTML. We wanted something that did it better. Something that would optimize correctly, produce standards compliant markup, supported text, and, most of all, produced usable output while saving time.

Chris Perkins
Media Lab, Inc.
http://www.medialab.com