![]() So if baby-s.jpg is 300×450, we label it as 300w. But instead of labeling them with a pixel density ( x) we’re labelling them with their resource width, using w descriptors. We’re still providing multiple copies of the same image and letting the browser pick the most appropriate one. Perhaps the easiest-possible responsive images syntax is adding a srcset attribute with x descriptors on the images to label them for use on displays with different pixel-densities. You could try to serve entirely different images using this syntax, but browsers assume that everything in a srcset is visually-identical and will choose whichever size they think is best, in impossible-for-you-to-predict ways. The syntax is for serving differently-sized versions of the same image. ![]() What about responsive images in CSS with background images?.Where do you get the differently-sized images?.There is a lot to talk about here, so let’s go through both syntaxes, all of the related attributes and values, and talk about a few related subjects along the way, like tooling and browsers.
0 Comments
Leave a Reply. |