The ultimate guide to adding images to your WordPress posts

Mis à jour le 17 January 2025

You’ve already written your first article on WordPress, that’s great! Now it’s time to add images to make your content more attractive. Without images, a post is like a day without sunshine: not very warm or bright. Images are a key element in winning your visitors’ attention and illustrating what you’re saying.

But how can you add images simply and effectively on WordPress? In this guide, we’ll help you understand the different image formats. And how to optimize them for the web and SEO? By following this step-by-step tutorial, you’ll be able to illustrate your articles and make them more attractive. You’ll see that it’s child’s play, and with these few tips, you’ll be able to improve the quality of your publications and offer your readers a unique experience.

Ready for the guided tour? Let’s get started!

If you’re in a hurry, you can take the side roads and go straight to the answers you need via the table of contents. And if you want to go even faster, go to the key points to remember, again using the table of contents below.

Step 1: Prepare your images for the web

Before adding images to your WordPress posts, it’s important to choose and prepare them carefully.

How do you choose the right images?

Choose images that are relevant to your content, that will attract readers’ attention, enrich your subject and reinforce your message. Avoid blurred or pixelated images that could detract from the visual quality of your article.

It’s better to have original images that illustrate your words and demonstrate your expertise. Indeed, what could be better than your own recipe photos for your cooking blog post 🧁.

However, it’s not always possible to make your own illustrations. Fortunately, you’ll find a number of free image banks on the web that can meet your needs. Among the most popular are Unsplash, Pixabay and Freepick, where you’ll also find illustrations, vector images, icons and PSDs. There are also WordPress plugins that let you upload and add images directly from your site.

And if you’re feeling inventive, you can always exercise your creativity with AI (Artificial Intelligence) tools such as Midjourney, DALL-E or Canva.

But before using any image, be sure to check the terms and conditions of use to avoid any copyright infringement and, if necessary, credit the author of the image.

What image formats should I use for WordPress?

WordPress natively supports the most common web image formats, such as JPEG, PNG and GIF. JPEG is ideal for photographs, offering a good compromise between quality and file size. PNG is recommended for images with transparent areas. GIF is mainly used for animations.

You can also use WebP and SVG images, which are modern image formats that improve your site’s loading speed, the visual quality of your images and the user experience of your visitors. Since WordPress version 5.8 (July 2021) WordPress supports WebP and you can upload them to your site directly, in the same way as JPEG, PNG and GIF formats. The SVG format is still not natively supported by WordPress for security reasons.

For the best use of the latter two image formats, we recommend that you install plugins.

How to choose the right image size for WordPress?

It’s also important to resize and optimize your images before adding them to your post. This will reduce their size and improve your page loading times. Image size and weight are key elements in optimizing your website’s loading speed and improving the user experience (UX).

First, let’s talk about image size. The size of an image refers to its dimensions, generally measured in pixels. The larger an image, the more pixels it will have, and the heavier it will be. The weight of an image refers to the amount of data it contains, which is why a very colorful image will be heavier than a black-and-white one, for example.

When you upload your image, WordPress will, by default, create a certain number of sizes for the different areas of your website. These range from thumbnail to full size. Your theme can also add custom sizes according to its configuration.

• Recommended image sizes for WordPress: it all depends on where your image will be used. For a blog post, a size of 1200 x 630 px is recommended for front-page images (or featured images), as it corresponds to the optimal format for sharing on social networks. It’s also the minimum size required for your article to be eligible for the Google Discover feed. An image of 800 x 600 px may be sufficient if you insert it in the body of the text. The size of your image depends above all on your page layout.
• Resizing and compressing images: before uploading them to WordPress, make sure your images are no larger than necessary, and resize them to the right size for the job. You can use image-editing software like Photoshop to resize, modify and edit images, or free online tools like I Love Img. Other online tools, such as TinyPNG or Compressor.io, only allow you to compress your images without sacrificing their quality. And of course, as is often the case with WordPress, there are also plugins that can help you automatically optimize your images during upload.

