All posts created or updated since Ghost 3.19.1 will have srcset and sizes attributes added to image and gallery card output

Thanks @Kevin for your help with this, I have written up some learnings with this here https://www.influencer.tips/how-to-ensure-properly-sized-images-in-ghost/.

As I can see currently the images inside the post content does not have the mentioned attributes. Feature images can be controlled by my theme, the sizes defined in package.json files are outputed correctly (ghost 4.1.0), but with content images and gallery cards someting is not right. If I upload a 4000px wide image into the content, Ghost resizes it to 2000px and uses the 2000px version, but in the HTML it shows the original (4000px) “width” and “hight” attribute. There are no srcset and sizes attributes. It is the same with gallery card as well. It is strange, because when I insert images from Unsplash, Ghost renders the expected srcset attributes in html with the default (?) sizes=“(min-width: 720px) 720px.

Rear view of large group of large group of people enjoying open air concert. All recognizable people in foreground are released.

Ghostimages HD

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.

Ghostimages download

It’s not something that will be implemented in core because it’s not suitable for every site, every site has their own idea of how it should look/work, and baking the code into the generated html would mean there’s no way to improve/change the gallery behaviour over time.

The use case for this is a client who’s contributing team regularly add 20+ images to a post. What I would like to do is limit the amount of pre-post work that they do and allow them to load images of any width.

You shouldn’t really need to think about image sizes when uploading to Ghost outside of choosing JPEG vs PNG based on the type of image contents.

With config xl width:800 in theme package.json file I see the w800 applied for feature image. What I see for gallery jpg is image scaled down to w2000 which is as per the following:

Cuteghostimages

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.

I come from Word Press. Word Press’ gallery implemenation is a much better experience for the visitor. Because when they click on an image, it loads full size. From there controls allow them to go left and right through the gallery.

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

Ghostpictures for kids

Empty dark abstract room with red fluorescent neon lights. Stage, scene and night club party concept background with copy space for text or product display.

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.

Beautifulghostimages

It does, as was explained earlier. srcset and sizes attributes are generated with multiple resized images which lets the browser automatically use the size most appropriate for how the image is used in the theme. It also works for mobile vs desktop where mobile will load the smaller sizes.

Because when they click on an image, it loads full size. From there controls allow them to go left and right through the gallery.

Abstract template black geometric polygon on red laser light neon futuristic technology design concept background with space for text. Vector illustration

Funnyghostimages

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 ?).

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.

I found a bug that was introduced in 4.1.0 that prevented newly uploaded images from having srcset or sizes. A fix is ready here and should be included in the next Ghost release.

Images and galleries are output in a way that is compatible with lightbox scripts but unless the theme you are using has implemented a lightbox script of some description there won’t be any lightbox type behaviour for galleries.

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.

© 2024 iStockphoto LP. The iStock design is a trademark of iStockphoto LP. Browse millions of high-quality stock photos, illustrations, and videos.

Creative vector illustration of laser security beam isolated on transparent background. Art design shine light ray. Abstract concept graphic element of glow target flash neon line.

The images are output with srcset and sizes attributes so browsers will download an image which best matches the on-screen size and monitor resolution. The available sizes range from 600px up to 2400px. There’s no control over which sizes are made available.

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 (How to use responsive images in Ghost themes)

Ghostimages cartoon

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.

Hi @Kevin just to confirm I should be able to set a maximum width size rendered in theme for both the feature and the gallery image in the theme package using the following with Ghost v4.8.0 - Would just like to confirm because tested this today and found only feature image resized.

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

Red virtual abstract background space tunnel with neon line lights. Reality square portal arch tunnel. Spectrum vibrant colors laser show.

Creative vector illustration of laser security beam isolated on transparent background. Art design shine light ray. Abstract concept graphic element of glow target flash neon line.

Browse 21,300+ red laser beam stock photos and images available, or search for red laser beam transparent to find more great stock photos and pictures.

Realistic style laser beams on black background. Red intense beam of light produced by a laser. Vector illustration on dark background

Vector illustration of dynamic lights in dark background. High speed in night time abstraction. Car light trails motion ackground

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

Laser neon red and blue light rays flash and glow. Festive concert club and music hall abstract 3D illustration for pop, rock, rap music show. Colorful design overlay

Ghostpic girl

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.

Light motion trails. High speed effect motion blur night lights in blue and red colors, futuristic abstract flash perspective road glow streaks long time exposure vector set on transparent background

White horizontal lens flares pack. Laser beams, horizontal light rays. Beautiful light flares. Glowing streaks on light background.

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.