Improve image markup

[jonoaldersonwp]

Images in grid displays like the one on ​https://wordpress.org/photos/ and ​https://wordpress.org/photos/photo/ and ​https://wordpress.org/photos/author/anariel-design/ should:

• Use loading="lazy" and decoding="async"
• Use an srcset attribute, providing multiple w variants, targeting 1x, 1.5x, 2x variations.
• Use a sizes attribute describing the optimal sizing (optionally using a simplified value of 295px).
• Use an alt attribute of the image caption.

[coffee2code]

Fixed in [18228-dotorg]:

Photo Directory theme: Improve image markup in grid display.

• Add loading="lazy" and decoding="async"
• Add srcset attribute.
• Add alt attribute with the image caption.
• Remove use of figcaption since it was always hidden.

Props jonoaldersonwp, coffee2code.
Fixes #5986.

Of the suggestions, I only didn't implement the sizes attribute since the grid images are always rendered at the same dimensions.

[jonoaldersonwp]

Can you add height and width attributes then, please? :)
Otherwise, the lazy loading won't work correctly.

[coffee2code]

In 11461:

Photo Directory: Add 'width' and 'height' attributes to grid images.

Props jonoaldersonwp.
Fixes #5986.