Attributes: src and srcset
The src attribute contains a URL to the desired image file. According to MDN Web Docs, if the user's broser supports the srcset attribute, the src attribute "is treated like a candidate image with a pixel density descriptor 1x, unless an image with this pixel density descriptor is already defined in srcset, or unless srcset contains w descriptors."
The srcset attribute consists of "one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of:
- A URL to an image
- Optionally, whitespace followed by one of:
- A width descriptor (a positive integer directly followed by
w). The width descriptor is divided by the source size given in thesizesattribute to calculate the effective pixel density. - A pixel density descriptor (a positive floating point number directly followed by
x).
- A width descriptor (a positive integer directly followed by
If no descriptor is specified, the source is assigned the default descriptor of 1x. It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute. Duplicate descriptors (for instance, two sources in the same srcset which are both described with 2x) are also invalid. If the srcset attribute uses width descriptors, the sizes attribute must also be present, or the srcset itself will be ignored."
Attribute: sizes
The sizes attribute consists of "one or more strings separated by commas, indicating a set of source sizes. Each source size consists of:
- A media condition. This must be omitted for the last item in the list.
- A source size value.
Media conditions describe properties of the viewport, not of the image. For example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px. Because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based on the width information. Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. The selected source size affects the intrinsic size of the image (the image's display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect. A source size value can be any non-negative length. It must not use CSS functions other than the math functions. Units are interpreted in the same way as media queries, meaning that all relative length units are relative to the document root rather than the <img> element, so an em value is relative to the root font size, rather than the font size of the image. Percentage values are not allowed. Additionally, you can use the value auto to replace the whole list of sizes or the first entry in the list. It is only valid whn combined with loading="lazy", and resolves to the concrete size of the image."
Concept: Art Direction
According to Microsoft Corporation, "art direction is the management of all aspects of the project. An art director is responsible for coordinating and supervising the work of designers, artists, and other creatives who are working on the project at hand. Art direction deals with all forms of visual media, but not just the creation of it. An art director may have a hand in photography, web design, logo creation, or a billboard. They act as a liaison between the artistic team and the clients, and frequently communicate information about a project from one side to the other side, including client feedback. With information from a client and a design brief, they set parameters for a team to work within, and set the tone for a given project."
Summary
This page contains general information about art direction. This page also contains specific information about the following HTML attributes:
srcsrcsetsizes