Respecting the appropriate dimensions and formats for each situation, resizing and compressing images before inserting them into your post: by following these tips you can optimize your images for the web and improve your site’s performance.

What is a featured image in a blog post?

WordPress has different types of image blocks, such as image, gallery and banner blocks, which you can integrate into your content, depending on the needs of your layout. Most Gutenberg plugins also have their own image blocks with varying degrees of functionality. Here, we’ll focus solely on the difference between the front-page image and the simple image block native to any WordPress installation.

The front-page image, or featured image in your editor, is an image that represents the content of your post. It’s usually displayed at the top or next to the title of your post, depending on your theme settings. It can also be found in article lists, category archive pages or in posts to social networks.

A “normal” image is one that you insert into the body of your text, wherever you like. It can be used to illustrate a particular paragraph, to complete a piece of information or, more simply, to decorate your content.

The difference between a featured image and a normal image lies in their function and placement. The front-page image is intended to draw attention to your article and give an overview of the subject. It’s the article’s main image. An image located in the content of your article, on the other hand, is intended to enrich your text and make it more pleasant to read.

Step 2: Adding images to a WordPress post

Once you’ve prepared your images, it’s time to add them to your WordPress post. Let’s get to work on our famous front-page image.

1 . Putting an image on the front page

In the right-hand column, go to the post tab, then open the “Featured image” drop-down menu. Click on “Set Featured Image”.

A “Featured image” window will open, giving you the choice of using an image already in your media library or importing your own carefully prepared image. In the latter case, you can either upload your image by dragging & dropping it from your computer, or by indicating to WordPress its location in your folder.

Once you’ve uploaded your image, you can now fill in the “Alternative text” field – you know, the famous alt tag, so important for accessibility (screen readers) and SEO – as well as the “Image name” field. If you don’t do it at this stage, don’t worry: you can always do it or modify it later. That said, there’s no need to waste your time with additional manipulations: you might as well fill in these fields correctly as soon as you upload your image 😉

Tadaam! 🥁 You’ve successfully inserted a front-page image in your WordPress post. You can, of course, delete the image and replace it in the same menu, if it doesn’t suit you.

Please note : the procedure for uploading an image is the same for the featured image or for any type of image.

2. Embedding an image in the body of an article

To insert the Gutenberg image block, native to WordPress, you have three options:

1. on the page, click on the “+”icon of theBlock Insertion Tool and search for “image” , then select your image block
2. on a new line, use the keyboard shortcut /image and press Enter, or click on the Image block icon in the pop-up menu
3. click on the “+” icon of theblock insertion tool to the right of the logo in the top bar of your page display an overview of the different block styles and search for “image”, then select your image block.

All that’s left is to choose the method that suits you best.

Step 3: Customize and adjust image display

Once you’ve inserted an image into your content with Gutenberg, you have access to a number of settings to customize its display. You can adjust its alignment, add a caption or alternative text (if you haven’t already done so in the previous step), modify its size or apply a color filter.

We’ve detailed below the various settings available for modifying your image. You probably won’t need them all, but you might as well know they exist if you want to use them.

1. Resize images

You can change the size of your images, although, as we saw earlier, it’s best to have your images well prepared beforehand to optimize page loading speed and improve user comfort.

To modify the size of your image, WordPress offers 2 possibilities:

1. choose from the sizes generated by WordPress or by your theme by clicking on the down arrow below the “Image size“ field
2. adjust the dimensions according to a predefined percentage: 25, 50, 75 and 100% of the original size. Or insert the dimensions of your choice, fixed in pixels in the block settings in the right-hand sidebar, once you’ve clicked on your image.
3. manually resize the image using the resizing handles represented by the two small circles to the right and bottom of your image. You can then visually choose the size you want. Your image will retain the same ratio. Simply drag these circles inwards or outwards until you reach the desired size.

If you’re not satisfied with the new dimensions of your image, simply click on the “Reset ” button in the bottom right-hand corner of the image size section of the sidebar 😉

