1 min read

How to ensure properly sized images in Ghost

For loading the page performance reasons it is important to only use a picture that has the width set to the maximum that it will be used in the theme.

With the following change made to the package.json file in the Ghost theme the feature picture will be used at a maximum width of 1,200px.

 "config": {
        "image_sizes": {
            "xxs": {
                "width": 30
            },
            "xs": {
                "width": 100
            },
            "s": {
                "width": 300
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 800
            },
            "xl": {
                "width": 1200
            }
        }
    },


What this means is that the feature picture can be loaded to Ghost at any width and the theme will convert the picture for use with a maximum width of 1,200px.

This change does not effect the pictures in image and gallery cards that will be converted for use at a maximum width of 2,000px.

What this means is that the image and gallery cards pictures need to be loaded using the maximum width that they will be viewed at.

To determine maximum widths consider how the picture needs to displayed. If the picture is  shown left to right edge of the page then a higher width will be required, whereas if the picture is show as part of a collection then a small width should be considered.

All of this begs the question, why doesn't Ghost just do resizing of pictures in image and gallery cards for you?

On reflection I think the best answer to why doesn't Ghost just do resizing of pictures in image and gallery cards for you is that Ghost doesn't know how the picture will be using in the theme.

To put this into practice and check if pictures are used at their correct width use the Google Pagespeed insights tool with you can read more about here how to find out and improve how fast a web page loads.

Notes:

  • In both feature and picture card cases the width of the picture used will not be scaled up.
  • As a guide in many cases for pictures only JPEGs should be used (a JPEG is a picture file with the extension .jpg or .jpeg).
  • It is a good idea to consider how pictures will be displayed on desktop and mobile devices.
  • Another option is to resize on the edge with Cloudflare workers which will be followed up on the blog soon.

Can you add to the discussion? share a comment with helpful links and learnings.