My Account

My Account

Accept the fact – Gutenberg is one of the most popular and unique page builders available in the market. You can add anything you want with Gutenberg, be it images, videos, text, or buttons; you name it. In this post will focus on the Gutenberg image block, so you can add beautiful images to your site using Gutenberg.

But first, let’s see what Gutenberg editor is and what are the uses of blocks.

Gutenberg Editor and the Concept of Blocks

In 2018, the WordPress 5.0 release came up with a brand new editing experience – the Gutenberg editor. Gutenberg editor allows users to create stunning homepages and landing pages and take their overall design to the next level.

It was one of the major WordPress updates, and the community loved to see the new editor.

The old classic editor looked pretty outdated and lacked some of the necessary features. Here is a glimpse of what it looks like:

classic editor - gutenberg image block

Whereas the new Gutenberg editor looks like this:

gutenberg editor - gutenberg image block

The idea is pretty simple. You can create complex layouts and beautiful web pages with minimal effort. However, to make that happen, you need to use dedicated blocks.

For example, you should use an image block to add an image to the Gutenberg editor. The heading and table blocks can be used accordingly to add headings or a table, respectively.

You can see all the blocks by clicking the + button on the top left-hand side.

all blocks - gutenberg image block

Blocks are essential to building any website design, and you can customize them the way you want. Once you have added a block to the editor, you can click on it, and it will show you everything that can be modified in the block.

block modification

NOTE: You can also hide Gutenberg blocks you are not using to declutter the editor. We have a dedicated guide here to teach you how to hide unwanted Gutenberg blocks.


Now, you know about the Gutenberg editor and blocks. In the next section, we will go through the Gutenberg image block and learn more about it.

The Gutenberg Image Block

As we mentioned earlier, blocks are used in Gutenberg to add new content to the post, page, or custom post type.

The Gutenberg image block is used to add images to the post. You mainly have two options if you need to add the image block to your post.

  • Using the + button
  • Or using /image command

If you check the top left-hand side of the Gutenberg editor, you will see a + button.

all blocks - gutenberg image block

You can click on it and choose the image block.

add image block to gutenebrg

And once you have selected the image block, it will be added to the editor.

add image to gutenberg using image block

Alternatively, you can type the /image command to add the image block to the editor.

image command

Once you have added the image block, you can upload or display an image from the media library.

Why Add Images to Your Website?

Adding images to your website will help you in multiple ways. Some of the benefits are listed below.

  • Better SEO
  • Entertaining
  • Good Way to Break Up Your Content
  • More Conversions

Let’s see what each has to offer.

Better SEO: By adding images to your blog post and adding related ALT tags, you can rank the image higher on Google searches. For example, let’s see an example from our sister website QuadLayers.

We have created a detailed guide on the Divi contact form not working. Our post ranked on page #1 on Google search results.

divi contact form error

But also, our images got ranked on Google image search.

divi contact form not working

This is bringing us more traffic to the website. So, adding images to the blog post and optimizing it will give more website visitors.

Entertaining: Adding images to the content can be fun. Adding pictures or GIFs according to the situation is a great way to engage your readers. This will help you in reducing the bounce rate.

Good Way to Break Up Content: Adding too many paragraphs to the article won’t be something most people love. Instead, you can use headings, lists, or even images to break this. Whenever you feel the content is going too long, add a photo!

Better Conversions: Adding images at CTA can bring you more conversions. Also, if you are running an online shop with WooCommerce, adding product images to the WooCommerce gallery will help you get more conversions. Also, adding product images will boost the affiliate’s revenue if you review a product.

Now you know the importance of images. Next, let’s see the top methods to add pictures in the Gutenberg editor.

How to Add Images in Gutenberg

To add images in Gutenberg, we have four major methods.

  • Using the Drag and Drop Feature of Image Block
  • Uploading images through the Image Block
  • Uploading images through Media Library, then Embedding it inside the Image Block
  • Dragging and Dropping Images to the editor

All these methods are straightforward, and we will show you how it’s done.

1) Drag and Drop Images to Gutenberg Image Block

This is the best option when you are writing content and need to add images on the go. First, ensure that you have the image ready. Now, open the editor and add the image block to the post, page, or wherever you need to use the picture.

Gutenberg image block

Now, a small box will appear like this:

upload images using gutenberg image block

You do not need to choose any of the options from there. All you need to do is drag your media file and drop it inside the block.

drag and drop to add images to Gutenberg

This way, you can insert images into your post. As you can see, this is one of the easiest methods available. When you are writing an article, this method would be preferred.

2) Upload It Directly

In the last section, we have shown you how to add the image by dragging and dropping it inside the image block. This time, we will show you how you can upload it directly through the local storage.

Once you have added the image block, you must choose the Upload option.

upload button

Then, your local storage will pop up, and you can select the image you need to upload. Simply double-clicking the image will be good enough.

add image

Then the image will be added to the article.

added wix banner image to gutenberg

This way, you can add images to the blog post or page.

3) Media Library Method

This is the third method to add an image to your WordPress website. The process is similar to the ways we mentioned above.

