Working with WordPress Image block: How to add images in WordPress [+Secret tip]

For many users working with image can be really frustrating. It’s not always easy to choose the right aspect ratio or to resize images correctly to look good in the whole layout.

1. Why to use the WordPress Image block
2. How to add images with WordPress Image block
3. Additional formatting images process
4. Extra tip from us inside the article

Older WordPress versions (up till v5.0) add images using +Add Media button. Problem was that even with minimal change to image size you would need to upload it again. It means waste of time and redundant clicks.

New Block-based editor Gutenberg changes the way how to add images into WordPress to make this process simpler for end users. In this article we will show you practical guide about adding and editing WordPress Image block. In addition, we will explain one more option of pasting images – how to copy and paste an image to the content area with just a few clicks. We will also introduce you newly added features that come from WP 5.3.

But first let’s talk about why you should use images in posts and pages.

Why is WordPress Image block must-have for your website

Attract attention

Images attract the attention of website visitors. They must be interesting to keep visitors on your website longer. Think about a blog post without images. It’s only a bunch of text. On the first sight it is not very interesting even though it could be valuable and full of information. Furthermore photos can help imagine and describe your topic better.

For that reason we need to use WordPress Image block to focus attention on important stuff.

Illustrative text and context

Images are also an essential part for understanding content because they allow visitors better understand what is article about. Thanks to infographics you can explain complicated connections and tell things simple way. It helps visitors better orient themselves in problem that you talk about.

Make website nicer

Besides, images nicely put finishing touches to the whole website design. It’s not all about website layout, but also usability. Correctly chosen and placed image can help visitor to browse your website easier.

How to add images in WordPress block editor

To insert an image into Post or Page you need to add core block – Image block. There are several ways to do it:

– Using “+” in the top bar or anywhere in the editor

– Using slash “/“ and writing word “image” afterwards

New block will be created where you can add actual images.

Uploading images to WordPress

How to put images there where you want?

• Use Upload, and select an image from your hard drive
• Use Media Library, where you can select images there were already uploaded to your website
• Use mouse and drag & drop image
• Insert image URL address

Less known method of adding WordPress images

Besides uploading images through the upload window as mentioned earlier, there’s another way to insert image (and it’s such a quick way!). With improved WordPress editor, you are able to:

• Copy image from any content, or
• Just “drag” the image with a mouse cursor

And then insert or move (drop) the selected image to the location in content area that you want.

The same technique you can use also in case, you want to paste an image captured from your screen. Only three simple steps are needed. First, you need to take a screenshot using the print screen feature. For example Windows 10 provides its default Snippet tool called Snip & Sketch, which is also available via a shortcut – just press Win+Shift+S keys together on your keyboard. Then select the image area you want to capture. The last step is to paste the copied image (or part of it) into the content area using the basic shortcut Ctrl+V.

And what happen to WordPress image that you’ve pasted into your editor? Well, it is automatically added to the Media Library where you can edit this image.

Image metadata limited options

Within image editing you can set its Title, caption, description and alternative text. Unfortunately, you cannot change image filename – it will keep its auto-generated name, such as image-1.png and so on. This type of filename can be a little disadvantage in terms of SEO optimization due to conflict with file naming recommendations. Therefore, you need to consider this aspect before moving WordPress images to the content area.

Image alignment

Image alignment is one of the main features. No matter if you add WordPress Image block into Post or Page you should always consider placement depending on website design. Based on that image alignment can be chosen in toolbar above it. By default you can align image left, right or center it. Some WordPress themes allow images to be centered as wide or full width. It really depends on theme features as not all themes support it.

Resizing images

Revolutionary feature of Image block in WordPress editor is practical resizement. Simply drag side of the image to make it smaller or bigger. That way you can tweak image size depending on text in the content. Editor automatically keeps image proportions that means you do not have to worry about deformations.

New block style that transforms an image into a circle shape

If you’re using the latest available version of WordPress you may have noticed a new circle-crop style that you can use for your image. Shape of the image can be changed through top toolbar by clicking on the first “Change block type or style” icon. The default (rectangle) shape will be cut to a circle shape.

New features in WordPress Images block (added in WP 5.3)

Support for high resolution images

One of the biggest highlight of WP 5.3 is improved image processing on WordPress platform. Working with images has now two main features:

1. Resuming upload – If you’re uploading high resolution photos and internet connection fails, the upload process will continue automatically from interrupted point
2. Automatic image rotation – the latest released WP version ensures that incorrectly rotated images automatically rotate to the correct position as they are uploaded

Settings in Inspector

To configure the exact dimensions you can use the Inspector on the right hand sidebar in the editor. Image size settings offers ready to use formats such as thumbnail, medium, large or full size. You can set the width and height in pixels or percentages of course.

It’s very fast and practical because you can do all image resizing changes right inside WordPress Images block and everything in one place in block editor.

Other Images block settings

How to add URL address

Images can be used as static images or they can be also clickable and link to:

•   Media File
•   Attachment Page
•   Custom URL

How to edit picture in WordPress Image block

Every image can be edited after clicking on the pencil icon. Modal window with Media Library will be open where you can write alt text, title, caption and description. The same way as you’re already used to do it in older WordPress version with classic editor.

Why is it important to have these texts filled in?

If visitors click on the image to see it bigger, they see image Title (for example Citadela homepage) and not image filename. Also, if there’s any issue with loading the image, alternative text will be shown on your website.

Extra Tips

Besides all of these reasons and settings for WordPress Images blocks there is the most important thing. You could gain more visitors to your website using images. So how to get them?

Nowadays people are lazy to read. They prefer to scroll down the pictures to find answers. How come your photos and images can rank? Texts is the answer. Very important for SEO optimization is the perfect image title and description. Do not forget to fill in Alternative text. Then Google can better understand the image. So you would have a higher chance to rank it in the image search results.

2 ways how to add image caption

Adding image caption is using block editor very easy. Right under the image there is a space to write text. This is the first way – Caption is written to this exact image on given subpage.

Second way is to write image caption using pencil icon (Edit image) within Media Library. This way you’re adding image caption globally throughout the whole website. That means if you use the same image on three different places, it’ll always use this caption.

Do you like how easy is to add images in WordPress Image block? Try it by yourself!

Find out more about our brand new Citadela WordPress theme and its custom made layout packs. They were specially designed and developed for different kind of businesses and they also support the new way of editing content through WordPress block editor.