The image block is one of the most commonly used blocks in the whole block library. This block is for adding images to your pages. To get started with this block, use the + sign and select the image block. This will add an empty image block to your page, which should look like the screenshot below. Here you have the options to upload an image, use an image that is already in your media library, or add an image from somewhere else on the web via its URL. It is recommended that you either upload or use one from your media library, rather than using an image from someone else’s website (for legal purposes and because this is more reliable).
The other option you have before your image is inserted is to change the shape of the image that will be inserted onto your page. You can also modify the shape once it has been added, so don’t worry if you have already added your image. This option can be found under the “styles” section of the image block settings. Here you will find the choice to use a square image or an image with rounded corners. In case you’re having a hard time finding these settings, they are circled in red in the screenshot below.
Once your image has been inserted, it is usually a good idea to give it a caption. This is a good idea for accessibility and overall readability. Your caption should describe the image and its purpose. To add a caption click below the image and start typing.
Once your image is placed and captioned there are a few other settings to be modified if you so choose. These settings can be found within the block settings and are labeled “image settings”. The first option you will find within the image settings section is a text box for the “Alt text”. All images on your website should have alt text. In addition to being good for SEO, alt text is supportive and inclusive to those that are visually impaired. Alt text should describe the image and its purpose. This means that if you wrote a caption you can simply copy and paste that caption into this box. Otherwise, come up with some good alt text.
Finally, there are two more sections of settings pertaining to the size of the image. The first of these sections is a dropdown where you can select between thumbnail, medium, large, and full-size versions of your image. The default is large and it is recommended that you do not use the full-size option, as the image will be scaled to the same dimensions as the large size but will potentially be a much larger file (larger files lead to slower page load times and lower quality user experience). If these three sizes are missing the mark for you, you can manually set the width and height by entering the dimensions you desire in the boxes labeled width and height.
If you resize your image and find that it is no longer aligned the way you would like you can click on the image and change the alignment via the alignment settings dropdown found in the white toolbar in the upper left-hand corner of the image block. This dropdown is the second option from the left.
That’s all for the image block. For help with other blocks, check out the full list of blocks we have guides on here.
« The List Block