How to Add an Image to WordPress Using the Gutenberg Image Block

The WordPress Image Block lets you add images to your WordPress posts or pages. With the Block, you can easily upload images from your computer, select images from your media library, or even from external URLs. 

The Image Block also allows you to resize the image by dragging its handles or entering specific dimensions. You can also adjust the image alignment, add alternative text (alt text) for accessibility, and set a caption for the image.

I’ll show you a complete guide on how to add an image to WordPress using the Gutenberg image block and customize its settings. 

What is the Gutenberg Image Block?

The Gutenberg Image block is a default block of the editor in WordPress. It allows you to insert images individually into your desired web posts and pages. It also provides options to add a caption, link, alt text, and more to the image. You can align the image to the left, right, or center, and resize it as you need.

You can also place the image block within the column and row blocks to present your content without disturbing the web layout. After the block is added, you can add an image whether from the media library or from your local drive.

How to Add an Image to WordPress Using the Gutenberg Image Block

Although most WordPress blocks are very easy to use, not all of them are familiar to common users because they don’t have many use cases. But the WordPress Image block is a common Gutenberg block that is used so frequently in all types of websites.

And the process of using this block is also very simple. Let’s explore how to use the Gutenberg Image block for adding images to the WordPress websites.

Step 01: Add the Image Block to Your Post or Page Editor

Open the post or page where you want to add images. Click the (+) icon to add a new block. Type Image in the search box to find the Image block. Hit the block to add it to your post or page.

Step 02: Add Images to the Block 

You’ll get two options after the block is added – Upload and Media Library. The Upload option will let you add images from your local or cloud drives. The Media Library will let you add images that are already in your backend.

For this tutorial, we’ll add images using the Media Library option. Click the image you want to insert.

Step 03: Customize the Image on Your Gutenberg Editor

First of all, you’ll get half a dozen options on the Gutenberg toolbar to customize the image. Things you can do with the toolbar are apply the duotone filter, align, Add a caption, insert a link, crop, add text over the image, and replace it with another image.

I have covered articles on how to use all these options on the Gutenberg toolbar. I have listed the article links at the end of this post.

By keeping the circular handle icon selected, you can increase or decrease the image size by dragging.

Come to the Settings tab. You can set the alternative text for the image. After that, you can set the aspect ratio, width, and resolution of the image. 

Next, come to the Styles tab. You can customize the block style, filters, border, and radius using the respective options in this tab.

Thus, you can add images to your WordPress posts and pages using the WordPress Image Block. Explore how to add alt text to images in WordPress.

Best Practices for Using the Gutenberg Image Block

Images are a crucial element for any website. Failing to use and present this element smartly can cause a loss of your website’s image. There are several issues you must consider when using the Image block and adding images to your website. Take a look at them below.

1. Choose the Right Image Format

Use high-quality images that are optimized for the web. JPEG is the most common format for photographs, while PNG is suitable for images with transparency. Consider the file size and compression to ensure fast loading times.

2. Provide Descriptive Alt Text

Alt text is important for accessibility and search engine optimization. Describe what your image represents using relevant keywords when appropriate. This will help visually impaired users understand the content of your images when they appear in search results.

3. Compress the Image Size

There are many free and paid image compression tools that you must use before uploading images to your site. By shrinking their additional weights, you can make your site lightweight and load fast, improving user experiences.

4. Consider Image Alignment

Align your images to the left, right, or center based on your content layout and design. This helps create a visually appealing and balanced presentation.

5. Link Images When Relevant

If your image is clickable and leads to another page or resource, consider adding a link to it. This can be useful for directing users to related content or external sources. Learn how to link an image in WordPress.

FAQ on How to Add an Image to WordPress Using the Gutenberg Image Block

Conclusion

Before ending the post, we have some suggestions for you. Optimize all your images before uploading them to keep your WordPress posts and pages lightweight. Also, images can be resized to the appropriate dimensions and compressed to reduce file size without compromising quality. 

Avoid uploading multiple copies of the same image. WordPress has a Media Library where all uploaded images are stored. Instead of uploading a new copy, simply insert the image from the Media Library when reusing it in another post or page. 

This helps save storage space and keeps your media library organized. Let me know through the comment section if love this post. Follow the links below to learn how to further customize images on WordPress.

• How to apply the duotone filter on WordPress images.
• How to add links to images on WordPress
• How to crop an image in WordPress
• How to add text over an image in WordPress
• How to replace an image in WordPress