You will see the Media > Library option on the left-hand side of the WordPress admin dashboard. You will see all the media present in your library.


To add new media files, click on Add New.

add new images to Gutenberg media library

From this page, you can add new media to your WordPress website. You can drag and drop any images or choose from your local storage. In this case, we have dropped an image from the computer to the library. The web server will take some time to upload the image according to the size of the image and your internet speed).

image uploading

Once the server completes the upload, you will see the image inside the media library.

library media

Now, open the post where you need to insert the image. For instance, we will edit one of the sample blog posts. Inside the editor, add the image block using the/image command.

Gutenberg image block

Then, choose the Media Library option.

opening media library

You will see all the available media inside the box.

all media inside gutenberg media library

You can select the media you need to insert to the page and add it.

add image to gutenberg from media library

Now, you will see the image inside the post.

media added

That’s it!

4) Dragging and Dropping Images

This method is even more straightforward. You do not need to add extra blocks or images through the media library. Instead, you can easily drag the image you need to upload and drop it inside the editor.

An example is below:

drag and drop image

According to your image’s size, it will take a few seconds. Once you have added the photo, you can start customizing the captions.

This way, you can add images to Gutenberg.

However, once you have inserted an image into any of your pages or post, you can do more with it. Below, we will show you how to customize the photos through the Gutenberg editor.

Customize Images with Gutenberg Image Block

Once you have added an image to your post, you can customize it however you like. For example, you might want to add some captions or links to the image, apply a filter, etc. The main customization options you can do with the Gutenberg image block are listed below.

Via Image Block Toolbar

After adding the Gutenberg image block, you will notice some customization options on top of it.

image block settings

The setting available are:

  • Drag
  • Move Up
  • Move Down
  • Apply Dualtone Filter
  • Alignment
  • Insert Link
  • Crop
  • Add Text Over the Image
  • Replace

Apart from that, you can also click the three dots section to explore more configuration options.

three dots

You can modify the image according to your preference right from there.

Via Image Block Settings Panel

Apart from the block settings inside the editor, an image configuration is also available on the screen’s right-hand side. It is called Block Settings.

If you select the image block, you will find the Block Settings panel toward the right-hand side of the screen.

image settings panel

You can update the following:

  • Styles
  • ALT Text
  • Image Size
  • Dimensions

And so on.

You can also mention a custom HTML anchor, CSS class, and title attribute from the advanced settings.

Resize an image

Resizing an image can be very useful on so many occasions. For example, if you need to display an image on the left-hand side of the blog but keep writing the article, reducing the image size to 250*250 would be nice.

To help you with that, you can use the Block Settings available on the right-hand side to modify the image size.

image size

However, the themes come with pre-defined image sizes so that you can choose any pre-defined ones from the dropdown.

image sizes

Or, if you need to add a custom width and height to the image, you can do so as well.

image dimensions

The best thing about the Gutenberg editor is that it will always display real-time updates. This way, you can see exactly what you are building.

This method allows you to resize any images you have added to a post or page.

Add Captions to an image

Captions are an easy way to inform about an image. Adding them will help the visitor understand the purpose or context of the image. This section will show you how to add captions to an image.

Once you have added an image to the editor, you will see a space for adding captions.

add captions

You can add the caption there. In this example, we have added a sample caption and updated the post.

sample caption

You will see the caption below the image if you check the article from the front end.

sample caption in front end

That’s it!

You can always convert blocks to another. For example, if you have added a paragraph block and need to make it into a heading, you can use the transform feature.

Likewise, once you have selected the image block, use the Transform option available in the toolbar.

transform option

From there, you can turn the image block into an image gallery block or anything you like.

image gallery block

Once you click the gallery button, the image block will be converted to a gallery block.

gallery block

You can always add new media to the block and create a beautiful image gallery.

add media

That’s it.

This way, you can turn the image block into a gallery block.

Now, for some reason, if you need to revert back to the image block, just click on the transform button again, and select the image block. And that’s it. Your gallery block will be converted back to an image block.

transform image block

This is how you can turn your image block into a gallery block and revert back.


Images are very crucial for any website. If you are running a blog or handling a website, you probably know the importance of images. It will help the visitors understand more about a specific product or the story you want to share.

The Gutenberg image block allows you to insert an image into your WordPress page or custom post type.

The Gutenberg image block comes with a lot of additional customizations. You can modify every inch of your image with the available options.

We hope you have found this article helpful and learned more about the Gutenberg image block. Please share it with your friends and fellow bloggers on social media. For more helpful articles, you should check our blog.

Here are a few more posts that you might be interested in:

How to Hide Unwanted Gutenberg Blocks

Gutenberg blocks can take your WordPress website or WooCommerce store’s…

Gutenberg Image Gallery Block: Everything You Need to Know!

Gutenberg can do magic with the images uploaded to the…

Related posts

Wowmall Blocks < Beta > release is coming!

Subscribe to our beta teters program and get a free premium license!

Our beta testers programs allows you to receive the latest Wowmall Blocks releases. Beta versions includes the latest experimental features before they arraive to the market.