previously published as “Gutenberg Blocks – Images”

These are the standard Block Editor image blocks:-

• image
• inline image
• gallery
• cover image
• media and text

Image

Choosing an Image block allows images to be added from your computer or from the media library (ie already uploaded to WordPress), just as in the classic WordPress editor. After uploading/choosing the image, alt text, image size and other settings can be chosen in the block settings sidebar.

Alt Text for the image (text describing the image) is important for accessibility and also valuable for search engine optimisation.  Alt Text is not automatically added for an image block (unlike the classic WP editor). So it is important to enter this in the block settings when adding an image.

Image Captions can be added easily by clicking on the “Add Caption” icon in the block controls bar above the image block. This opens up the Caption area, where you can type your caption, with handy formatting options, such as bold, italic and links.

Uploading the image and adding Alt Text may be all you need to do.

However there are other image settings which can help you manage the appearance of the image.

Aspect Ratio

Aspect Ratio controls how the image will appear on the page. It can be in the original proportions, or in one of a number of width:height ratios, as supported by the theme. When the chosen Aspect Ratio is different from the original, the image will appear cropped to fit the chosen proportions.

Typical photograph proportions of 4:3 (or other landscape ratios where the width is larger than the height) can fit nicely across a website page. Portrait type ratios (where the height is larger than the width) provide a tall thin picture – this can work well where the picture is sitting beside some other content.

Aspect Ratio Examples

Aspect Ratio 3:4

Image Size (width or height)

By default, the image will be included at the full width of the containing content area (if the original image was large enough). The size of the image can be constrained by entering a value (in pixels) in either the Width or the Height fields (the other will be calculated automatically). If both Width and Height are entered, this is used as the Aspect Ratio value, overriding the selection in the Aspect Ratio dropdown.

The Image size can alternatively be chosen by picking from the standard media sizes generated when an image file is uploaded into WordPress. These sizes are offered in the Resolution dropdown.

Resolution

Image size, Resolution and Performance – the larger an image is (in dimensions and filesize ie MB), the longer it takes to appear on a page, and the more it slows the page’s performance. (This still applies today, despite faster internet speeds). For this reason, when an image is uploaded to WordPress, a set of additional images are generated from it, at pre-determined dimensions. When an image is used on a web page, the image displayed is usually one of this set of images, which fits the desired dimensions, rather than the full-size, original image.

The Resolution dropdown controls which one of the stored image sizes is used as the basis for the image which will be displayed on the web page.

Images are initially included at the Large image size (which is usually 1024px wide or tall, whichever is the largest dimension). This is generally a good choice for images which are intended to fill the content width of the page. For smaller images, it may be sufficient to use a smaller size, such as Medium. For images intended to fill the width of the browser screen, you may need to choose a larger size, perhaps even the Full size image.

If your image looks blurry, take a look at the Resolution dropdown and try a larger size. Or you only want a small version of the image, choose a smaller image size from the Resolution dropdown.

Remember to choose the smallest size which fits (or is larger than) your chosen dimensions and gives a clear image.

Inline Image

It is also possible to insert an image directly within paragraph text, like this . 

To add an inline image, follow these steps:-

• add a standard text block eg paragraph and type in your content
• position your cursor where you want the inline block to appear
• click on the More dropdown in the top right of the block toolbar
• choose or upload your image
• it will be inserted at the cursor location
• resize as desired by changing the image width

Gallery

The Gallery block type is initially very similar to the single Image block type, but allows several images to be uploaded or chosen rather than just one.

Gallery block options include:-

• number of columns (from 1 to 3, which seems rather limited. It may be possible to override this with CSS styling)
• cropped or uncropped images
• link image to full size image, attachment page or nothing 

We can choose cropped images

Or uncropped images

The gallery is added into the page as a set of image blocks (in classic WP editor it is a list). Each image block is a figure.  The gallery element (also a figure) has class wp-block-gallery (with additional class is-cropped, if applicable, and columns-x where x is 1, 2 or 3) and the individual figures have class wp-block image. 

Styling is done using flexbox settings.

Gallery image sizing

When the number of images is not a neat multiple of the number of gallery columns, thumbnails are expanded to fill the width. This is the default Block Editor styling.

Cover Image

The Cover Image block allows you to add an image with text sitting in front of it. In this example, the word “Enlightenment” is not part of the image but has been typed directly into the block:-

An overlay is automatically added to a cover image block, to provide a level of opacity (shading) on the image, so that the text is clearer to read. The opacity setting allows you to adjust the opacity to your satisfaction.

Here is this image without any overlay.

The Cover Image block can be good as a hero header section for a page or post.  For a more detailed explanation, read this post on Block Editor – Cover Image.

Additional information about cover images, and how they can be used, can be found here https://gutenberghub.com/cover-image-block-overview-how-to-use-guide/

Media and Text Block

You can choose to have the image on the left or the right, and content can be vertically centred or sit at the top (or bottom).

The entire block has a class of wp-block-media-text, with interior blocks, wp-block-media-text__media and wp-block-media-text__content.

On mobile, the Media and Text block rearranges to show the image at the top and the content beneath (regardless of whether or not the image was positioned on the left or the right).