Now let’s explore the adjustment possibilities offered by the toolbar above the image.

2. Aligning images

To align an image in your article, click on it, then on the “Align ” icon in the toolbar that appears above the image. You can choose to align the image to the left, center or right. You also have access to the Wide and Full width options, if supported by your theme or layout settings.

3. Linking images

You can turn your images into hyperlinks. To access the link settings, click on the “link” icon to the left of the “alignment” icon in the toolbar. You can choose the action that will be triggered by the user when clicking on the image: opening an attachment page, opening the original media file or opening the custom URL you want.

To create a link to your specific URL, simply enter it in the text box that appears. You can also link your image to a page or article on your site; WordPress will automatically search for the page when you start typing its title. All that’s left to do is select the page you want to link to your image. This is really handy when you’ve got a lot of content, as you don’t need to search your whole site for the URL of your pages!

You can also choose the link settings by clicking on the down arrow to the right of the URL field. You can choose to let the link open in the same tab or in a new tab when your visitor clicks on it.

4. Crop image and other toolbar editing tools

You can also crop your image directly in WordPress to meet a specific layout requirement. Still in the toolbar above your image that appears, by clicking on it, you have access to a “Crop ” icon to the right of the “Link” icon . Click on the icon and a new selection of editing tools will be available.

Let’s take a look at them: from left to right, you can use the following commands:

1. Zoom (the little magnifying glass): you can zoom inside your image up to 300% and move it by clicking and dragging to display the part of the image you wish to enlarge.
2. Proportion size (the little rectangle) : crop the image according to its ratio (width/height ratio). Among the available options, you can choose between the following settings:
   • Original size
   • Square
   • Landscape: 16:10, 16:9, 4:3, 3:2
   • Portrait: 10:16, 9:16, 3:4, 2:3
3. Rotate (the little circle with the semi-dotted arrow) : with a single click, you can rotate your image successively by 90°, 180°, 270° or 360°.
4. Apply: validate your changes to the image.
5. Cancel: to exit the image editing tools and abandon your modifications.

It’s important to note that modifications made to your image will create a new copy of the image in the WordPress media library, without affecting the original image.

5. Add text to your image

You can also add text to your image by clicking on the “Add text” icon (the A in an open square). The image block will automatically transform into a banner block, allowing you to write on your image. The paragraph block that will appear on your image is identical to the one you use to write your articles, and has the same settings.

6. Apply a two-tone filter to the image

You can apply filters to your image to personalize it even further. Image filters have the advantage of not weighing down your site, as they are CSS effects applied to your image. If you have a graphic charter with well-defined colors, you can even lighten your visuals by using black and white images (lighter than color images) and applying your own colors.

The image block already offers you a number of predefined filters, but you can choose any combination of colors. If you want to use this option, we recommend you experiment to find the ideal filter for your entire site.

In the example below, we’ve chosen a black and white photo and simply applied the purple and yellow duotone filter from the presets. The possibilities are endless, however, and it’s up to you to let your imagination run wild.

Let’s move on to the image block settings in the sidebar.

7. Rounding the image

The style tab in the sidebar gives you 2 options:

1. “Default”, i.e. display your image as you’ve inserted it.
2. “Rounded” to have the image appear as an oval (if your image was originally rectangular) or as a circle (if your image was square).

8. Fine-tune rounding with the “Radius” and “Borders” options

The “border”, as its name suggests, adds a line of color to the edges of your image. You can play with thicknesses and colors either uniformly, or individually for each edge.

To apply a uniform border, insert the number of pixels for the desired thickness. You can also choose your unit of measurement by clicking on the “px” icon: px, %, EM, REM, VW or VH. Then click on the “circle” icon to select the border color. We’ll see in the following illustration what options you have for modifying border colors.

It’s important to note that if you’ve applied a duotone filter to your image. This filter will also be applied to the borders.

To adjust individual borders :

