Formatting images

  • images
  • media
  • performance
  • upload

Good images look sharp, load quickly, and survive responsive layouts. Format files before you upload them to the media library.

Recommended specs

Requirement Guidance
Width Aim for about 2500px on the long edge for large heroes and full-bleed photos. Under ~1500px, big crops can look soft.
File size Keep uploads well under 20 MB; smaller is better for speed.
File name Letters, numbers, hyphens, and underscores only. Avoid spaces, ampersands, and accented characters.
File type JPG, PNG, or GIF for photos and most graphics. Use SVG for logos and simple icons when appropriate.
Color mode RGB for the web — not CMYK (print).
Color profile Prefer sRGB so colors stay consistent across devices.

Check file details on your computer

Mac: select the file → Command + I → review more info for dimensions and color.

Windows: select the file → Alt + Enter → Details.

How Dirigible shows images responsively

Screens range from small phones to large desktops. Blocks handle images in two common ways:

Keep the whole image visible

Blocks such as the core Image block, Media & Text, and Media Callout usually preserve aspect ratio and show the full image. Use these when every edge of the photo matters.

Cover a region (may crop)

Heroes, background sections, photo features, and similar layouts often cover the available area. The image scales to fill the space, so edges can crop on different breakpoints.

Set a focal point on the image (or on the block) so the important subject stays in frame when the crop changes.

Do not put text in the image file

Burned-in headlines in a hero JPG will not be indexed as text, and responsive crops often cut them off — especially on mobile, where the frame is taller relative to width.

Put headlines and buttons in real blocks on top of (or beside) the image instead.

Tips

  • Compress large photos before upload; the library does not replace careful prep.
  • Set meaningful alt text in the media library for accessibility and SEO — see Writing alt text for images.
  • After upload, set focal points in the media library and adjust block controls where a layout crops the photo.