The srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size
Questions tagged [srcset]
390 questions
4
votes
3 answers
Wordpress: srcset gets HTTP instead of HTTPS in all posts
In Wordpress 4.4 images get automatically a srcset attribute. My problem with this was the following (I solved it while I was writing this question, see my answer below):
in order to transit everything to https, I replaced all the src="http://...…
Armfoot
- 4,663
- 5
- 45
- 60
4
votes
1 answer
Get the currentSrc of responsive image on Safari
I am trying to define a placeholder for when I click an image with photoswipe plugin. I would like to define exactly the same version of my responsive image as the image displayed on my screen.
data-srcset="
http://url.com/img-240.jpg 240w,…
BrownBe
- 977
- 3
- 11
- 23
4
votes
1 answer
Why is srcset causing images to download multiple times?
I have the following image tag using the srcset and sizes attributes to insert a responsive image:
![]()
sea_monster
- 659
- 3
- 8
- 18
4
votes
2 answers
Responsive ![]()
tag retrieving wrong src
I've been trying to have a certain image tag behave responsively, by retrieving the most appropriate src depending on context.
The tag looks like this:
Leonardo Baptista Lopes
- 580
- 5
- 13
4
votes
1 answer
img srcset based on img width rather than viewport width
I have a partial template that renders an article on a page which is basically an image and accompanying text. In a landing page I will have several articles on the page, with varying classes, the lead article will be full width, secondary articles…
Keegan 82
- 394
- 2
- 11
4
votes
2 answers
HTML srcset Specification: Clarification
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:
Manngo
- 14,066
- 10
- 88
- 110
4
votes
2 answers
Does `size` need to be used with `srcset`, what are the pros / cons?
Does size need to be used with srcset ? Ive got a site that has a large image pretty much full screen apart from a 50px board all the way round. The proportion of this image dosnt need to change depending upon different screen proportions / sizes.…
sam
- 9,486
- 36
- 109
- 160
3
votes
1 answer
Chromium using wrong (?) srcset with sizes
I'm not quiet sure if it's an actual bug or if I'm just misusing srcset/sizes. We have an img tag with these properties (I removed all other properties to keep it as simple as possible, example can be found here:…
Ivan Sieder
- 934
- 1
- 10
- 24
3
votes
0 answers
Safari load two images (dublicate with different sizes) from srcset in tag img
I had a problem in Safari when the page loaded in Devtools > Network drowser loaded two versions of the same image.
For example:
yNG3yARUuYG2BUZL___media_library_original_1080_1080.jpg
and
yNG3yARUuYG2BUZL___media_library_original_529_529.jpg
I…
Pavlo
- 31
- 2
3
votes
0 answers
How to use data-uri with srcset in html?
Does data uri works with srcset attribute?
Here how I use it but it does't change image source on 2x dpi display
Serhii Shliakhov
- 2,631
- 3
- 19
- 37
3
votes
1 answer
How to make browsers pick a smaller picture from srcset when downsizing window?
When opening the following code snippet on a small browser window, a first picture appears. When said window's size augments, the latter transitions to a second picture. However, when downsizing the window again, we are stuck with picture 2.
Gabriel R
- 97
- 6
3
votes
1 answer
Get img currentSrc from srcset before the image is downloaded
I am in the process of writing an image preloader for Vue.js. The way I intend it to work is by scraping the DOM for any img elements and obtaining their currentSrc attribute, before looping through and preloading each of the images.
Consider the…
Ben Carey
- 16,540
- 19
- 87
- 169
3
votes
2 answers
Responsive Images srcset - Always picking the largest Image
I am trying to get responsive images working and I have this layout so far...
.container {
display:flex;
max-width:1000px
}
.col1 {
flex:1;
background:teal;
text-align:center;
}
.col2 {
flex:1;
background:wheat;
…
fightstarr20
- 11,682
- 40
- 154
- 278
3
votes
2 answers
How to use image_tag with srcset and active storage variant?
I would like to use image_tag srcset attributes with active storage variants
<%= image_tag(@assoc.photo,
srcset:[
[@assoc.photo.variant(resize: "600x600"), "1024w"],
[@assoc.photo.variant(resize: "800x800"), "1980w"]
],
…
Ben
- 660
- 5
- 25
3
votes
1 answer
Img Srcset Attribute Not Picking Smaller Image
The ![]()
element srcset attribute is consistently choosing the larger ![]()
src, even when the size media query is false.
Using a element to enforce image selection according to browser width worked well. I understand by this answer that…
Dylan Landry
- 1,150
- 11
- 27