I have written a JavaScript filler to implement srcset, but I need to clarify the specified behaviour.
While srcset allows you to specify conditions for width or resolution, I can’t work out whether it is OK to specify both. For example:
<img src="images/oh1x408.jpg"
srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,
images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w">
This is supposed to cover single and double resolutions, and smaller and wider screens.
I have seen no examples where both the width and resolution are specified. The question is:
Is the last image in the srcset example above within specs?
Is anything else in the example incorrect?
Thanks
No, you can only specify one of both. It seems, that you don't understand how the width descriptor works. As soon as you use the width descriptor, you won't need the x descriptor anymore.
Here is a example:
<img srcset="img-300.jpg 1x, img-600.jpg 2x" />
The above example can be also described with the width descriptor, it would look something like this:
<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" />
srcset is all about resolution switching (no art direction). While the density descriptor can only handle static width images, the width descriptor can also handle adaptive images using the sizes attribute. The width descriptor describes the width of each image candidate in physical pixels, the sizes attribute describes the (different) width(s) of the image in layout pixels.
Here is a more complicated example:
<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" />
The example above says we have 3 candidates one with a width of 300, another with 480 and last with a width of 720 pixels, additionally the image is displayed at 400 pixels if the viewport is min-width: 480px otherwise it is displayed at the full viewport width (100vw).
The browser then automatically calculates the width according to your sizes attribute. For example, if you are looking with a 360px wide device the sizes 100vw is taken (because it is lower 480px) and computed to 360px layout pixel. Then the browser calculates the density of each candidate by division: width descriptor / calculated size):
300 / 360 = 0.83
480 / 360 = 1.34
720 / 360 = 2
And then the browser chooses the best candidate for the device depending on the pixel ratio of your device. So it takes the 480 wide image on a 1x device and the 720 wide image on a 2x device.
And as you see, you don't need to use density descriptor anymore. The density descriptor is simply a shorter version.
And yeah, there is already a polyfill handling this just fine.
No, both is not allowed. The srcset spec says that the attribute is made up of image candidate strings, separated by commas, and that each such string has
Zero or one of the following:
A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing
the width descriptor value, and a U+0077 LATIN SMALL LETTER W
character.
A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero
representing the pixel density descriptor value, and a U+0078 LATIN
SMALL LETTER X character
Related
In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.
Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?
Does 1x means a pixel density of 72pixels/inch
Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.
#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.
#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.
#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.
I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)
I understand that the srcset is used to determine which image to load based on the dpi of the device. I came across this example on the Google Web Fundamentals which seems to use the w unit along with the vw unit which just happens to be the 1 % ofviewport width:
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
Help me understand what the unit of measure for this is and how I can use it?
According to MDN the w refers to:
a width descriptor (a positive integer directly followed by w).
The width descriptor is divided by the source size given in the sizes
attribute to calculate the effective pixel density.
Additionally, the W3 states:
The user agent will calculate the effective pixel density of each
image from the specified w descriptors and the specified rendered size
in the sizes attribute. It can then choose any of the given resources
depending on the user’s screen’s pixel density, zoom level, and
possibly other factors such as the user’s network conditions.
If the user’s screen is 320 CSS pixels wide, this is equivalent to
specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On
the other hand, if the user’s screen is 1200 CSS pixels wide, this is
equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes
attribute, the user agent can choose the correct image source to
download regardless of how large the user’s device is.
Example 13 on the W3 page provides additional detail.
w is the intrinsic width of an image. It's the number you get when you right click the image and select Get Info on Mac, or Properties on Windows.
Why do you need to specify w? Because the first value of the srcset attribute only points to the link to load the image. It says nothing about the width of an image. The browser can't tell the dimension of an image until it has actually been loaded.
And why does the browser need to know the intrinsic width of an image?
Here is what browsers do when loading an image:
look at its device width
look at sizes and figure out which image size will be best to choose
look at the reference list in srcSet and choose the image whose size matches, or is bigger than the number above.
To borrow the sample code from MDN:
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
A common practice is include the intrinsic image width in the image path. However, there is nothing that stops you from lying like this:
<img srcset="elva-fairy-480w.jpg 600w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
This means that if a browser with a viewport width of 480px loads the page, the max-width: 600px condition will be true, and the browser has a slot of 480px wide to load image.
The image elva-fairy-480w.jpg will be loaded, as its intrinsic width (600w - inflated!) is closest to the slot size.
So there is probably no harm if you overstate the intrinsic width of your image.
What if you understate the intrinsic width?
<img srcset="elva-fairy-480w.jpg 280w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
On a viewport width of 480px, the image elva-fairy-800w.jpg will be loaded instead because elva-fairy-480w.jpg is reported to be 280w and doesn't meet instruction in sizes.
So understating the intrinsic width of an image will result in the browser loading an overly large image, which defeats the very purpose of responsive iamges.
I haven't thought through all the ramifications from lying about the image's intrinsic width though.
i Need Business card height and width in pixels on web, because i have created business card design by HTML and CSS in my application. here i can give print commend to print business card.
Now whats the width and height in pixel i use, so that it will correctly printed on actual business card size (3.5 and 2 inch)
It should be:
height: 336px
width: 192
=
height: 3.5in
width: 2in
Inches are valid CSS lengths just use those.
Absolute length units represents a physical measurement and when the physical properties of the output medium are known, such as for print layout. This is done by anchored one of the unit to a physical unit and to defined the other relatively to it. The anchor is done differently for low-resolution devices, like screens, and high-resolution devices, like printers.
Length # MDN
CSS units and dots-per-inch
The unit in/inch doesn't represent a physical inch on screen, but represents 96px. That means that whatever is the real screen pixel density, it is assumed to be 96dpi. On devices with a greater pixel density, 1in will be smaller than 1 physical inch. Similarly mm, cm, and pt are not absolute length.
Some specific examples:
1in is always 96px, 3pt is always 4px, 25.4mm is always 96px.
From my experience up to now the pixel size is something very relevant and intepreted differently based on many factors. My question is how do pixels work in html pages.
For example we can set the width and height of an image:
<img src="lalala.jpg" width="100px;" height="100px;">
What does 100 pixels actually mean?
How are the 100 pixels translated on screen?
How are the 100 pixels translated if on print papper?
To be more specific. If I set the image size to 100px then is it going to be the same size in inches on different screen sizes ? Ad if so..Is it going to be the same size if I print the same page while using a different screen size?
In HTML, pixel lengths of the height and width attributes are controlled by CSS. In some instances, these are refereed to as "CSS pixels". HTML itself does not provide a definition for what a pixel should represent (thus why I added the css tag into your question).
CSS itself has its own Units and Values documentation which defines the Pixel in its section on Absolute Lengths:
5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:
unit definition
---- ----------
‘cm’ centimeters
‘mm’ millimeters
‘in’ inches; 1in is equal to 2.54cm
‘px’ pixels; 1px is equal to 1/96th of 1in
‘pt’ points; 1pt is equal to 1/72nd of 1in
‘pc’ picas; 1pc is equal to 12pt
100 pixels is equal to roughly 1.041in, which itself is equal to roughly 2.65cm.
I'm not going to answer the further questions you've asked about different monitors and printing as this would make my answer incredibly long and dull. If you want to find out these answers yourself, a good place to start is in the same document I've already linked, which goes into detail about the Reference Pixel. Values in CSS are based upon a value of 96dpi (which means that 96 pixels on a monitor which has a pixel dencity of 96dpi will be equal to one inch if you were to measure it with a ruler).
Because every screen has diferent pixel size HTML/CSS or whatever software language is going to be made never gonna match the physical pixel size.
To calculate pixel size you need Hardware machine language not software.
I want to know how could I start using the HTML srcset img attribute in my mobile apps. Or Is there any other jQuery plugin which helps me to solve image resolution problem.
<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
In short, Srcset is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types. The usage is really simple, you just provide a lot of different images separating them with a comma like this: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Here is an example: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
This is a longer answer which explains things in more details.
Difference between srcset and picture. Both srcset and picture does approximately the same things, 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. 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.
Descriptors are just a way to show what kind of image is hidden behind the resource. There are various kinds of descriptors:
density descriptor. srcset="image.jpg, image-2X.jpg 2x"
The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x. Good variant to target retina displays.
width descriptor. srcset="image-240.jpg 240w, image-640.jpg 640w". I am sure this is self explanatory. The only problem is that by itself width descriptor is not really helpful. Why? read here
size descriptor, which only makes sense if you use width descriptor. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. The instructions for the browser would look like this: (max-width: 480px) 100vw — if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width. (max-width: 900px) 33vw — if the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. And 254px is when there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met.
Just for completeness will add here that there is an image-set() attribute for a background image in CSS and some other helpful link here
Here is a detailed guide on srcset along with code samples.
srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device’s resolution.
Each comma-separated item in srcset has:
Image URL, e.g. http://ik.imagekit.io/demo/default-image.jpg or relative path /demo/default-image.jpg
An empty space
The actual width of the image or display density:
Either using display density descriptor, for example, 1.5x, 2x etc.
Or, using width descriptors, for example, 450w. This is the width of the image in pixels.
Using display density descriptor
The syntax for display density descriptors is straightforward. srcset provides a comma-separated list of image resources along with display density it should be used, for example1x, 2x etc.
<img src="image.jpg"
srcset="image.jpg,
image_2x.jpg 2x"
/>
Live demo - https://imagekitio.github.io/responsive-images-guide/srcset-density.html.
Using width descriptor
The syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.
<img src="image.jpg"
srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 900w"
/>
This lets the browser pick the best image
Using width descriptor allows the browser to pick the best candidate from srcset based on the actual width needed to render that image on that particular display at runtime.
Note that display pixel density is also taken into account by the browser while calculating the required width. 😎
For example, assuming an image takes up the whole viewport width - On a 300px wide screen with DPR 2, the browser will pick medium.jpg because it needs a 300x2=600px wide image. On a 300px wide screen with DPR value 3, the browser will select large.jpg because it needs a 300x3=900px wide image.
Demo - srcset with width descriptor
Let see this in action with a live demo - https://imagekitio.github.io/responsive-images-guide/srcset-width.html.
Here is a good article on the srcset attribute and how to use it. srcet allows you to declare a set of images to be displayed on different viewport sizes. You just have to save and image at different resolutions e.g. banner-phone-HD.jpeg would be the highest resolution.
Exmaple:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
The above would serve banner-phone.jpeg to devices with viewport width under 640px, banner-phone-HD.jpeg to small screen high DPI devices, banner-HD.jpeg to high DPI devices with screens greater than 640px, and banner.jpeg to everything else.
There are also other methods like CSS media queries you can use to produce the same effect.
I am not aware of any JQuery plugins which would help with this.