Stack Overflow
Stack Overflow

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
0
votes
1 answer

Lazysizes srcset images getting browser to determine total page size before images load

I'm using the lazysizes plugin in conjunction with srcset on a fluid layout. I can't figure out how to get the browser to load the page to the correct length rather than extending the page as you scroll. I have made a codepen using the bootstrap…
batas
  • 65
  • 1
  • 7
0
votes
1 answer

Responsive Images using srcset and sizes

I'm trying to figure out why in my code bellow, the browser is loading the large and small images when my resolution is around 400px. If I'm in a small resolution, I just need to load the small image, right? Even in retina display, which should load…
Italo Borges
  • 2,355
  • 5
  • 34
  • 45
0
votes
1 answer

Bootstrap media object breaking when using srcset

I am using Bootstrap media objects but they seem to be breaking when I use srcsets. The media-body is offset to the right and with overflow: hidden it cannot be seen. When I delete the srcset attribute in dev tools it will fix the problem. The…
James Fenwick
  • 2,190
  • 1
  • 20
  • 30
0
votes
0 answers

Srcset not working for a 2x iMac 5K Retina as it does with 1x macbook pro display

I have been practicing with images and how to make them as best responsive and preforming as I could. I use the same code to test on an iMAC 5K Retina 2x display and a macbook pro 13.3 1x display. Here is my test code:
Ahmed Magdy
  • 331
  • 1
  • 3
  • 9
0
votes
0 answers

All images are being downloaded despite of using the srcset and sizes attributes

I am learning how to serve different images with different sizes to the browser to pick the best appropriate according to the width of the window but I always find out that the browser downloads the large sizes of the images all the time no matter…
Ahmed Magdy
  • 331
  • 1
  • 3
  • 9
0
votes
2 answers

How to open a correct img from srcset in a new window?

I am trying to open an image in a new window and load the correct image based on srcset in order to open the right image size based on resolution html:
100%x200
rob.m
  • 9,843
  • 19
  • 73
  • 162
0
votes
2 answers

Picture srcset and isotope grids that change image width on click not viewport

hoping someone can shed some light - I have isotoped items that have fixed column widths which are toggled not by viewport width but by user interaction. The fixed image widths are 105px, 160px, 333px and 1200px. I would like to use picture srcsets…
user2214369
0
votes
1 answer

Specifying image for pixel density with srcset and sizes

I am trying to get to grips with srcset but I am having trouble finding a detailed reference. From what I understand I can do something like this to specify an image for a mobile phone.
Guerrilla
  • 13,375
  • 31
  • 109
  • 210
0
votes
1 answer

Why is the srcset attribute only working correctly when used before the src attribute in img tags

I'm having a mystery here. The issue itself is worked around by now, but I still can't see the actual cause: On our image sharing site Pixabay.com we recently implemented the srcset attribute for img tags on search results. You can see that in…
Simon Steinberger
  • 6,605
  • 5
  • 55
  • 97
0
votes
2 answers

Safari 9 ignores picture element

I am trying to implement art direction and make the element show a square image on mobile and a landscape image on all other devices. For some reason, Safari keeps falling back to the tag, when it should be able to recognize the…
Jae Zee
  • 3
  • 1
  • 4
0
votes
1 answer

Chrome 45 on Galaxy S6 not choosing right img based on srcSet attribute

Chrome 46 on my desktop loads the right images when i resize the browser to different widths. However on my phone it loads the largest image! the 1024w one. When i go to http://html5test.com/ on my phone it says its supported. Can anyone confirm…
neptunian
  • 410
  • 4
  • 17
0
votes
1 answer

Picturefill not working in IE10 on cache clear

I am using elements, with Picturefill for cross-browser support. In IE10 (it is fine in 9 and 11) it works perfectly on an ordinary page-load, but no image is displayed following ctrl+f5. (If I then open the dev tools or change the zoom,…
CarrieVS
  • 140
  • 1
  • 7
0
votes
2 answers

How to modify the the_post_thumbnail function on wordpress?

First of all: is it even possible? I'd like to get a function that returns an srcset tag to make my wordpress layout responsive. This is important for me because my wrapper is 1400 wide, which is good for screens wider than 1400 @1 or 700 @2,…
Vandervals
  • 5,774
  • 6
  • 48
  • 94
0
votes
1 answer

JavaScript: Partial Feature Detection (srcset)

I am trying to write a JavaScript patch for older browsers. Normally I would begin with some feature-detection code, such as this: var img=new Image(); if(img.getAttribute('srcset')) … // already support but I have a problem with browsers which…
Manngo
  • 14,066
  • 10
  • 88
  • 110
0
votes
1 answer

img srcset and sizes not working as I would expect

I am currently trying to make better responsive images on my site. After some research I found the the srcset and sizes attributes. My goal here is the following: When the screen size is above 600px or below 300px I want to serve a 250x250…
BrainStone
  • 3,028
  • 6
  • 32
  • 59
1 2 3
…
25
26