Skip to content

Conversation

tdelmas
Copy link
Collaborator

@tdelmas tdelmas commented Dec 4, 2021

In markdown posts, images integrated like that:

[title and alt](/image/exemple.png)

Will generate the html for the image. The image will be centered with the following properties:

  • Multiple sizes available depending on the resolution so the UA can select less heavy image
  • webp format with a png fallback
  • The "title and alt" will be used for alt and title attributes

Images integrated like that:

[title and alt](/image/exemple.png "Some description")

will have in addition a figcaption with that description.

All image are centered.

The magic happen there: https://github.com/letsencrypt/website/pull/1364/files#diff-ca8843b42c6efe94a57c66f9aa842be46241b02bb5db66cd2d6cb6ea5143a012

Advantages:

  • Browsers can download optimized/smaller pictures
  • less complex html inside Markdown
  • Alt text is visible in title, so everybody can benefit from it (not just screen readers). And because it's visible, mistakes can be caught.
  • It removes inline css for centering

@tdelmas
Copy link
Collaborator Author

tdelmas commented Dec 4, 2021

@scottmakestech If you want to take a look

@scottmakestech
Copy link
Collaborator

@tdelmas Looks interesting, excited to try this out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants