Srcset Pixel Density Analyzer

The attribute listing several versions of an image has two different grammars, and mixing them is the mistake that makes the optimisation stop working. With density descriptors you state how many physical pixels each file carries per CSS pixel — useful when the image has a fixed size. With width descriptors you state each file's real width in pixels, and the browser chooses based on the available space.

Paste the attribute contents and the page splits each entry, showing URL, descriptor and which of the two grammars is in play. It also warns when both appear together, which is invalid: the browser then ignores the whole attribute and falls back to the plain source, silently undoing all the work of generating the variants.

One detail almost everybody forgets: with width descriptors, the sizes attribute is mandatory. Without it the browser assumes the image spans the full viewport width and usually downloads a larger file than needed. It is the commonest explanation for a page that generated six variants and still pulls the biggest one on a phone.