The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

How to Insert Images in Magento 2

Besides knowing how to optimize images, inserting images is an essential task when you create a new page on your store. It enables you to beautify your pages and showcase your products more easily. When customers can visualize more clearly, they tend to stay longer to explore.

Magento 2 provides the WYSIWYG editor tool, which allows you to work in a “What You See Is What You Get” view of the content. And on the WYSIWYG bar, you can see the Insert Image icon, just tap it to add any image you need on the CMS page. Besides, another way you can use is provided by Media Storage. So in this tutorial, we will guide you how to insert the image in two ways.


Lazy Loading

Lazy Loading for Magento 2

Improve site performance and reduce bounce rate due to slow page load

Check it out!


How to Insert Images in Magento 2

Method 1: Insert an Image from Media Storage

This method is suitable if you have images ready at the Media Storage:

  1. Click on the Show/Hide Editor button if you want to work directly with the code.
  2. Place the cursor at the position you want to insert the image. Then, click on Insert Image.
  3. From the list of files shown on the popup box, select the item to use and hit the Insert File button.
  4. To view the image in WYSIWYG mode, tap Show / Hide Editor again.

Method 2: Insert an Image from Another Server

You can use this method if an image is online and included in another server. The full URL of the image is required to insert it.

How to Insert Images WYSIWYG Editor

  1. Click on Show/Hide Editor button if you want to work directly with the code.
  2. Place the cursor at the position you want to insert the image. Then, click on the Insert Image icon.
  3. From the list of file shown on the popup box, select the item to use and hit the Insert File button.
    • Enter the full URL of the image in the Image URL field.
    • Enter some descriptions for the Image Description field.
    • Enter the title for the Image Title field.
  4. Click Insert to finish the inserting process.

The bottom line

You are free to choose one method from above to Insert Images in Magento 2. You can also optimize your images by reading other posts below, or use Mageplaza Image Optimizer to create an engaging frontend. Feel free to mention your concerns, we are happy to help you out if you need anything.


Image Optimizer

Image Optimizer for Magento 2

Speed up page loading & enhance the user experience for your store

Check it out!


Related Post

Looking for
Customization & Development Services?

8+ years of experiences in e-commerce & Magento has prepared us for any challenges, so that we can lead you to your success.

Get free consultant
development service
x

    Explore Our Products:

    People also searched for

    Subscribe

    Stay in the know

    Get special offers on the latest news from Mageplaza.

    Earn $10 in reward now!

    Earn $10 in reward now!

    comment
    iphone
    go up