1. first click on the “Link” icon icon, it will turn into a broken link and separate the edges from each other.
2. Proceed individually for each border, as in the previous example, to choose thickness and color.
3. Choosing a custom color: if you don’t wish to use the default WordPress colors, or those set in your theme, you can determine a different color by clicking in field number 3 (initially displayed in transparent), above the choice of preset colors.
4. Then enter the HEX code for your color, or select it using the sliders; the slider below is used to adjust transparency.

Not satisfied with your border modifications? No problem! Just click on the three little dots to the right of the borders tab (number 1 in the image) and then click on “Reset all” to return to the starting point and delete all your changes. And possibly start all over again from the beginning. 😃

Now let’s move on to customizing the “Radius “, bearing in mind that these two settings can be added together to give your image your style.

As with the customization of your borders, your images’ radius settings can be either uniform (the same settings applied to all four corners), or individual (a different setting for each corner).

Settings for radii and example of combination with borders :

1. To apply the same effect to all 4 sides: enter the value in pixels in the radius box. Alternatively, drag the slider until the desired visual is achieved.
2. To apply a different effect to each side: first click on the “Link” icon to unlink the radii. then enter the pixel values for each of the radii.
3. You can combine the two individual settings for borders and radii.

You can let your creativity run wild, but beware of the “Christmas tree” effect, and remember to remain consistent across all your visuals and maintain harmony throughout your site.

9. Add a caption

Putting a caption under your images can be useful for a number of reasons… among others, to contextualize and describe your image so that it’s better understood and, to improve SEO by using keywords and phrases that correspond to the subject of your article.

If you haven’t already written a caption when you uploaded your image to the WordPress media library, you can add it directly to your page. In the image toolbar, to the right of the “Alignment” icon, you’ll now find the “Caption” icon (the square with three small dots at the bottom), click and write in the text field that appears below your image. And that’s all there is to it: you’ve described your image!

PS: Since the release of WordPress 6.2, caption insertion has moved, so for those of you who haven’t yet upgraded 😱 we’ll leave you with the old method for a while longer. To activate the “caption” option, simply click on the image and write your text underneath, where you’ll see “Add caption”. And that’s it, you’ve described your image!

Be careful, however, not to confuse the caption with the alternative text: the caption will appear below the image, while the alternative text will be used by search engines and screen readers to describe the visual content.

10. Theadvanced tab

As the name suggests, this tab is mainly for advanced users who want to further customize the image’s appearance. This tab lets you add a title attribute, HTML anchor and custom CSS classes to your image block. Note that this tab is present on all WordPress Gutenberg blocks.

Key points to remember when adding images to your WordPress posts

• choose your images carefully appropriate formats (JPEG, PNG and GIF) and name them correctly
• optimize images in size and weight (use a compression tool to reduce file size without losing quality) before uploading them to WordPress
• name your image descriptively and use alternative text to improve your website’s accessibility and SEO.
• add the image to the article either by uploading it from your computer, or by choosing an image already present in the media library
• define an alignment and size to suit your page layout
• use visual effects settings (radii, borders…) if they match your graphic guidelines
• add a caption according to your needs

Using these settings, you can customize the appearance of your image so that it blends perfectly with your content and matches your branding style.

Pro Tips: if, as in this article, your content requires a number of illustrative images, you can upload them all at once to your media library to save time when editing. In this case, don’t forget to fill in the alternative text for your images when inserting them into your page. Above all, don’t forget that images should be used sparingly: too many images on a page will weigh it down considerably and slow down its download time.

Conclusion

Have you had the courage to read this far? Congratulations! Now you’re ready to illustrate your articles with images that match your text. Your articles will become even more attractive. They’ll engage your readers, who’ll be more inclined to devour your content and share it on their social networks. And, as the icing on the cake, with your SEO-optimized images and faster pages, you’ll be able to give Google and co. a run for their money.

But even if posting an image with Gutenberg has become child’s play for you, don’t get carried away by the evil power of personalization, or you’ll spend hours tweaking every detail of your image! Remember, the main purpose of an image is to make your article more attractive to your readers.

And if you still have questions, don’t hesitate to ask!