CSS images, image-set and strange units.

📏

A candidate draft for CSS3 image values has been proposed, and it contains interesting ideas. Basically, an image can be something else than just an image file, instead it can be a set of images in fallback order and solid colour or a gradient. As I’m increasingly using SVG images for this blog, having the ability to specify fallback bitmaps is a nice feature. What I wish they would have added to the spec was the ability to have an image being a html sequence, that is, be able to specify image fallbacks for characters in exotic fonts (typically rare kanji, or emoji).

Another very interesting idea for image handling in CSS is the notion of image-set, which was proposed on the webkit mailing list, basically instead of specifying a single image, one would specify a set of images at different resolutions and the web-browser would select the one matching the current display. This is basically a problem with devices that have so called retina displays, like the iPhone 4. Basically, those devices do not display bitmaps at one pixel per CSS pixel, as they would display as post-stamps. In practice this means that the pixel is now an abstract unit, in CSS, a pixel is just a unit of length, defined as 1/96 of an inch, or 127/480 of a millimetre, and resolution can now be expressed in points per pixel. Yes, if you are geek, that does not really make sense, that would be like if atoms could be divided into parts…

I really hope those standards get traction, as the current situation is not satisfying: either I need to put images at twice the resolution on this blog, and then let the web browser scale them down to fit the layout, with the result that I’m wasting a lot of bandwidth, making the browser download four times too many pixels, or the picture look blurry on smartphones. It is also interesting to see that content negotiation between web browser and web server has failed: there is no simple way to tell wordpress to create a fallback bitmap when the browser cannot handle SVG.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.