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 a 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!
Contents
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.
Then, you can select a product that you want to add/change images or create a new product and upload its images:
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.
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.
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 do 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) that 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.
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: https://console.developers.google.com/ and log in to your account. Then, search for “Youtube Data API v3”.
On the next page, click on ENABLE.
Then, choose Credentials on the left menu and click on + CREATE CREDENTIAL.
Here, you have to choose where API is called from and how your data is accessed.
After that, click on the What credentials do I need? button to get your API Key. Copy the key to configure in the backend.
- Step 2: Continue with the configuration in Magento 2 backend
Firstly, open your admin panel, navigate to STORES, choose Configuration under Settings.
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.
After that, navigate to CATALOG, and choose Products.
Then, you can select a product that you want to add/change videos or create a new product and upload its videos:
In the product detail configuration page, expand the Images And Videos section. Click on the Add Video button.
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’s Title, Description, and Preview Image will be automatically filled (but you can edit). Moreover, you can choose the Role of the video (similar to the images).
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 use a third-party extension that allows you to upload different video formats, then you can upload the video to the media folder and attach it 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 slowing down your page speed. If you don’t want people to see your videos on Youtube, just set it as personal and hide them 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!
