This is a tech demo ~ not a design demo ~ for a new HTML5 feature. For a design demo, I would be happier using a [paper] sketch book. This tech demo is mostly due to the fact that I talk with the people creating the specs and browser features on twitter. The IMG tag doesn't work very well with RWD as its for a fixed image. For some things a vector is useful (e.g. fonts) but this isn't globally applicable. For photos, you don't want to send a retina grade image to small phone with a slow network; but you do if the web client is on a retina grade screen. This does mean that you need to add several copies of any images ~ image editing time. This can be avoided if the images where scaled via imagick or similar, but that may affect the quality of the result image. For people who can't code, there is a “technical solution as a service” 1. As I could create a basic edition of image resizing in a few hours; and would have no future licence issues, I'm not sure about the scope of this. The third party API would require you to upload the images to their servers before they could be displayed on your website. My several hours estimate is accurate, as I have done it in several hours, for a previous agency.
This is an obvious feature for RWD libraries, but I haven't seen it. One if the critiques of RWD is the images made everything too slow 2. According to can I use?, about 40% of the browser population supports this, as a technology. If you happen to be using wordpress, you will need to do alot of hacking, as wordpress likes to set image width and height, so fullscreen desktop will render better (if these are set, the browser can allocate screen space to the image before it is downloaded). This is a problem with using simple software outside of its design scope. As a parallel technology, one may use an IMG.srcset; this isn't covered here. As nearly every browser supports media queries, one may adjust images using these and background-image CSS. This technique is nice when it deals with screen orientation cleanly. The picture tag allows decisions on things other than screen size, for example image format. It would be nice to detect browser preference for high contrast images, and serve more saturated/edge exaggerated images for people with less good vision. The feature could be used to serve all the MSIE users with BMP images, as MSFT favour that format. An important item is giving retina screen users the high PPI images, assuming you have mac or iphone users. I have confirmed my understanding on JPEG, the PPI is just a JPEG meta information, a readable guide.
Here I am presenting 2 options for graceful degradation. First via an JS shim, which requires this language; second just using CSS and HTML5. The first image is is harder to place on the screen, but is less demanding for the browser ~ if I resize alot I can hear the CPU fan with the second one, for the image scaling. The second is not efficient in bandwidth (using the wrong size image), and the image scaling is quite taxing for some of the earlier/ simpler phones. Thirdly as a design, it only works with some layouts and image. On the positive side, nearly everyone can render this, and with scripting disabled. If the picture element isn't working, the second option isn't good use of technology.
In the larger context, this technology should be included into RWD templates. I don't have enough time to do the complete template, here. This does mean that we will need to use background-image less. This is all open source, please view source if you are technical. The spec that this is written from. Or read some of the failure conditions. The hiSRC project is useful for getting the right size images.
As this is a new technology demo, there will be concerns on stability. This is demonstrated as working on:
- FF 36 (but only with config for native support for Picture elements disabled)
- when I resize this browser, picturefill and the picture element swaps the image to the correct size image.
- Chrome 41
- Opera 12
- Safari mobile
- Chrome mobile
- blackberry webrowser ~ mobile
- The unit build as of 09/03/2015 for picturefill doesn't work with a standard install of MSIE11 ~ the picture element does. I guess this is the picturefill turning itsself off as MSIE reports the native object exists.
The biggest image is ~2000px across, the smallest ~200px. As a user, you aren't supposed to spot any slight of hand.
okay, an image on screen; what is this?
- In a few years time, the correct size image for your screen
- without any scripting, or downloading excess data.
- For the current settings (resolution, image format, colour saturation, borders etc),
- like current webservers can serve different languages.
- Really new. This is better UX than what we could do a few months ago.
- Also to be viewed on a range of phones and any projectors you have.
Rendering images to fit your screen size, via polyfil.
Rendering images to fit your screen size, via PICTURE tag and CSS2.