Skip to main content

Image Embed Style Guide

This guide defines how to embed images in posts so sizing, captions, and SEO metadata are consistent.

Principles​

  • Use HTML figure + img for predictable layout.
  • Control size with a max-width on the figure container.
  • Keep alt descriptive and factual; keep captions short.
  • Include a title attribute for SEO titles when the platform surfaces it.

Sizes​

  • small: max-width: 560px
  • medium: max-width: 760px
  • wide: max-width: 980px

Base Embed Pattern (No Caption)​

<figure style={{ margin: "20px auto", maxWidth: "760px" }}>
  <img
    src="https://cdn.gristleking.com/<path>/<file>.JPG"
    alt="Describe what the image shows, not why it matters."
    title="Short SEO title"
    style={{
      width: "100%",
      borderRadius: "8px",
      border: "3px solid var(--metsci-primary)",
      boxShadow: "0 4px 12px rgba(217, 74, 24, 0.12)",
    }}
  />
</figure>

Example (Medium, No Caption)​

<figure style={{ margin: "20px auto", maxWidth: "760px" }}>
  <img
    src="https://cdn.gristleking.com/example/example-image.JPG"
    alt="Twenty film squares cut for areal-density measurement."
    title="Film squares for areal-density measurement"
    style={{
      width: "100%",
      borderRadius: "8px",
      border: "3px solid var(--metsci-primary)",
      boxShadow: "0 4px 12px rgba(217, 74, 24, 0.12)",
    }}
  />
</figure>

Optional Caption (Only When Visually Bound)​

Use a caption only if you also add clear visual separation, such as a bordered figure background or a caption rule that makes it read as a label rather than body text.