The right Ghost image export depends on image role and theme behavior. A feature image, image card, gallery item, screenshot, chart, author image, tag image, site metadata image, and social card should not all use the same file.
When a Ghost feature image looks sharp in the editor but wrong after responsive srcset output, compare the role, crop surface, format, and theme img_url behavior before exporting another file. Ghost does not have one universal feature image size because theme layout controls how images are displayed and cropped.
Why Ghost Feature Image Size Is Theme-Dependent
A feature image may be used by the post template, homepage card, tag archive, author archive, related-post card, newsletter, or social metadata. Each theme can display those surfaces differently. Some themes crop hard for cards. Some use full-width headers. Some define custom image sizes in package.json and output srcset variants. That is why a practical Ghost feature image size is a theme decision, not a universal platform rule.
JPG, PNG, GIF, WebP, And AVIF Logic
JPG or JPEG
Use JPG for editorial photos, feature images, rich illustrations, lifestyle-style visuals, and large photographic covers. It usually gives a useful balance of visual quality and file weight for photo-like images.
PNG
Use PNG for screenshots, charts, UI captures, diagrams, typography-heavy graphics, flat illustrations, and images that need crisp edges. PNG can be heavy for photographic covers, so reserve it for content that needs precision.
GIF
Use GIF only when short motion adds meaning. Decorative or large GIFs can slow pages and distract readers, especially in newsletters or long tutorials.
WebP
WebP is useful for lighter delivery copies and modern web output when the Ghost editor, theme, browser, and publishing flow support it. Preview the result in the current site rather than assuming every workflow handles WebP the same way.
AVIF
AVIF may be a theme-output option through helpers when used with configured image sizes, but it should not be treated as a universal Ghost upload rule. Use it as a theme/developer output decision and keep fallbacks where needed.
- For a feature photo, test a JPG or WebP delivery copy in the post header and homepage card.
- For a UI screenshot, compare PNG clarity against the mobile post body before compressing further.
- For a diagram or chart, preview labels in the active Ghost theme before replacing the source image.
Ghost Image Role Export Table
| Ghost image role | Suggested export logic | Best format logic | Responsive/theme risk | What to preview |
|---|---|---|---|---|
| Feature image | Use a high-quality source with safe crop space around the subject. | JPG for photo covers; PNG for graphic covers; WebP if the workflow supports it. | Theme card crop, header crop, and social fallback can differ. | Post header, homepage card, tag page, author page, X card, and Facebook card. |
| Image card | Export for the content column and reader context. | JPG for photos; PNG for screenshots and diagrams. | Inline width and mobile readability matter more than hero crop. | Post body on desktop and mobile, caption, and alt text. |
| Gallery image | Use consistent ratios and related visuals. | JPG for photo sets; PNG only where crisp graphics are needed. | Too many heavy images can slow the section. | Gallery order, mobile stacking, and consistency. |
| Screenshot or UI sample | Crop to the relevant panel and remove private data. | PNG is usually safer for text and interface lines. | Compression can make labels unreadable. | Mobile readability, redactions, and nearby explanation. |
| Chart or diagram | Prepare labels for reading width, not design-canvas width. | PNG for crisp labels and flat shapes. | Small text can fail even if the file is technically sharp. | Labels, caption, alt text, and written summary. |
| Author, tag, or site image | Use a simple identity or topic image with strong contrast. | PNG for logos/marks; JPG for photo-style images. | Theme may show the image small, cropped, or wide. | Archive pages, author pages, site header, and small contexts. |
| Social card image | Export a clear preview image if the feature image is not ideal for sharing. | Match the content: JPG for photo, PNG for graphic. | Metadata fallback or external cache may show the wrong image. | Ghost metadata preview, X card, Facebook card, and external validators. |
How Ghost Responsive Images Work In Themes
Ghost themes can define image sizes in package.json. Once those sizes exist, theme code can use img_url with a size parameter to output a resized version, and can build srcset markup so the browser picks from multiple sizes. Ghost's helper can also request a different format when used with size, depending on the theme and support.
This matters because a theme may request a small card image for an index page and a larger image for a post header. If the theme does not output suitable responsive markup, or if external images bypass the normal flow, the publisher needs extra testing.
Keep Source Files Separate
Keep original photos, screenshots, charts, and design files separate from Ghost upload copies. The original is your recovery point when a homepage crop cuts the subject, a publication needs a different social card, or a screenshot needs private data removed. Export delivery copies for feature images, image cards, galleries, screenshots, social previews, and newsletter use.
Alt Text And Image Context
Alt text should describe what the image contributes to the post. Do not stuff repeated keywords into the alt attribute. Captions and nearby text should explain why screenshots, charts, diagrams, and galleries matter, especially when the image contains data, process steps, or visual comparisons.
Where To Go Next
FAQs About Ghost Image Formats And Theme Roles
Use JPG for photos and feature art, PNG for screenshots and diagrams, GIF only for meaningful short motion, and WebP when the Ghost editor or theme workflow supports it and preview checks pass.
No single size works for every Ghost site because themes control image display, crop, homepage cards, archives, and post headers.
Themes can define image sizes, then use img_url and srcset to serve suitable variants. The browser can choose an appropriate size when the markup is built correctly.
The img_url helper outputs the URL for an image property and can request resized versions based on theme-defined sizes. It can also request format conversion when used with size.
Yes. Keep originals untouched and export delivery copies for each role so you can recover from bad crops, compression damage, or metadata changes.
