How to Use the WordPress Image Block

Posted on August 8, 2021 by in WordPress |

How to Use the WordPress Image Block

Using images is one of the simplest yet most effective ways to enhance your WordPress pages and posts. However, if you’re new to using the WordPress Block Editor, you might be a little confused about how to employ the Image block properly.

Fortunately, inserting and using the Image block is quite easy. Learning its various settings will enable you to add images throughout your website more seamlessly, and customize them to your liking. In this post, we’ll explain the Image block and how it works, walk you through each of its options, and offer some tips for using it.

Let’s jump right in!

How to Add the Image Block to Your Post or Page

The Image block has made adding media to your WordPress posts and pages as simple and straightforward as possible. To do so, first navigate to any post or page from your WordPress dashboard.

Next, within the editor, click on the Add Block button (marked by the plus icon) wherever you want to insert the image. Then choose the Image block:

Adding an image block in WordPress.
If it doesn’t appear right away, you can also type “image” into the search bar.

Once you add the block, the next step is to select the image you want to use. From there, you have three options. You can either select Upload, Media Library, or Insert from URL:

The options to insert a WordPress image via Image block.

If you select Upload, you can choose an image saved on your computer. For images you’ve already uploaded to your WordPress site, you can navigate to Media Library. To insert an image from a copied link, click on Insert from URL.

For our example, we’ll upload an image:

An image uploaded via Image block in WordPress.

As you can see, once you insert your image a toolbar appears with a variety of options. You’ll also have some settings to choose from on the right side of the screen. Let’s explore these options in more detail.

Image Block Settings and Options

Once you insert your image, you can add a caption below it by typing in the Add caption field. Then in the block toolbar, you’ll find various settings and controls you can use to adjust the image. We’ll go through them from left to right.

Image Block Toolbar Settings

The very first option on the toolbar lets you switch to a different type of block. Next, if you click on the Apply duotone filter icon, you can choose from a collection of duotones to apply to your image:

The option to apply a duotone filter in the WordPress image block.

This option also lets you modify the shadows and highlights in the image, to change how it appears.  If you ever want to revert to the original image, you can click on Clear.

Next, you can adjust the image’s alignment on the page by selecting Change alignment:

The option to change image alignment in WordPress editor.

By default, WordPress will set your image to Align Left. However, you can change this by selecting Align center, Align right, etc. You can also choose to make the image either Wide or Full width. The latter can be used to expand the image beyond the standard content area for your current theme.

To hyperlink your image, you can click on the link icon and choose Media File or Attachment Page:

The option to link a WordPress image block.

If you want to trim your image, you can click on the Crop icon. When you do so, the toolbar will expand to offer three more options:

The image block crop settings in WordPress.

Here is a quick cheat sheet for what each of these icons means:

  1. The magnifying glass lets you zoom in on the image, from 0 to 300 percent.
  2. Aspect Ratio lets you choose a ratio for your image, including options for both Portrait and Landscape.
  3. The arrow icon lets you rotate the image.

After you make your adjustments, you can click on the Apply button to save your changes.

Finally, the last icon lets you add text over your image:

The option to add text over an image via Image block.

As with a regular text editor, a mini toolbar will appear over the image. You can use these controls to bold, italicize, or link the text, and adjust its alignment.

Additional Image Block Options

If you click on the three vertical dots at the end of the Image block toolbar, you’ll find various additional options. This includes settings for:

  • Copying the image
  • Editing the image as HTML
  • Adding the image to your reusable blocks
  • Inserting a new block before or after the Image block

Now, let’s move on to the block settings located in the sidebar. Here you can choose from four styles:

  1. Default
  2. Rounded
  3. Borders
  4. Frame

Here’s an example of what each style will look like:

The Image block style options.
Next, under Image settings, you can find the fields to enter your Alt text and (1) change the Image dimensions (2):

The WordPress image settings.

Note that entering alternative text is important for both Search Engine Optimization (SEO) and accessibility purposes.

Beneath that option, you can adjust the image’s size. You can select a preset size from the drop-down menu, or enter custom values in the Width and Height fields.

Tips and Best Practices for Using the Image Block Effectively

Once you learn how to insert images in your WordPress pages and posts, you might be interested in learning how to use them effectively. If so, there are a handful of tips and tricks you’ll want to keep in mind.

First, we always recommend optimizing your images. You can do this by compressing the images before uploading them, in order to improve your page loading times and overall site performance. After that, optimizing the file names and alt text can help improve your SEO.

Another tip for getting the most out of the WordPress Image block is to spend some time getting to know the different resizing and cropping settings. Being able to crop your images directly within the editor (rather than having to go to the Media Library) can save you a lot of time. Learning your way around these controls can help you quickly and seamlessly enhance your pages and how your images appear in them.

Finally, in addition to using alt text, we also suggest adding captions below your images. Doing so can help your users better understand the contents of a photo or screenshot. This is also an excellent place to properly attribute credit to the original source of images you use from third parties.

Frequently Asked Questions About the Image Block

At this point, you should have a solid understanding of how to use this block on your WordPress site. However, let’s quickly go over some of the most frequently asked questions to ensure that we have all the essential points covered.

Where Do I Find the Image Block in WordPress?

After you navigate to a WordPress post or page, there are a few different ways you can find the Image block. The first option is to type “/image” into the text field. The second option is to click on the Add Button block or the plus icon (+), and then enter “image” into the search field.

What Does the Image Block Do?

In a nutshell, the Image block lets you insert a photo into your WordPress page or post and then customize it. This block enables you to resize and adjust its appearance, and display it directly within the editor. You can also use the Image block to upload an image via your computer, insert one from your WordPress Media Library, or add one from a URL.

Can I Add Images Anywhere in WordPress?

There are many different places you can add images to your WordPress site. Your options will vary based on the theme you’re using. However, by using the Image block you can insert them in pages, posts, and WordPress widget areas.

Conclusion

Adding images throughout your site is one of the easiest and most powerful ways to spice up your content. Not only can photos and screenshots make your content more aesthetically pleasing, they can also help enhance the overall User Experience (UX).

Thanks to the WordPress Image block, adding media to your pages and posts simpler than ever. You can quickly insert images into your content by selecting the relevant block from the editor, and then configuring the various styling options to personalize it.

Do you have any questions about using the WordPress Image block? Let us know in the comments section below!

Featured Image via TarikVision / shutterstock

Premade Layouts

Check Out These Related Posts

How to Use the WordPress Slideshare Embed Block

How to Use the WordPress Slideshare Embed Block

Posted on October 16, 2021 by in WordPress

Within WordPress’s Block Editor, there are a variety of tools that make it simple to share embedded media from external websites on your page or blog post. The SlideShare embed block allows users to embed their SlideShare presentation decks directly into a WordPress site. Want to learn how to...

View Full Post
How to Use the WordPress SmugMug Embed Block

How to Use the WordPress SmugMug Embed Block

Posted on October 15, 2021 by in WordPress

The WordPress Block Editor features multiple embed tools that make it easy to incorporate external media into your WordPress page or blog post. For users who want to share their photography (or feature other photographers’ work, with permission of course) on their WordPress site, the SmugMug...

View Full Post
Join To Download Today

Pin It on Pinterest