Optimized and Responsive Images in Ghost Blog
Does Ghost compress your images? What's the maximum image width Ghost allows? Does Ghost create responsive images by resizing original images and creating multiple copies?
If you're not sure, don't worry, this article will explain in detail.
Optimized images
When an image is uploaded, Ghost saves the original image and automatically compresses and resizes it to be the default image. The detailed process is:
-
Rename the original image: The original image is kept, but its filename would be changed to "<original filename> + _o". So image filenames ending with "_o" mean that they are the original images you upload. However, the original image won't be shown or used in your Ghost blog.
-
Compress the default image: Ghost would reduce the image size, e.g., from 200kB to 190kB, and use the compressed image as the default image, which would be used if an explicit size is needed.
-
Resize the default image: If the original image width is greater than 2000px, Ghost would resize the default image to 2000px width, otherwise, it would keep the original width and height.
Responsive images
For feature images and theme images, Ghost automatically generates copies of images at different sizes so that browsers can download an image that best matches screen sizes and resolution. These copies are not generated when uploaded, instead, they are generated when requested by browsers.
This feature is controlled by Ghost themes, and you can see the image sizes your theme sets by downloading your Ghost theme and checking 'image_sizes' in the file 'package.json',
Here’s an example of the image size setting in Ghost’s default Source theme.
{
"config": {
"image_sizes": {
"xs": {
"width": 160
},
"s": {
"width": 320
},
"m": {
"width": 600
},
"l": {
"width": 960
},
"xl": {
"width": 1200
},
"xxl": {
"width": 2000
}
}
}
}
Please pay attention, this feature only works for feature images and theme images because these images impact page performance and SEO the most. For post content images, they are resized using Ghost default content sizes independent of any theme settings.
Check if an image is responsive
If you are unsure whether an image is responsive or not, you can use "Developer Tools" in Chrome to inspect the image (you can watch this video to see how to inspect). If the image is responsive, you will see a tag "<img" which is followed by "srcset" and a long string split by commas, as shown below.
<img srcset="/content/images/size/w160/format/webp/2024/05/sharing-button-9.png 160w,
/content/images/size/w320/format/webp/2024/05/sharing-button-9.png 320w,
/content/images/size/w600/format/webp/2024/05/sharing-button-9.png 600w,
/content/images/size/w960/format/webp/2024/05/sharing-button-9.png 960w,
/content/images/size/w1200/format/webp/2024/05/sharing-button-9.png 1200w,
/content/images/size/w2000/format/webp/2024/05/sharing-button-9.png 2000w" sizes="320px" src="/content/images/size/w600/2024/05/sharing-button-9.png" alt="Add Sharing Buttons to Ghost Posts" loading="lazy">
The long string is the image path for different sizes, for example, "/content/images/size/w160/format/webp/2024/05/sharing-button-9.png 160w" means an image of 160px. By providing different sizes, Ghost lets the browser choose the image that best fits user's screen.
