Guide to images with Ghost

I am trying to understand how to work with images in Ghost (and in and out of other editors). This is what I think, if I get it wrong please correct me.

  1. If you upload an image, e.g. by dragging it into web browser editor, then ghost automatically uploads the original (or possibly resizes to 2000 px wide maximum ?).

  2. Ghost creates responsive images of different sizes, but does this by serving a single image of a different size depending on browser (e.g. small for phone, big for laptop) , not by using with html srcset unless you do the srcset code yourself (https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/)

  3. If you copy and paste an image out of the ghost web browser editor, you get whatever image the browser is currently displaying, likely smaller than your original image. So if you want to make a quick touch up of a photo, edit the copy that you uploaded originally, don’t copy and paste the image from the ghost editor.

  4. Ghost does not do low quality image previews and lazy loading yet, but this is on the roadmap (it is done in this forum software, interestingly.) It is possible to achieve this in a ghost theme yourself if you take the time to do so.

  5. If you export your Ghost website, you will get the original image you uploaded (or the max 2000px resizing).

If I got anything wrong, please feel free to correct me.

I also look forward to clarification on this. There should be an official documentation covering how Ghost manages images or what Ghost does behind the scenes in relation to images.

  1. If you upload an image, e.g. by dragging it into web browser editor, then ghost automatically uploads the original (or possibly resizes to 2000 px wide maximum ? ).

It does both. The original image is kept and a 2000px max-width image is generated from it if the original is larger than 2000px wide as the “default image”. The default image is the one used anywhere an explicit size is not requested. Any time a resized image is generated the original is used as the source rather than the 2000px resized version.

  1. Ghost creates responsive images of different sizes, but does this by serving a single image of a different size depending on browser (e.g. small for phone, big for laptop) , not by using with html srcset unless you do the srcset code yourself (https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/)

Resized images are generated on first request as long as the requested image size is “allowed”. Themes can specify allowed images in their package.json file which augment the default sizes.

There are two primary ways that different image sizes are requested:

  1. The theme specifies an image size when displaying an image, eg {{img_url feature_image size="thumbnail"}}
  2. The image is loaded from a srcset. All posts created or updated since Ghost 3.19.1 will have srcset and sizes attributes added to image and gallery card output

I’m not sure what you mean by “serving a single image of a different size depending on browser”, Ghost has never done that.

If you copy and paste an image out of the ghost web browser editor, you get whatever image the browser is currently displaying, likely smaller than your original image

The editor displays the original or 2000px resized image (resized image will only exist if original was >2000px). The rest of the copy/paste details here are standard web browser behaviour and not Ghost specific.

Ghost does not do low quality image previews and lazy loading yet

Not sure what exactly you are referring to by low quality image previews but you’re correct, neither are out-of-the-box at the moment. Both are achievable in your theme if they are features you need however.

  1. If you export your Ghost website, you will get the original image you uploaded (or the max 2000px resizing).

Ghost itself does not export images. If you’re self-hosting then all images both original and resized are available in the content folder of your Ghost instance. On Ghost(Pro) the same can be requested by contacting support@ghost.org

2 Likes

Thanks, that is extremely helpful