Latest news

How To Upload And Optimize Images And Videos In Magento 2?

No comments

To begin with, it’s fundamental to know how to upload as well as optimize images and videos for products in Magento 2. Most of Magento 2 stores have a wide range of products and related images and videos; if they don’t know how to use their resources effectively, the site performance will be negatively affected. As the result, your customers might have the bad shopping experience with your store.

Therefore, in this post, we will show how to upload the images/ videos on your site step-by-step and also give you some useful tips to optimize your resources and get the best performance. Let’s get started!

1. Upload and Optimize Images In Magento 2

Here are 3 easy steps to upload product images in Magento 2 backend:

Firstly, navigate to the product you want to add images for. Open your admin panel, navigate to CATALOG, and choose Products.

how to upload product image magento 2

Then, you can select a product that you want to add/change images or create a new product and upload its images:

magento 2 upload image

In the product detail configuration page, expand the Images And Videos section. Click on the Browse to find or drag image here to upload a product image from your computer.

upload images in product detail m2

Next, click on the image you have uploaded to add image detail. Remember to add the Alt Text that is good for SEO, select the Role (Base/ Small/ Swatch/ Thumbnail) that will decide the display position of the image on the site. It’s worth noting that an image can have multiple roles at the same time.

magento 2 product images

Save the config to complete.

Apart from that, here are some useful advice for you to optimize images of the products in Magento 2:

  • Prepare your images in the right format: PNG is the best and common format for transparent and high-quality images. However, if your site is highly dependent on images, you can combine both PNG and JPEG formats to not have a negative impact on website performance.
  • Get a balance between image size and resolution: The resolution of an image must be corresponding to the size of its display on the web. For example, you don’t need to use a high-solution for just a small thumbnail.
  • Use a professional tool to handle the images: Now there are many tools (both free and paid) allow us to compress and optimize images to decrease the files’ size while the quality is not affected significantly.
  • Ask your developers/ designers to give a standard image size for each image/banner on the site: If you turn to a professional Magento development company to build your website, they can help you to define specific sizes for all images on your site. With their experience, they could show you the optimal sizes to display the images at the highest quality while still assuring high website speed.

optimal image size magento 2

2. Upload and Optimize Videos In Magento 2

In Magento 1, it’s quite complicated to upload videos but if your site is based on Magento 2, it’s much easier. Magento 2 allows us to embed videos from Youtube or Vimeo on the product pages by default. Here are several steps to upload your videos to Magento 2 product page:

  • Step 1: Create Youtube API Key

Firstly, you have to go to the Google Developers Console: and log in to your account. Then, search for “Youtube Data API v3”.how to upload video magento 2

In the next page, click on ENABLE.

magento 2 upload video

Then, choose Credentials on the left menu and click on + CREATE CREDENTIAL.
product video magento 2

Here, you have to choose where API is called from and how your data is accessed.
embed youtube video magento 2

After that, click on the What credentials do I need? button to get your API Key. Copy the key to configure in the backend.
get youtube api key for magento 2

  • Step 2: Continue with the configuration in Magento 2 backend

Firstly, open your admin panel, navigate to STORES, choose Configuration under Settings.

video configuration magento 2

In the left menu, expand CATALOG and choose Catalog. Then, expand the Product Video section and enter your copied Youtube API Key in the first step.

add youtube api key in magento 2After that, navigate to CATALOG, and choose Products.

how to upload product image magento 2

Then, you can select a product that you want to add/change videos or create a new product and upload its videos:

magento 2 upload image

In the product detail configuration page, expand the Images And Videos section. Click on the Add Video button.

upload images in product detail m2

Here, you have to enter the URL of the Youtube video you want to embed on the site. Once the URL is entered, the video Title, Description and Preview Image will be automatically filled (but you can edit). Moreover, you can choose the Role of the video (similar to for the images).

upload new video magento 2

Save the config and clear cache to complete.

Notes: It would be more complicated if you want to upload a video from your computer (not via Youtube). What you need to do is using a third-party extension that allows you to upload different video formats, then you can upload the video to the media folder and attach to a special product.

Besides, here are some advice for optimizing Magento 2 product videos:

  • Embedded videos are highly suggested: It’s not only easier to embed videos from Youtube/Vimeo but also beneficial to your website performance. If you upload a video to your media (even a short one) can contribute to slow down your page speed.  If you don’t want people to see your videos on Youtube, just set it as personal and hide it from others.
  • Optimize your self-hosted videos: In case that you still want to use the self-hosted videos, it’s essential to optimize them before uploading. It’s not recommended to upload videos that are longer than 1 minute.

We have shown you how to upload as well as optimize images and videos in Magento 2 websites. Hope you find it useful!

Read More:

Magento Migration Essentials – 5 Crucial Phases [Infographic]

How To Migrate Magento 1 To 2 With 100% Success Rate?

Migration To Magento 2: Hidden Costs

[Hot Release] Address Autocomplete Extension For Magento 2

5 Reasons Why Many Merchants Don’t Want Magento Migrations

1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 5.00 out of 5)


April LeeHow To Upload And Optimize Images And Videos In Magento 2?

Leave a Reply

Your email address will not be published. Required fields are marked *