Questions tagged [srcset]

The srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size

390 questions
12
votes
1 answer

Using image_tag with srcset attribute?

I try to use an srcset attribute inside an image_tag but I can not make it work. Im not sure if it is a syntax error or it generally does not work in an image_tag. Is it possible to use a srcset attribute in an image_tag? If yes, how?, and if not…
trickydiddy
  • 577
  • 6
  • 26
12
votes
3 answers

Detect used srcset or picture tag source with JavaScript

When you're using srcset like this: Or using a picture tag like this:
Tyler V.
  • 2,471
  • 21
  • 44
12
votes
1 answer

Use Of the Sizes Attribute for Reponsive Images

I'm in the process of trying to wrap my head around using srcset and sizes on img tags. Whilst I think I have grasped the basics – mainly thanks to this article – I'm struggling in practical application of the sizes attribute. In all the examples I…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
12
votes
2 answers

img srcset - disregard pixel density

I have two images, one is 1000 x 800 px ("large"), and one is 200 x 200 px ("small"). I want to use srcset / sizes / picturefill to display the small image when the screen is less than or equal to 500 CSS pixels wide, and the large image…
mark
  • 4,678
  • 7
  • 36
  • 46
10
votes
3 answers

versus ?

I can't seem to discern a difference in function or meaning between using the picture element or just using the img element with the srcset attribute. I understand how they work; I just don't fully understand why or when to choose one over the…
10
votes
2 answers

Explain `w` in `srcset` of image

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 %…
vamsiampolu
  • 6,328
  • 19
  • 82
  • 183
10
votes
3 answers

img not responding to srcset specified dimensions

I wanted to implement the responsive images using srcset, as described here, so the image src that the user loads is the most similar to his resolution. The thing is that I made this test and it doesn't respond to viewport changes,
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
10
votes
1 answer

Is there something wrong with my srcset definition, or is current browser support just weak?

I'm trying to get my head around the new 'srcset' attribute of 'img'. I've built a simple test page, but the behavior I see from browsers is surprising. First, here's the test page:
slamci
  • 424
  • 1
  • 5
  • 13
9
votes
2 answers

Is it compulsory to use the sizes attribute with w-descriptors in srcset?

I have read through a number of articles on using srcset for both device-pixel-density adjustments as well as art direction: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes attribute by Rich…
HubCap
  • 323
  • 5
  • 14
8
votes
1 answer

Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte. There are two different possibilities on how to use the…
Blackbam
  • 17,496
  • 26
  • 97
  • 150
8
votes
1 answer

Responsive image, picture vs img with srcset, fallback issue

After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that. My case: I have almost all my…
AngelLestat
  • 127
  • 2
  • 7
8
votes
1 answer

Responsive images: img srcset + Bootstrap, wrong size image gets loaded

I'm using Bootstrap with Responsive Images. I want to optimize load times by offering multiple image sizes to browsers. According to this article, a plain approach with srcset like this is good for letting the browser pick the optimal image…
Andrew
  • 817
  • 2
  • 10
  • 21
7
votes
3 answers

Width of the image displayed is not exactly 100vw when the user agent selects image of width 3200px

The user-agent selects one of the images below based on device pixel ratio and viewport size. But i have noticed that only when user-agent selects ./emmaHQbanner.jpg, the width of image displayed is not exactly 100vw instead its little more than…
user7171623
7
votes
1 answer

Correct sizes for img srcset in a container element?

Using the LazySizes plugin (https://github.com/aFarkas/lazysizes) I'm trying to build a grid of images, each with an alternate version for smaller viewports. The grid (container) is a simple column/row based percentage based layout. I'm not quite…
Staffan Estberg
  • 6,795
  • 16
  • 71
  • 107
7
votes
1 answer

Can I use for both height and width-constrained images?

I have a slideshow sort of thing where images will expand as large as they can, but not exceed the viewport's width or height. Basically object-fit: contain. I'd like to make these images responsive, since "as large as they can" for a phone and a…
Tigt
  • 1,330
  • 2
  • 19
  • 40
1
2
3
25 26