Browse Design & Media

Design & Media

Upload and use an image

Upload approved media, write useful alt text, retain attribution, reuse responsive variants, and verify public output.

3 min readUpdated 8 Aug 2026

Outcome

You will upload an approved image, review its metadata, insert or reuse it, and confirm that the public page remains accessible and responsive.

Before you upload

CheckRequirement
RightsYou own the image or can publish it with the required credit
PrivacyNo credentials, personal data, private screens, or internal addresses
FormatA web-suitable image with enough resolution for its intended use
FilenameShort, descriptive, lowercase, and task-oriented

Required role: Admin or Superadmin.

Open Media Library

Choose Media Library in the admin header. Use Library for existing media or Pexels for licensed stock results with attribution.

Upload the file

Drop the file into Drop files here or click the upload area to browse. Wait for the item to appear before closing Media Library.

Review responsive variants

Select the item. Size Variants exposes Original, Small 400px, Medium 800px, and Large 1200px when available. Use the smallest variant that remains sharp in its rendered slot.

A selected fictional image exposes responsive size variants and the metadata required before reuse.
A selected fictional image exposes responsive size variants and the metadata required before reuse.

Write meaningful Alt Text

Describe the image’s purpose in context, not every visible detail. Omit “image of”. If the image is decorative and the component supports it, use empty alt text deliberately.

Retain attribution

For licensed media, review the photographer or author, source, and their URLs. Clear attribution only when you have confirmed that no credit is required.

Add tags and save

Add durable search tags when they will help reuse. Choose Save Changes and reselect the asset to confirm Filename, Alt Text, Attribution, and Tags persisted.

Insert or reuse the image

In BlockNote, a post Featured Image, Branding, or a block editor, choose the existing Media Library item instead of uploading duplicates. Confirm the same approved asset is being reused.

Understand the crop boundary

The current Media Library does not expose a destructive crop editor. Crop the source in an approved image tool before upload when exact framing is required. For background images, choose the available fit behavior and remember that “fills entire area” may crop edges.

Do not claim a crop was saved unless the current component exposes and persists that control.

Verify public output

  1. Preview desktop and narrow widths.
  2. Confirm the image loads without distortion or overflow.
  3. Check important content is not clipped.
  4. Inspect alt text with accessibility tools.
  5. Confirm any visible attribution is correct.
The narrow fictional post keeps its text within the viewport after the Featured Image was reused on the Blog card.
The narrow fictional post keeps its text within the viewport after the Featured Image was reused on the Blog card.

Replace or recover

Replace the image in the content record before deleting a shared Media Library item. If the framing is wrong, upload a corrected source with a clear filename, update every use, verify, then retire the old asset.

If an image is missing or distorted

  • Confirm the media item still exists and its Original variant returns.
  • Try an appropriate responsive variant.
  • Check alt text and attribution persisted.
  • Inspect the block’s fit and dimensions.
  • Verify anonymous desktop and narrow output.

Publication gate: another reviewer must repeat upload, metadata, reuse, variant, accessibility, rights, desktop, and narrow checks. Exact in-product cropping remains unavailable.

Related guides