Responsive layouts will require using a variety of image sizes at different resolutions. Unfortunately, we haven't identified a solution for responsive images yet. We need to objectively evaluate solutions. Initial evaluation criteria include:
- Optimize images sizes for screen and bandwidth considerations on mobile devices.
- Allow anonymous page caching.
- Support arbitrary image resizing (ie pinch and zoom on iDevices).
- Allow art direction to override automatic resizing.
- Implement the still to be approved picture element so Drupal is using the latest technology at the time of release, by the looks of it (http://www.w3.org/community/respimg/2012/08/04/picture-in-the-html5-spec/) this will be solved in a timely matter, well before Drupal 8 is released.
- Implement it as a separate module so user can decide if they need it or not. This also gives contrbi the possibility to come up with something better.
- There are 2 modules created in contrib as a proposal (working versions for Drupal 7 & 8):
- Focus on image fields first, but make it easy to support media, inline images as well.
- For the moment all modern browsers are working (so not IE8-).
- Clearly define evaluation criteria and reach consensus on solution requirements.
- Compile pros and cons for each proposed solution.
- Evaluate proposed solutions based on agreed upon requirements and reach consensus.
- Create action plan for implementing said solution including task list and/or appropriate issues.
- Write needed tests.
- Document API changes.
Original report by [Jeff Burnz]
// Text of original report:
Responsive images are images that respond to the size of the browser window - which means they are 1) flexible and 2) should use a preset appropriate to the screen size.
Small screen mobile devices don't need large images, so being able to push a smaller image saves bandwidth and improves the mobile experience. I would think within two years this is a problem that will largely be solved by other systems and if Drupal cannot do this we will be lagging behind.
I think we should explore this idea and decide if we want to have something like this in core.
Some relevant stuff going on out there:
Contrib project leveraging the Filament group ideas:
HTML WG mailing list discussion:
W3C’s bugtracker issue:
WHATWG mailing list discussion:
Some references used in discussion (in no particular order):