How Ghost’s Built‑In Image Service Speeds Up Your Blog Without Extra Plugins

Problem: Slow image loading hurts reader engagement

When you upload a high‑resolution photo to a Ghost post, the theme may still serve the original file unless you add width or format parameters manually. Large images increase page weight, delay First Contentful Paint, and can cause visitors to leave before the article finishes loading.

Thesis: Ghost’s internal image service automatically creates resized, compressed, and WebP versions on demand, giving you responsive, next‑gen images without extra plugins or build steps.

How the service works

Ghost stores every upload in content/images. When a request includes query parameters like ?width=800 or ?format=webp, the built‑in image service (powered by the Sharp library) processes the original file synchronously, creates a derivative matching the requested size and format, stores it alongside the original, and returns it with appropriate Cache‑Control headers. Subsequent requests hit the cached derivative, so CPU usage spikes only on the first hit.

Using the {{image}} helper for automatic srcset

If your theme uses the {{image}} helper, Ghost adds srcset and sizes attributes that point to multiple widths (e.g., 400, 800, 1200) and formats (WebP and fallback JPEG/PNG). The browser then picks the best match based on viewport and device pixel ratio, delivering the smallest adequate file.

Worked example: verifying a WebP derivative

1. Log in to the server where Ghost runs (you need read access to content/images and permission to execute curl).
2. Upload a test JPEG via the Ghost admin, note its filename, e.g., myphoto.jpg.
3. Run the following command, replacing YOUR_DOMAIN and myphoto.jpg with your values:

curl -I "https://YOUR_DOMAIN/content/images/myphoto.jpg?width=800&format=webp"

4. Check the response headers. You should see:
• Content-Type: image/webp
• Cache-Control: public, max-age=31536000 (or similar)
• Content-Length noticeably smaller than the original file’s size (you can compare with ls -lh content/images/myphoto.jpg).
5. Open the URL in a browser, open DevTools → Network, reload the image, and confirm the initiator shows a request to the same URL with the width and format query strings.

If the headers show Content-Type: image/jpeg or the file size is unchanged, the image service may be disabled or the Sharp library missing; verify that sharp is listed in package.json and that the Node process has write permission to content/images.

Trade‑off and limitation

The service relies on Sharp’s default resize filters and a fixed WebP quality of 82 %. You cannot switch to a different compression algorithm (e.g., MozJPEG) or adjust the quality without preprocessing the image outside Ghost. On a self‑hosted instance with limited CPU or disk, the on‑the‑fly generation can become a bottleneck under heavy traffic; each unique width/format combination creates a new cached file, consuming storage.

Practical way to check the result in production

Run a Lighthouse audit on a page that uses the {{image}} helper. In the “Performance” section, look for the audits “Serve images in next‑gen formats” and “Properly size images”. Both should pass if the theme is correctly calling the helper and the image service is functional. If either audit fails, inspect the rendered HTML: the <img> tag should contain a srcset attribute with at least one WebP URL and a sizes attribute.

Closing: Make the most of Ghost’s image optimization

For most blogs, the built‑in service delivers noticeable speed gains with zero configuration. Keep your theme updated to use the {{image}} helper (or manually add width/format parameters) and monitor storage growth. If you anticipate thousands of daily image requests or need stricter quality control, consider placing a CDN in front of Ghost or pre‑processing images with tools like imagemin before upload.