{"id":80468,"date":"2023-03-13T09:51:26","date_gmt":"2023-03-13T09:51:26","guid":{"rendered":"\/tutorials\/?p=80468"},"modified":"2026-03-10T09:28:34","modified_gmt":"2026-03-10T09:28:34","slug":"how-to-add-images-wordpress","status":"publish","type":"post","link":"\/ca\/tutorials\/how-to-add-images-wordpress","title":{"rendered":"How to add images to WordPress using the block and classic editor + steps to edit images"},"content":{"rendered":"

Using images can make your WordPress blog posts more appealing, as they break up lengthy text. Moreover, adding images will help you illustrate your points.<\/p>

With the right image optimization strategy, you can also improve your WordPress site performance and position in search engine results pages (SERPs). The process involves various practices like optimizing the image size, file format, and ratio.<\/p>

In this article, we’ll show you how to add images to a WordPress blog post or page via the block and classic editors, as well as the Media Library. You will also learn how to edit the image size and details in the WordPress CMS.<\/p>

Download all-in-one WordPress cheat sheet<\/a><\/p>

\n\n\n\n\n<\/p>

How to Add Images to WordPress Using the Block Editor<\/h2>

The block editor, also known as Gutenberg<\/a>, is the default WordPress editor that uses blocks<\/a> to add elements like images, paragraphs, and headings. It also enables you to add a post to a dedicated blog page<\/a> using the Query Loop block.<\/p>

Adding images with the Gutenberg editor is relatively easy. All you have to do is upload an image file from your local computer, select one from the Media Library, or insert it via a URL. In this section, we’ll go over all these methods.<\/p>

First, log in to your WordPress dashboard and create a new post. In the post editor screen, insert the Image block using the Toggle Block Inserter<\/strong> button. Alternatively, use the keyboard shortcut \/images<\/strong> to quickly add the Image<\/strong> block to the editor.<\/p>

\"\"<\/a><\/figure>

Adding an Image from Local Computer<\/h3>

To add an image file from your computer, follow the steps below:<\/p>

    \n
  1. Click the Upload<\/strong> button on the Image<\/strong> block to open your computer’s files.<\/li>\n<\/ol>
    \"WordPress<\/a><\/figure><\/div>
      \n
    1. Navigate to the folder where you store the images. Select an image and click Open<\/strong>.<\/li>\n<\/ol>
      \"Windows<\/a><\/figure><\/div>

      Here is an example of an image in a blog post:<\/p>

      \"WordPress<\/a><\/figure><\/div>
        \n
      1. Save the changes.<\/li>\n<\/ol>

        Inserting an Existing Image from Media Library<\/h3>

        Alternatively, try inserting images from the Media Library. Here are the steps:<\/p>

          \n
        1. Click the Media Library<\/strong> button on the Image block.<\/li>\n<\/ol>
          \"WordPress<\/a><\/figure><\/div>
            \n
          1. Select an existing image from the Media Library and click Select<\/strong>.<\/li>\n<\/ol>
            \"The<\/a><\/figure><\/div>
              \n
            1. Save the changes.<\/li>\n<\/ol>

              Adding an Image via a URL<\/h3>

              The Image block enables you to insert an image using a custom URL. To do so, follow the instructions below:<\/p>

                \n
              1. Click the Insert from URL<\/strong> button on the Image block to open the URL text field.<\/li>\n<\/ol>
                \"WordPress<\/a><\/figure><\/div>
                  \n
                1. Copy the URL that contains your preferred image. For this tutorial, we took a picture from Unsplash<\/strong>. Right-click on the image and select Copy image address<\/strong>.<\/li>\n<\/ol>
                  \"An<\/a><\/figure>
                    \n
                  1. Go back to the block editor and paste the URL to the field. Click the Apply<\/strong> button or hit Enter<\/strong> on your keyboard.<\/li>\n<\/ol>
                    \"WordPress<\/a><\/figure><\/div>
                      \n
                    1. Save the changes.<\/li>\n<\/ol>

                      Moreover, WordPress enables you to set a featured image<\/a> or a post thumbnail. Here are the steps to do so:<\/p>

                        \n
                      1. From the block editor, open the block settings panel by clicking on the gear icon<\/strong> between the Publish<\/strong> button and the three dots<\/strong> menu.<\/li>\n<\/ol>
                        \"WordPress<\/a><\/figure><\/div>
                          \n
                        1. On the settings panel, navigate to the Post<\/strong> tab → the Featured image<\/strong> section. Next, click the Set featured image<\/strong> area.<\/li>\n<\/ol>
                          \"WordPress<\/a><\/figure>
                            \n
                          1. In the Media Library window, either upload a new image or select an existing one. Once added, click the Set featured image<\/strong> button.<\/li>\n<\/ol>
                            \"The<\/a><\/figure><\/div>
                              \n
                            1. Save the changes.<\/li>\n<\/ol>

                              Adding an Image from Openverse<\/h3>

                              WordPress 6.2<\/a> comes with Openverse<\/strong> integration, allowing you to add openly-licensed images directly from your editor.<\/p>

                              To access this feature, select the block inserter from the top-left corner of the editor screen and open the Media <\/strong>tab. Click Openverse <\/strong>and select or search for any image to add it to the editor. WordPress will automatically store the image in the media library.<\/p>

                              \"The<\/a><\/figure><\/div>

                              How to Add Images to WordPress Using the Classic Editor<\/h2>

                              To add images using the classic WordPress editor<\/a>, you will need to install the Classic Editor plugin<\/a>. This is because newer WordPress versions don’t have the classic editor by default.<\/p>

                              Once the plugin is activated, set the classic editor as default. From the WordPress dashboard, navigate to Settings<\/strong> → Writing<\/strong> → Default editor for all users<\/strong>. Then, check the Classic edito<\/strong>r option and click Save Changes<\/strong> to confirm.<\/p>

                              Unlike the block editor, adding images to a WordPress post using the classic editor can be done via the Media Library. Here are the steps:<\/p>

                                \n
                              1. Create a new WordPress post and open it using the classic editor.<\/li>\n\n\n\n
                              2. Click the Add Media<\/strong> button to open the Media Library.<\/li>\n<\/ol>
                                \"WordPress<\/a><\/figure><\/div>
                                  \n
                                1. On the Add Media window, select the Upload files<\/strong> tab and click the Select Files<\/strong> button to upload an image.<\/li>\n<\/ol>
                                  \"The<\/a><\/figure><\/div>
                                    \n
                                  1. Once the upload process is complete, click the Insert into post<\/strong> button to add the image to the editor.<\/li>\n<\/ol>
                                    \"The<\/a><\/figure>
                                      \n
                                    1. Save the changes.<\/li>\n<\/ol>

                                      How to Add Multiple Images Using WordPress Media Library<\/h2>

                                      The WordPress Media Library<\/a> is a library that stores media files, such as videos, images, audio, and documents, in one directory. It also lets you upload multiple images at once.<\/p>

                                      Follow the instructions below to upload images to the Media Library:<\/p>

                                        \n
                                      1. From the WordPress dashboard, navigate to Media<\/strong> → Library<\/strong>.<\/li>\n\n\n\n
                                      2. In the Media Library screen, click the Add New<\/strong> button.<\/li>\n<\/ol>
                                        \"The<\/a><\/figure><\/div>
                                          \n
                                        1. Click the Select Files<\/strong> button to upload images from your computer. Alternatively, drag and drop<\/strong> them into the provided field.<\/li>\n<\/ol>
                                          \"The<\/a><\/figure><\/div>
                                            \n
                                          1. Wait until the upload process is complete. Once finished, you can add the images to a page or post.<\/li>\n<\/ol>

                                            How to Edit Images in WordPress<\/h2>

                                            WordPress enables you to edit images, such as changing the size and adding details. In this section, we will show you how to use these features.<\/p>

                                            How to Edit Your Image Size in WordPress<\/h3>

                                            You can crop and scale an individual image via the Media Library. Follow the steps below:<\/p>

                                              \n
                                            1. Open the WordPress admin dashboard and go to Media<\/strong> → Library<\/strong>.<\/li>\n\n\n\n
                                            2. Select a picture you want to resize.<\/li>\n\n\n\n
                                            3. In the image settings or attachment details window, click the Edit Image<\/strong> button.<\/li>\n<\/ol>
                                              \"The<\/a><\/figure><\/div>
                                                \n
                                              1. Go to the Scale Image<\/strong> section on the right side of the image settings screen, then define new dimensions. Note that you can only scale images down.<\/li>\n<\/ol>
                                                \"The<\/a><\/figure>
                                                  \n
                                                1. Click the Scale<\/strong> button to confirm the changes.<\/li>\n<\/ol>
                                                  \"The<\/a><\/figure><\/div>

                                                  It is also possible to change the WordPress images sizes<\/a> to fit your preference and help optimize your images<\/a> for increased web page speed and enhanced user experience.<\/p>

                                                  Here are the steps to create custom sizes for these WordPress images:<\/p>

                                                    \n
                                                  1. From the WordPress admin dashboard, navigate to Settings<\/strong> → Media<\/strong>.<\/li>\n\n\n\n
                                                  2. On the Media Settings screen, edit the values for the image max width and height.<\/li>\n<\/ol>
                                                    \"The<\/a><\/figure><\/div>
                                                      \n
                                                    1. Save the changes.<\/li>\n<\/ol>

                                                      Alternatively, you can edit the image dimensions directly in the block editor. This is useful if you want to adjust the image based on the content around it.<\/p>

                                                      To do so, open the post or page that contains the image you want to edit, and follow these steps:<\/p>

                                                        \n
                                                      1. Select the Image <\/strong>block you want to edit.<\/li>\n\n\n\n
                                                      2. Open the block settings panel by clicking on the Settings <\/strong>button on the top right corner of the editor and open the Block <\/strong>tab.<\/li>\n\n\n\n
                                                      3. You can customize the image in several ways. First, you can select an aspect ratio from the Aspect Ratio <\/strong>dropdown menu to automatically adjust the image size using the predefined ratio.<\/li>\n<\/ol>

                                                        Alternatively, you can use the Width<\/strong> and Height<\/strong> fields to define a custom dimension.<\/p>

                                                        \"Custom<\/a><\/figure><\/div>

                                                        How to Edit Image Details in WordPress<\/h3>

                                                        Additionally, WordPress lets you edit the details of the images. For example, you can add alternative text<\/a> or alt text, a description, and a caption.<\/p>

                                                        In this section, we will show you how to insert details into your images. Follow the instructions below:<\/p>

                                                          \n
                                                        1. From the WordPress dashboard, open the Media Library<\/strong> and pick an image.<\/li>\n\n\n\n
                                                        2. In the image settings window, add details to your image, such as Alternative Text<\/strong>, Title<\/strong>, Caption<\/strong>, and Description<\/strong>.<\/li>\n<\/ol>
                                                          \"The<\/a><\/figure><\/div>
                                                            \n
                                                          1. Once finished, click the Close<\/strong> button to confirm the changes.<\/li>\n<\/ol>

                                                            Conclusion<\/h2>

                                                            Adding images to a WordPress website is a great way to make your content look more engaging and enhance your SEO performance.<\/p>

                                                            In this article, we provided a complete guide about adding images to your site via the WordPress block editor, the classic editor, and the Media Library. The methods are similar, so you can choose one that fits your preference.<\/p>

                                                            Hopefully, this article has helped you understand how to add images in WordPress. If you have questions or difficulties, feel free to comment below, and we will give you answers. Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                            Using images can make your WordPress blog posts more appealing, as they break up lengthy text. Moreover, adding images will help you illustrate your points. With the right image optimization strategy, you can also improve your WordPress site performance and position in search engine results pages (SERPs). The process involves various practices like optimizing the […]<\/p>\n

                                                            Read More…<\/a><\/p>\n","protected":false},"author":258,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Add Images to WordPress: Classic and Block Editors","rank_math_description":"Find out how to add images to WordPress, either by adding the images directly to the block or classic editor or by using the media library.","rank_math_focus_keyword":"how to add images to wordpress","footnotes":""},"categories":[1],"tags":[],"class_list":["post-80468","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-images-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-images-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/80468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=80468"}],"version-history":[{"count":13,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/80468\/revisions"}],"predecessor-version":[{"id":137936,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/80468\/revisions\/137936"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=80468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=80468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=80468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}