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
0 answers
Understanding srcset in Wordpress and why it's not working
I am really struggling to understand how Srcset works in Wordpress.
I have added my custom sizes like so:
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size(…
Mr Toad
- 202
- 2
- 12
- 41
4
votes
4 answers
How to specify the width and height of an image while keeping it responsive at the same time?
While using srcset for responsive images, the code looks something like this:
So, now when I am running lighthouse for that page, then it is saying…
So, now when I am running lighthouse for that page, then it is saying…
jitesh
- 53
- 5
4
votes
1 answer
w and px of the srcset attribute in html
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…
Sara
- 245
- 4
- 11
4
votes
0 answers
Why does an image with src and srcset make a redundant network request in Chrome?
Consider the example:
noomorph
- 837
- 1
- 6
- 14
4
votes
2 answers
How does the browser pick the right image using ![]()
"sizes" and "srcset" attributes?
How does the srcset attribute determine the correct image in conjunction with the sizes attribute? Take this image for example:
![Demo image]()
Hakim
- 452
- 4
- 15
4
votes
1 answer
Gutenberg custom block with responsive images
I followed this tutorial on how to build a custom WordPress Gutenberg Block: https://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/
This first block is nice, but I would like to use a custom images size in this block. This…
Luke
- 127
- 2
- 11
4
votes
5 answers
Understanding srcset and sizes in combination with HiDPI monitors
I have been into CSS for quite a while now, but srcset and sizes for the image element confuse me. Here is an example that I thought would work.
![Background image flowers]()
Bram Vanroy
- 27,032
- 24
- 137
- 239
4
votes
2 answers
srcset and sizes attribute: Will a retina device choose the correct double size image?
Unfortunatly I do not have a retina device to test. This is my code:
Blackbam
- 17,496
- 26
- 97
- 150
4
votes
1 answer
Defining srcset without original size
Is there a way to add scrset to an image without specifying the original width in the sizes attribute?
For example, I have this image:
The original…
The original…
attila.polakovics
- 43
- 5
4
votes
1 answer
Wordpress: adding ‘srcset’ and ‘sizes’ attributes to image from customizer
Wordpress automatically adds srcset and sizes attributes to all images coming from posts. That’s very neat.
But how to I get WordPress to add those attributes to images that come from a customizer input?
In my case: a default image for posts. That…
dig
- 101
- 1
- 6
4
votes
1 answer
Specifying both image size and pixel density in srcset
Here's my img tag:
Sammy
- 3,395
- 7
- 49
- 95
4
votes
1 answer
Why an img with srcset requests more than 1 version of the image
I have the following tag and checking the network panel, I see it is not working as I was expecting. I don't know if this is the normal behaviour for local or good-bandwith testing or if there is something wrong with my code:
![]()
Vandervals
- 5,774
- 6
- 48
- 94
4
votes
2 answers
Responsive images using srcset/sizes isn't respected by Safari iOS
I have the following
which works fine on normal and hiDPI…
which works fine on normal and hiDPI…
George Katsanos
- 13,524
- 16
- 62
- 98
4
votes
1 answer
CSS image-set / background-image. Alternative to img srcset? Does anyone use this?
Just like "srcset" for the html ![]()
tag, there is a CSS background-image property called "image-set".
W3C Info: https://drafts.csswg.org/css-images-3/#funcdef-image-set
It is currently compatible with Chrome, Safari, Opera, and Android Browser.…
Daniel Chase
- 41
- 2