How images render on the website

What is an image size?

A photographic image for example a Jpeg or PNG file can have a pixel size (or resolution), for example 800 pixels by 400 pixels, depending on the file type and resolution and compression applied when saving the image the file with have a file size too, for example 300kb or 300mb.

What is image compression?

When you upload an image to the CMS this file is compressed, the image file size is reduce as as much as possible without losing any quality, using lossless compression techniques.

What is an aspect ratio?

An image like the one mentioned above (800px x 400px) will have an aspect ratio of 2:1, and this will be a landscape image.

What is cropping?

Images may be cropped by the CMS when the CMS automatically creates thumbnails, this allows you to upload a single large file, but provides the end user with images that have a more appropriate pixel resolution and file size (kilobytes and mega bytes).

Images can also be cropped further by the browser depending on the browser window or device type, some images are more responsive than other and some are very static.

Notice in the example below how the top header image is cropped at the top and bottom at different places by the bowser as the browser window changes size. Also notice how the grid of images below remains at a more similar aspect ratio and are cropped less by the browser. If a portrait image is uploaded to the CMS and the block outputs a landscape aspect ratio the then top and bottom will be cropped heavily by the CMS.

What is a responsive image?

This simply means the size, cropping and aspect ratio of the image rendered on the website can depend on the the size of the browser window or device type. Notice the below below is changing or responding as the browser windows size changes, notice both the flag and 2020 text can disappear and appear depending on the browser window size.

What is a thumbnail image?

Every image you upload to the CMS is processed by the CMS, this produces many copies of the image all optimized for the various places or blocks the image could be used in. Some copies of the image remain large like for the section block or header block and some are reduced in size, for example the custom card block.

Below is an image that has been uploaded to the CMS.

The below is an example of how this image is cropped for the header block

The below is how the image is cropped for a custom card block.

What size thumbnail do we use?

There are really far to many to think about but if you wanted to know you can see below (name, width, height, if cropped), there is more info on the function on the WordPress site.

        'post-full'        => [ 720, 920, true ],
        'post-half'        => [ 334, 200, true ],
        'post-half@2x'     => [ 640, 400, true ],
        'post-featured'    => [ 914, 527, true ],
        'post-featured@2x' => [ 1828, 1054, true ],
        'grid-item'        => [ 900, 900, true ],
        'image-block'      => [ 0, 600, [ 'center', 'bottom' ] ],
        'hero-location-lg' => [ 1468, 0, false ],
        'hero-location-md' => [ 978, 0, false ],
        'hero-location-sm' => [ 734, 0, false ],
        'hero-lg'          => [ 2560, 710, true ],
        'hero-md'          => [ 1444, 710, true ],
        'hero-sm'          => [ 770, 710, true ],
        'logotype'         => [ 180, 72, false ],
        'logotype@2x'      => [ 360, 144, false ],
        'logomark'         => [ 60, 60, false ],
        'logomark@2x'      => [ 120, 120, false ],
        'lwi-block-sm'     => [ 200, 200, false ],
        'lwi-block-sm@2x'  => [ 400, 400, false ],
        'lwi-block-md'     => [ 260, 260, false ],
        'lwi-block-md@2x'  => [ 520, 520, false ],
        'lwi-block-lg'     => [ 325, 325, false ],
        'lwi-block-lg@2x'  => [ 650, 650, false ],
        'wc-thumb'         => [ 335, 335, true ],
        'action-wide'      => [ 480, 230, true ],
        'action-wide@2x'   => [ 960, 460, true ],

What is the best image size to upload?

There isn’t one.

Upload the biggest version of the file you have that is under 10mb in size, the CMS will create the necessary thumbnails for the blocks we use and optimize the file size accordingly.

What should I bear in mind when choosing an image to upload?

Use photos where possible. For example avoid using images with graphic text within the image.

Use photos where the subject matter is in the middle of the image and is less likely to be cropped. For example information or text that is on the edges of the image is mostly likely to be cropped.

Use photos with the same aspect ratio as the block you intend on using in the CMS. For example if you know that the block you wish to use has a landscape aspect ratio, then it is probably best use a landscape image.

Consider using a block without cropping, if the information in the image is so important it must not be cropped then think about the block carefully. For example avoid the header block and use a standard WordPress image block.

Be wary when uploading graphics such as illustrations. The cropping or responsive resizing of the image can negatively affect the way the graphics look in some browser window sizes or device types. For example the country pages have a special template that uses non responsive images which have a fixed height and width, this stops the graphics from blurring when the browser resizes the images.

Consider how the image will look if text is applied over the image, for example on the header block.

Consider how the image will look if used in another language with different text over the image, or if the text over the image is on the reverse, for example in Arabic which is right to left.

Consider cropping the image before uploading to the CMS if you want more control of what is cropped. For example the CMS will crop from the top and bottom of a portrait image, you may want to pre crop the top (show in the above example).

How can I edit the image I have uploaded in the CMS?

This can be done in the media tab, if the image is used else where it may change the appearance of the image used in those other locations. You may find you can crop the image yourself, which may help you get the important part of your images rendered toward the center of the image.

Images must not be “flipped” as this is usually not permitted by our 3rd party image suppliers (Getty etc).