I have no idea what's your image is; and most likely my idea will be an alternative one: use vector graphics, SVG (
Scalable Vector Graphics,
http://en.wikipedia.org/wiki/Svg[
^]).
To best of my knowledge, this is the only widely used 2D vector standard fully standardized by W3,
http://www.w3.org/Graphics/SVG/[
^].
Most code samples show how to use it in JavaScript, which is important but not a main point. As of HTML5 standard, it cannot be directly embedded in HTML, which is already supported by all decent Web browsers, such as Mozilla (Firefox and SeaMonkey), Google Chrome and others. When it's not supported in this way, it's supported using
<embed>
or
<object>
tags.
It is very easy to scale it. It's also easy to make it fill some region, center on page with scaling to certain percent of the page width, print with scaling, scrolling, etc., not mentioning scaling by some optional factor.
One of the best and powerful methods of creating SVG imaging is using Open Source Inkscape,
http://en.wikipedia.org/wiki/Inkscape[
^],
http://www.inkscape.org/[
^].
Just look at some galleries:
http://wiki.inkscape.org/wiki/index.php/Galleries[
^]. Some images are of nearly shocking photo-realistic quality.
Best thing is: it can export as XAML, which can also be used on a Web page, even though is has narrower feature set (so only some subset of SVG images will render).
—SA