Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
This document describes a standard for storing metadata related to art direction in responsive images. It is based on the [XMP] standard which is supported by most image formats and programming languages.
The author of an image can embed the rules for art direction directly into the image file. A web server that processes the image can then crop it according to those rules. The [html-picture-element] can be used to request the matching version of the image from the server.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
As a First Public Working Draft, this document is incomplete. The editors seek to illustrate the full scope of the best practices- albeit with the details missing at this stage. In particular, the examples for each best practice are largely incomplete. The editors intend to compile a much richer set of examples in the period leading up to publication of the next Working Draft. Feedback is requested on the scope of this document and the best practices herein. The editors are particularly keen for reviewers to cite examples that may be used to further illustrate these best practices.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.
This document was published by the Universal Images Community Group as a First Public Working Draft. This document is intended to become a W3C Recommendation. If you wish to make comments regarding this document, please send them to public-universalimages@w3.org (subscribe, archives). All comments are welcome.
Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document is governed by the 1 September 2015 W3C Process Document.
This section is non-normative.
Art direction in the context of universal images means cropping and re-framing an image in one or two dimensions depending on the context it is in.
Art directed responsive images start with the photographer. The current situation is that the person who uploads an image to a web server usually makes the decision how an image is cropped. Apart from the technical challenges there are also legal ones. In general, copyright prohibits altering a work of art in any way, even cropping it. (The interpretation of this differs between countries). However, most image agencies allow cropping an image in their license agreements. Nevertheless, this is a factor that has to be taken into consideration when a server is supposed to automatically crop an image.
The purpose of this standard is to give authors and copyright holders a possibility to define the responsive behavior of their images. For web developers and content editors it would simplify things when dealing with responsive issues. Images would always be framed correctly on every device and screen size.
This section is non-normative.
The audience is professionals in the web publishing environment. The most important groups are described below.
They are the ones who publish images together with their editorial content. Up until now they specified a focus point within the image themselves if the content management system allowed it.
With images that have responsive information embedded, this will not be necessary anymore.
When using stock images for responsive designs, developers have to make
sure that when re-sizing the browser window, important areas of the image are not cut off.
With universal images the web framework takes care of correctly cropping the images.
The namespace for this standard is http://universalimages.github.io/rmd/<version>/
.
The version is part of the URL. While the standard is still in the first draft phase, a version below 1.0 MUST be used. The prototype implementations are currently using version 0.1.
The XML namespace prefix is rmd
In the following sections the abbreviation dp is used for CSS pixels to avoid confusion.
The only place where actual image pixel values are used is the image dimensions field. In that case the unit uses the abbreviation px.
Relative values are between 0.0 and 1.0
The point (0, 0) is the top left point relative to the upright image. After [Exif] rotation has been applied.
Field Name | Value Type | Optional | Description |
---|---|---|---|
rmd:AppliedToDimensions | Dimensions | no | Width and height of the upright image (px) at the time of processing when storing responsive metadata. |
rmd:AllowedDerivates | AllowedDerivates | yes | Lists the allowed operations. |
rmd:PivotPoint | XMP Area Point | yes | All dynamic crop operations MUST be relative to this point. |
rmd:CropArea | FrameStruct | yes | Specifies the outer limits of the visible area. The outer area is considered the bleed. If this tag contains area information, the image SHOULD be cropped to those values, otherwise the full image is used. The outer part (bleed) MAY only be used if the target aspect ratio differs from the source aspect ratio. The `rmd:MinWidth` tag MUST be set if interpolation is set to `linear` so it is clear when to start cropping. This is the only allowed tag apart from the `stArea` tags. |
rmd:SafeArea | FrameStruct | yes | An area that cannot be cropped into. This area holds the relevant information within the image. The `rmd:MaxWidth` tag MAY be set to define at which point this region will be used. Otherwise the value is calculated implicitly. This is the only allowed tag apart from the `stArea` tags. |
rmd:RecommendedFrames | Bag of FrameStruct | yes | A list of recommended crop regions for different output sizes. Those SHOULD only be considered if `Interpolation` is set to `step`. |
rmd:Interpolation | Closed Choice | yes | Specifies how intermediate sizes MUST be treated. The following values are allowed:
|
Currently, there is only one rule:
Field Name | Value Type | Description |
---|---|---|
rmd:Crop | Closed Choice | This attribute controls the level of modification allowed by the license restrictions of the image. The following values are allowed:
|
1 The CropArea
rule MUST still be applied if it was set.
Extends [XMP] Area (Rectangle). The fields are using the
stArea
and rmd
namespaces.
Field Name | Value Type (Unit) | Optional | Description |
---|---|---|---|
stArea:x | Real (relative) | no1 | X coordinate of the center of the area (point, rectangle) |
stArea:y | Real (relative) | no1 | Y coordinate of the center of the area (point, rectangle) |
stArea:w | Real (relative) | no1 | Width of the area (rectangle) |
stArea:h | Real (relative) | no1 | Height of the area (rectangle) |
rmd:MinAspectRatio | Real (dp) | yes2 | A minimum aspect ratio MAY be set (in dp). For this frame to be considered the crop aspect ratio MUST be greater or equal. |
rmd:MaxAspectRatio | Real (dp) | yes2 | A maximum aspect ratio MAY be set (in dp). For this frame to be considered the crop aspect ratio MUST be less or equal. |
rmd:MinWidth | Real (dp) | yes | If set, the crop with (in dp) MUST NOT be less for that frame to be considered. |
rmd:MaxWidth | Real (dp) | yes2 | If set, the crop with (in dp) MUST NOT be larger for that frame to be considered. |
1The Area fields are OPTIONAL for the Default Crop Area.
2Either MaxWidth or the AspectRatio fields MUST be specified for a frame to be considered.
The field namespace URI is http://ns.adobe.com/xap/1.0/sType/Dimensions#
and the prefix is
stDim
.
Field Name | Value Type | Description |
---|---|---|
stDim:w | Integer | Width of the image |
stDim:h | Integer | Height of the image |
stDim:unit | Closed Choice | Currently, pixel is the only allowed value. |
For reference, the XMP Area definition which is part of the [XMP] namespace is described here. This structure represents an area or a point. Similar to Dimensions (stDim) the “unit” field describes the specific unit being used. The following table gives an overview of the different types and properties being used.
Type | Definition |
---|---|
Point | Single point at stArea:x, stArea:y |
Rectangle | Center at stArea:x, stArea:y. Width and height defined by stArea:w and stArea:h |
The field namespace URI is http://ns.adobe.com/xmp/sType/Area#
The field namespace prefix is stArea
.
The RMD standard combines all information needed for responsive images into one namespace. It is possible that some information is already stored in a different place. The following table specifies how existing metadata should be treated.
Field Name | Action |
---|---|
SubjectArea | If SubjectArea is a Point type, the value SHOULD be used as a placeholder value for rmd:PivotPoint. If it is a Rectangle type, it SHOULD be used as a placeholder for rmd:SafeArea. |
SubjectLocation | If SubjectLocation is specified and SubjectArea is not a Point type, then SubjectLocation SHOULD be used as a placeholder value for rmd:PivotPoint. |
XMP-cc:License | If the image contains a popular restrictive license such as the Creative Commons NC license, rmd:AllowedDerivates MUST be set to none. |
The default behavior for cropping MUST follow these rules:
The recommended way to process the image is described in the activity diagram which is referenced in the appendix.
The following is a collection of use cases where art direction is used:
Universal Images Filter for Thumbor: A reference implementation in Python for a web service that can handle images with embedded responsive metadata.
Thumbor Universal Image Prototype: The dependencies required to set up an image server running Thumbor and Thumbor-Universalimages.