As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.
There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.
Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?
You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.
If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.
As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9.
In the mean time, you could use picturefill to add that support to non-supporting browsers.
Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.
It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.
Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.
For my approach, I did not use size, picture or any other property.
A code as simple as this appears to work:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
Related
What the specification says about cases when the same path (or probably the same sized images) appear with different pixel density descriptors?
The following example renders differently in desktop (Windows) Firefox 82.0b2 and Chrome 85.0.4183.121. The image appears natively scaled in FF and half the size in Chrome
<html><head></head>
<body>
<img src="testpicture.jpg" srcset="testpicture.jpg 2x">
</body>
</html>
The reason I'm asking is because a commercial CMS I use very often uses such output. In order to encourage them to avoid this I need a clarification. In this CMS the rendered content works mostly properly in FF, but in Chrome the rendering is sometimes unexpectedly scaled or some image content not appears at all (probably relating to cache availability of different sizes).
Update: This is very likely a chromium issue when the browser due to internal logic related to caching chooses a wrong variant. But until it finally fixed, I'd rather not post my own answer
The srcset attribute is a feature that enable responsive images. Specifically srcset gives the browser a hint what resolution images are available. In your case there is only on definition which hints at one image (testpicture.jpg) which has double (2x) resolution. But since there is only one definition, the srcset attribute won't do nothing and could be omited.
A full example would look like this:
<img src="/files/16864/clock-demo-200px.png"
alt="Clock"
srcset="/files/16864/clock-demo-200px.png 200w,
/files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Check out the MDN documentation for the image element and their guide on responsive image for further details.
Let's say I have an image with actual size of 200x200 pixels. I insert it into a HTML page like this:
<img src="some.jpg" width="50" height="50">
Suppose there's no CSS styling for this image.
Will it be displayed consistently across all browsers and devices like a 50x50 image? Are there any exceptions?
This style is supported among all of the major browsers (IE, Firefox, Opera, Safari, and Chrome)
Keep in mind that when doing this, the user is still forced to download the full size image before it is rendered in the size you specified! If it is a particularly large image, it may be wise to downscale it with an image editor before you upload it.
The user is still receiving the original file but the browser is altering it through its respective rendering methods.
The only exceptions to this rule, and this isn't necessarily due to browser rendering but may be helpful to keep in mind, is that HTML 5 no longer allows for you to adjust by percentage -- you can only adjust by pixels (as you already are)
I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91
Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.
Testing jsbin:
http://jsbin.com/hulaconake/1/edit?html,output
Image tag I have:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/
I'm not having any issues in FF or Safari (both using picturefill).
iOS Chrome has similar problems.
Is my syntax wrong? Is there something going on I don't know about?
It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
In case you want to use different images or same image with different crops, use the picture element.
Responsive images can be technically differentiated between 2 types.
srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
density descriptor (x) (for static image sizes, Retina vs. normal resolution)
width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)
So img[srcset] is for resolution switching and picture is for different images reacting to your design
The srcset attribute of the img element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image.
The picture element helps authors to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.
Both these give the author control over displaying images based on the device resolution;thus making the images responsive. So what is the main difference between them?
I did find some examples on the picture element draft, but still fail to understand the difference. Here are the examples:
Using srcset attribute:
<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
alt="A rad wolf" width="500" height="500">
Using picture element:
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Both srcset and picture do approximately the same thing, but there is a subtle difference:
picture dictates what image the browser should use, whereas
srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future browsers would become smarter and smarter with selecting the appropriate image.
The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.
2017 update
From http://usecases.responsiveimages.org/:
The srcset attribute
Allows authors to define various image resources and “hints” that assist a user agent to determine the most appropriate image source to display. Given a set of image resources, the user agent has the option of either following or overriding the author’s declarations to optimize the user experience based on criteria such as display density, connection type, user preferences, and so on.
The picture element
Building on srcset, this specification defines a declarative solution for grouping multiple versions of an image based on different characteristics (e.g., format, resolution, orientation, etc.). This allows the user agent to select the optimum image to present to an end-user based on the user agent's "environmental conditions", while also providing the ability to "art direct" images.
Environmental conditions are CSS media features (e.g., pixel-density, orientation, max-width) and CSS media types (e.g., print, screen).
Art direction means transforming an image to best match the space available to it. For example, a landscape image featuring dog in front of a house can be left as is on a typical desktop screen, but on a narrow portrait mobile screen, we might want to crop the sides of the house and focus on the dog.
picture uses CSS media queries, while srcset uses image candidate strings: width descriptors, e.g. 1024w, or pixel density descriptors, e.g. 2x.
Both specifications are widely supported among current browsers, with the exception of IE, old Android Browsers, and Opera mini. srcset is better supported by outdated browsers, namely Safari 7 through 9.2 See http://caniuse.com/#feat=srcset.
The relationship is described in clause 1.3 Relation to srcset of The picture Element draft. The description is somewhat vague, since it does not make it clear what it is being compared against, but for practical purposes, the W3C Editor’s draft The srcset attribute describes the design of srcset as a separate attribute (as opposite to its different role in the proposed picture element).
The two drafts are meant to address the same problems in different ways. The srcset attribute would let you specify a list of image URLs with special notations used to indicate what widths or pixels densities they are for. The picture element uses CSS media queries for the same purpose.
We had an approach to use the srcset attribute to provide not only a different resolution but also a different image section within a responsive design. The alternative image url was associated with "320w" in order to show only on smartphones in portrait mode.
Since Chrome is now supporting srcset it turns out that the browser always chooses the small image regardless of the actual viewport, probably due to its lower filesize. Does that mean we have to resort to other attributes and javascript again?