The Image Block

Learn The Image Block

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).

This image shows where to go to upload an image to your page or post.

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.

This image highlights where to go to edit the style of your image. The styles section is in the right-hand side of your screen towards the top of the page.

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. 

This image displays where you can add a caption to your image. The image example here is of three cats napping together in front of a window.

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.

This image highlights where to change the image settings. Image settings is in the lower right-hand side of your screen underneath the styles section.

That’s all for the image block. For help with other blocks, check out the full list of blocks we have guides on here.

Previous Guide
Next Guide

Are You Ready to Uplevel Your Web Presence?

Use the form to the right to share a little bit of information about yourself, and we'll be in touch within one business day to learn about how we can help!