How to Use the Image Block in WordPress in 3 Easy Steps

Ankur Raj Bongshi

·

Image is essential for every website to make it visually engaging. That’s why you must learn how to use the image block in WordPress. Like any other page builder, the Gutenberg block builder comes with the core image block for adding images.

Today, we will share the complete guidelines on the image block, its benefits, features, and how to use it. Make sure to be with us from start to finish.

What is the Image Block?

The image block is the dedicated core block with the WordPress block editor to add images. The Image Block lets you insert, edit, and customize the images in your content.

The core image block benefits you with the following.

  • Ease-of-use: The Image block is easy to use as anyone can use it without special skills. Also, adding images using the block is simple.
  • Customization: For customization, it lets you resize the image, set the image alignment, add captions, etc.
  • SEO-Optimization: You can add alt text to every image using the image block, which helps search engines understand your image better.

Create Beautiful Tables
With Block Editor

Try Free
Get Pro

Image Block Toolbar Features

The image block toolbar has several features that let you customize it. The block toolbar features are explained below.

  1. Transform: You can transform this block into a paragraph, code, columns, etc.
  2. Drag: Allows you to drag and drop the dedicated block into any place.
  3. Moving Handle: Let you move your block up and down.
  4. Align: The align option lets you set the image alignment to None, Wide Width, Full Width, Left, Center, and Right.
  5. Duotone Filter: Duotone filter lets you create a two-tone color effect without losing the original image. Again, you can set shadows and highlights using the feature.
  6. Hyperlink: This option lets you add links for selected content within the block.
  7. Crop: The Crop option allows you to zoom, change the aspect ratio, and rotate the image.
  8. Add Text Over Image: This lets you add text over the image and add other blocks within the image block. It turns the Image block into the Cover block.
  9. Add Caption: You can add captions using the option.
  10. Replace: The replace option lets you replace your current image with the other image.
  11. More Options: Offers more options related to the section of the block, such as duplicate, copy, group, etc.

How to Use the Image Block in WordPress?

We will show you how to use the WordPress image block in some easy steps below. All you need is to follow.

Step 1: Insert the Image Block

To insert the Image block, head to your post or page.

After that, click the Add Block (“+“) Add Block icon (1), type “Image” in the search box (2), and click “Image” (3).

How to Use the Image Block in WordPress

Step 2: Insert Your Image File

You can select any of these three options.

  1. Upload: You can upload your image files.
  2. Media Library: This lets you select images from your media library that have already been uploaded before.
  3. Insert From URL: You can insert the image using the links.

How to Insert Image Via Upload Option

To insert image files, click the upload button, select your image, and click open. It will be open in the editor after that.

How to Insert Image Via Media Library Option

Click the Media Library button, select the image, and click the Select button to insert the image into the editor.

How to Insert Image Via Insert Image from URL Option

Select the Insert from URL button, input the link, and it will be displayed in the editor.

Step 3: Image Customization

When you’ve inserted the image in the editor, you can resize it right from the editor.

You can also set various options from the Block Settings. To access the block settings, navigate Settings (1) > Block (2) > Settings (3).

The Settings options hold Features like:

  1. Alternative Text: Allows you to set Alternative text for SEO purposes.
  2. Aspect Ratio: This lets you set the aspect ratio for your image to Original, Square, Standard, Portrait, Classic, Classic Portrait, Wide, and Tall.
  3. Resolution: You can set the resolution to large, Medium, Thumbnail, and Full Size.
  4. Width: Set the width you like.
  5. Height: Set the height of the image you need.

The Block Styles holds other styling features you might need when styling the image block.

  1. Styles: This feature allows you to set the image styles to Default and Rounded.
  2. Filters: Filters allow you to set a duotone filter for your image without losing its originality.
  3. Dimensions: This feature allows you to set margins for your image.
  4. Border & Shadow: You can add a border and border radius for the image block using this feature.

So that’s how you use the image block and its options.

Final Thoughts!

The Image Block in WordPress is a user-friendly and powerful tool that helps you enhance your content with visuals. Master every feature of this block and make your website visually appealing.

The image block is perfect for sharing your highlighting products, sharing memories, or explaining a concept. It also helps your images look their best.

So, next time you’re working on a WordPress project, use this handy block to elevate your content.

I hope you found this tutorial insightful and easy to follow. In the comment section below, let me hear your shoutouts about the tutorial and the block.

Also, don’t forget to share this on your social media and let others know about this awesome image block.

Read More!

Start Creating Beautiful Tables Today!

Ready to take your tables to the next level?
Download Tableberg now and create beautiful tables.

Get Tableberg →

ABOUT THE AUTHOR

The Tableberg Team

We are a dedicated team of developers, writers, and WordPress experts on a mission to simplify WordPress table creation. If you can use the default Table block, you can use the Tableberg block. It’s user-friendly and packed with customization options. Tableberg offers all the features you wish for in the default Table block. Give it a try – it’s FREE!