Design & Media
Upload and use an image
Upload approved media, write useful alt text, retain attribution, reuse responsive variants, and verify public output.
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
| Check | Requirement |
|---|---|
| Rights | You own the image or can publish it with the required credit |
| Privacy | No credentials, personal data, private screens, or internal addresses |
| Format | A web-suitable image with enough resolution for its intended use |
| Filename | Short, 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.

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
- Preview desktop and narrow widths.
- Confirm the image loads without distortion or overflow.
- Check important content is not clipped.
- Inspect alt text with accessibility tools.
- Confirm any visible attribution is correct.

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
Add a summary, featured image, byline, and metadata
Prepare a post for Blog listings, category archives, search results, and social sharing without exposing private details.
Edit page content in the live editor
Use the visual editor canvas, block properties, autosave, device widths, and controlled preview without confusing a draft with public content.
Write with the BlockNote editor
Structure and format post content with headings, lists, links, media, and tables in the shared BlockNote editor.