Opened 2 years ago

Closed 2 years ago

#5986 closed defect (bug) (fixed)

Improve image markup

Reported by: jonoaldersonwp's profile jonoaldersonwp Owned by: coffee2code's profile coffee2code
Milestone: Priority: high
Component: Photo Directory Keywords: performance seo

Description (last modified by jonoaldersonwp)

Images in grid displays like the one on and and 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.

Change History (4)

#1 @jonoaldersonwp
2 years ago

  • Description modified (diff)

#2 @coffee2code
2 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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.

#3 @jonoaldersonwp
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#4 @coffee2code
2 years ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from reopened to closed

In 11461:

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

Props jonoaldersonwp.
Fixes #5986.

Note: See TracTickets for help on using tickets.