[img src=”me.jpg” highsrc=”150dpi@me-150.jpg; 300dpi@me-300dpi.jpg” style=”width:400px” alt=”me”]

In this way a website still loads quickly, and looks awsome on high-rez screens and paper (when using Safari 3.0).
The thing you need to consider: are bigger pictures really that troublesome to add complexity. With other words, does:

[img src=”me-300dpi.jpg” style=”width:400px” alt=”me”]

takes too much time for 90% of the webusers in, say 2 years…

The status of SVG s is a good question. Clearly you want event targeting and selection to treat it like any other image. You also need to disallow access to the SVG DOM because IMGs can historically have a non-same-origin SRC.

If you disallow scripting and SMIL animation, then you can optimize by rendering the SVG to a pixmap and then throwing away the DOM. But since you can have animated GIFs, why not animated SVGs? And if you allow SMIL animation, why not Javascript animations? Hmm, tough call. I think it might be best to allow scripting and SMIL animation simply because other browsers will always be tempted to allow it as an “extension”. It should be fairly easy to detect the absence of scripting and SMIL animation and use the pixmap optimization if appropriate.

(I do, however, have to second the view that we do need an absolute unit, and that that unit should be px – let’s fix up the problems with em/ex, and let px keep its current usage, since we regularly need per-pixel positioning, esp. in interactive webpages!)

The problem is the lousy resizing most current browsers do to images scaled in this way: most do nearest-nieghbor rather than bicubic, so scaled-down images look like crap. For scaling up, there’s the occasional website that depends on the nearest-neighbor algorithm (like the old WIRED logo), so simply doing a bicubic at all times is probably going to break a few sites.

I’d like to see a “resample” attribute (looks like IE7 uses the “interpolation” style property) that lets you specify how you want to scale things.

<object type=”image/svg+xml” data=”example.svg”>
<object type=”image/png+300dpi” data=”example-hi.png>
<img src=”example-low.png” />
</object>
</object>

For starters, a PNG/GIF object nested inside an SVG object would allow older non-supporting browsers to load and display a raster image, while a browser with native SVG support or a plug-in would load and display the vector artwork instead.

Since nested objects load based on their mime type, perhaps a new mime type incorporating image DPI could be used to offer a better image to a newer browser. Something like could load in hi-res displays, a nested graphic with the standard “image/svg+xml” type in other SVG-supporting browsers, and finally a plain old could be nested in the middle for the benefit of others. Adoption of the new mime-type would make this work, without an extensions to (X)HTML at all.