Image Block
The block editor Image block allows images to be added from your computer or from the media library (ie already uploaded to WordPress). After uploading or choosing the image, alt text can be added, and other settings 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. 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
An image with a portrait type aspect ratio can work well sitting next to other content, such as descriptive text. This image has 3:4 Aspect Ratio and height 300px
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.
Other Image Blocks
See Block Editor – Images and Block Editor – Cover Images to read about other image blocks.
For our introduction to the block editor, see Beginning with the Block Editor and also Page Layout with the Block Editor.