I'm trying to have a picture tag with WebP support.
( load image-full if the screensize is over 1024px, image-1024 for max-width 1024px, image-768 for max-width 768 px and image-500 for max-width 500px )
I've got this code, and w3 validator is…
So, I'm trying to make a responsive image component that will load an appropriate size of image depending on the screen resolution/pixel density. As I understand it, the srcset attribute was designed for exactly this, but I can't get it to do what I…
I'm working on optimization on my page and it was all going smoothly since I came up with an idea to implement srcset and sizes attributes to my . I create php function that constructs img object and fills srcset attribute with new scaled…
I've been working hard on trying to get responsive images working on this website I'm building and just when I thought it's going well, I look at it on the iPad retina screen and it's selecting the wrong image. Not only is it the wrong size but it's…
should I write this
srcset="small.jpg 1x 500w, medium.jpg 2x 1000w, large.jpg 3x 1500w"
or this
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
are the two expression the same?
From this answer
Dynamically Add Images React Webpack
I know, how to use usual image src with React + Webpack.
How can I get the same result with srcset 2x having a space inside?
It looks like I can't import from a string like this:
import picture…
I'm reading up on responsive images in HTML5 and have a question.
When would you use the x-descriptor? If for example you have different resolution versions of the same image why would you ever not use the w-descriptor?
As I understand it if you…
I used picture element for responsive images in different sizes per viewport a long time.
it worked fine, but now I am forced to switch over to responsive with srcset and sizes and I try to rewrite my picture element to the IMG-style.
After…
This validates, and I'm not seeing…
Now this can also be in a format like
