The first thing a customer sees when they land on your product page is the image of the actual product. So let’s dive into the fact of how important adding a product image actually is.
SO HOW DO IMAGES OF PRODUCTS IMPACT THE BUYING PROCESS?
Online retailers frequently utilise product images as a method of showing and promoting their items to anyone who may be interested in making a purchase from them. Do you realise that a single photo that catches a customer’s eye can change their perception of a product?
If a person isn’t sure of what he or she is about to buy, then they may step back. Images help in these cases as they assure the customer and give the customer a rough idea about how the actual product is going to be and establish a trust relationship before the seller and the buyer of course. Thanks to Magento, we can now put images to help the buyers get a real life feeling of the product before they actually buy it as it will ultimately lead to the satisfaction of the customer to a greater point.
Some Statistics on Image Product Reviewing
There are also a few of significant statistics regarding reviewing of product images before buying online that you should be aware of:
87.6% of respondents ranked the quality of the product pictures as the most significant aspect of the overall shopping experience, graphics are the single most influential factor for 75% of customers when making a purchase decision online.
The quality of the product photographs displayed on websites powered by Magento 2 significantly impacts the opinions formed by customers. When it comes to providing a description of a product on a website, a picture truly is worth a thousand words. Customers who make their purchases online are deprived of the sensual touch experience. Because of this, an image is used in its place.
A large selection of goods, which may be differentiated from one another based on a number of qualities (such as category, style, colour, fabric, design, and so on), are displayed in an online store. These items can be presented in many different ways. The potential purchaser will be drawn to the image and want to click on it to make it bigger. When customers zoom in on product photographs, they may get a better sense of whether or not a particular item is a suitable fit for them.
Consequently, it would be best if you always allowed the consumer to view the goods from a minimum of four and five different angles. On the other hand, you risk irretrievably losing any images you submit that are of poor quality.
When it comes to swaying the judgement of a customer in today’s society, which places a strong emphasis on aesthetics, a picture truly is worth a thousand words.
Now, we’ll go over the basics of how to add product image in Magento and discuss how to optimise them.
How to Add Product Image in Magento?
Magento’s adaptability and customization make it possible to incorporate multiple approaches to adding product photos. In this post, we’ll look at four different ways to add photos to a Magento product page: through the admin panel, programmatically, through an import, and through the REST API.
Method 1: Use the admin panel to add a product image
The simplest method is adding a product image using the Magento admin panel because it only needs a basic understanding of the admin panel.
- Access the administrative panel. You will reach the list of products in your shop as you browse to Catalog -> Products.
- Press Edit after selecting the product to which you want to add an image. The product configuration menu will appear.
- To access the Images and Videos area, scroll down. Select one or more photographs to upload to the product page by clicking the grey icon.
- The picture file types that should be uploaded are gif, jpg, jpeg, or png.
- Click the basket icon in the bottom left corner to erase an image.
- To access the Image Detail configuration menu, click the image.
Method 2: Programmatically add the product image
If you are a skilled enough developer, you may write a script to add a product image to Magento.
For adding product photos, the following specialised module and declared a console command has been made.
use Symfony\Corponent\Console\Command\Comand;
use Symfony\Corponent\Console\Input\InputInterface;
use Symfony\Corponent\Console\Output\OutputInterface;
use Magento\Framework\App\State;
use magento\Catalog\Api\ProductRepositoryInterface;
Class AddImageToProduct extends Comand
{
/**
* avar ProductRepositoryInterface
*/
private $productRepository;
/**
* avar State
*/
private $state;
public function _construct(
ProductRepositoryInterface $productRepository,
State $state,
$name – null
)
{
$this →productRepository – $productRepository;
$this →state – $state;
parent :: _construct($name);
}
Protected function configure()
{
$this→setName(‘ example:add-image ‘);
$this→setDescription( ‘this command add an image to the product’ );
parent :: configure();
}
Protected function execute(InputInterface $input, OutputInterfce $output)
{
// add and image
$this→state→setAreaCode( ‘adminhtml’ );
$product – $this→productReository→getById(1);
$imagePath – ‘image.png’; // put image at pub/media directory
$product→addImageToMediaGallary($imagePath, [‘image’, ‘small_image’, ‘thumbnail’ ], false, false):
$product→save();
}
Method 3: Add a product image using the import
- Import is an additional method of adding an image of the product in Magento. The image will be uploaded to Media Storage, an external server, or the Magento server.
- You need to include a forward slash before the file name of each picture because Magento automatically constructs an alphabetically arranged directory structure for product photos.
- Go to System -> Import after logging in to the admin panel. You’ll eventually reach the import menu page. To see an example of how your future CSV file should look, click the -Download Sample File button.
- Enter the product SKU in the SKU column and add the base image, base image label, thumbnail image, thumbnail image label, a small image, and small image label columns to submit product photos.
- Additionally, you must include the name of the image you are uploading.
- Upload the picture in the pub/media/import folder
- Select the uploaded image file and specify the folder to which you want to save it. -Check your work by pressing Check Data before pressing the Import button.
NB: Enter the /pub/media/import path in the file directory field.
Method 4: Add a product image using a REST API
The last method is to add a product image via a REST API. This is a great non-admin method to upload product photographs if you are considering integrating with third-party services or have previously done so.
Send the following request to http://yourstoreurl/index.php/rest/V1/products/sku/media:
Through PostMan, a specialist service, the request is sent.
So, today’s lesson on adding a product image in Magento 2 and its significance in e-commerce platforms came close. The information provided was hopefully of some use to you.
Product Image Optimization Guide for Magento 2
Having accomplished the Magento 2 programmatic product image addition,
Convert Your Photos to a Lower Resolution & Save on Storage
The efficiency of search engine optimization (SEO) correlates directly to how quickly a page loads. According to Google, its consumers prefer websites that load faster, which improves the quality of the web as a whole (especially for those users with slow Internet connections). If you want to determine how user-friendly your website is, Google suggests using tools such as Webpagetest.org and PageSpeed Insights.
With Magento 2, the “Frontend Resizes” function makes it easy to minimise the size of the majority of photographs without making any changes to the source file. On the other hand, if you need to speed up your page even further, you might want to think about optimising the images in Magento 2.
Lossy and lossless compression are the two methods available for reducing the size of image files.
It would be fantastic if you could reduce the size of your files as much as possible. Customers should be given the choice of viewing the photographs in a larger pop-up window or on a separate page if they wish to increase the number of online transactions they make. This is because high-quality pictures are essential to the success of online businesses.
It is not suggested to utilise HTML code to reduce a large photo file before uploading it to your website. Doing so can increase the time it takes for the page to load. The maximum size that can be assigned to a file is 70 KB.
One method for increasing the speed of a page without negatively impacting the user experience is to load images asynchronously.
Modify the File Type
It is possible to reduce the size of files by using the appropriate file format. Images used in online shops can be saved in many file formats, including GIF, JPEG, PNG, and WebP.
Because it enhances quality without adding significantly to file sizes, WebP has emerged as the dominant format. What is it exactly about this framework that has made it so appealing to so many people?
There are three primary advantages to converting your product photographs to the WebP format:
- Because WebP images take up such a small amount of storage space, they load significantly more quickly than any other image file type.
- Because of WebP’s improved compression, less information must be kept in an online storage space. High-image-volume You cannot ignore WebP if you are operating a Magento 2 website; it has the potential to save you money on web hosting costs.
- WebP is the only picture format that supports transparent backgrounds in PNG files and animation features in GIF files, making it superior to JPEG in terms of compression. WebP is also the only format that can save images as WebP files.
You can automatically convert photos saved in PNG, JPG, and JPEG file formats to WebP with the help of the Magento 2 Convert Images to WebP module. This can considerably reduce the time it takes for your website to load and display content.
You also can select which pages, if any, should have the image format changed on those pages. Each of the four major page types can be customised to fit the user’s requirements.
- Categories of Products
- Portal Page
- Content Management System
- Home Page
Magento 2 Convert Images to WebP has the finest customer policy available, including one year of free support, lifetime updates, no cost for setup, and a 30-day money-back guarantee.
Preferably provide a visual sitemap
This step is critical if you want to boost SEO results since it provides the search engine with more data to work with throughout the crawling process.
Having an image sitemap can assist search engines in identifying obscure photos. You can use the Magento 2 API to programmatically add images to a product sitemap or create a new sitemap specifically to add pictures.
Create Alt Text
The use of alt-text has revolutionised search engine optimization and the ability to draw attention to a picture when a potential consumer uses Google Image Search.
An alternative text will be provided if an image cannot be shown. Image description text (alt text) is also used so that search engines can understand the picture. Alt text should include at least one keyword, but it’s important not to stuff it. Avoid using keywords that have nothing to do with the image’s subject matter; doing so could get you penalised by search engines.
Name your image files with descriptive words
You can give the picture file a name before using Magento 2’s programmatic capabilities to add it to a product, although doing so is optional.
Identify mental pictures by naming words that comprehensively and precisely explain them. It’s possible that “red-running shoes” is a more appropriate replacement for “Image01.” The topic matter of the image is communicated to search engines via the image’s file name. It is recommended that the name of the image file contain a term for which you would like to rank.
To avoid a drop in ranking, though, don’t overstuff your documents with keywords and don’t give their file names too much thought. Instead of using underscores, which merge the words, separate them using dashes to avoid confusion. You should avoid using filler phrases such as “the,” “a,” and “an” as additional safety measures.
