Answers
Sep 24, 2019 - 07:21 AM
Hello Jacky! The problems you have with images go from their poor integration into your website. Here you should think of image optimization. What do I mean?
#1 Optimize the size of Magento 2 images
Keep the aspect ratio of the original Image
The widespread problem of e-commerce development is that the uploaded photos of the products and product images on the web page have different aspect ratios. Let’s consider the example: you’ve taken a picture of the product. Its size is 1920 pixels high and 1080 pixels wide, thus its aspect ratio is 16:9. The dimensions of the product images on your website are limited by CSS, and it stands at, for instance, 600×600, so its aspect ratio is 1:1. As you can see, the aspect ratio of the original picture and product image are not equal. This is why the uploaded photo will be distorted in order to be fitted to the aspect ratio of the product image.
As a result, the image is distorted, which can be reflected by blurring, or a grainy or pixelated appearance. Will your visitors like such pictures? We don’t think so. Besides being unclear and looking weird, they don’t give a great impression of the product that you are selling, which is critical to your conversion rate. The best solution here is to keep the aspect ratio of the output product image the same as the aspect ratio of the original image.
Compress Images
You need to compress images in the most delicate way, without any deterioration, while providing significant size reduction.
SEO for the images
You need to specify alt tags for product images. They provide a better understanding of the web page for search engine crawlers.
#2 Use WebP to speed up Magento 2
Google recommends turning to the main rockstar among the image formats – WebP – an image format which was rolled out in 2010 by Google. Designed specifically for the web, it provides superior lossless and lossy compression for images.
Here you may find the detailed info about the ways to convert images in WebP - https://whidegroup.com/blog/optimizin...
Sep 26, 2019 - 06:51 PM
The good news is that learning how to optimize images will not only make your site look better - it should also help speed it up.
On an ecommerce site, images play a huge role in loading times and page speed, as well as overall appearance. Optimizing your images should also boost your conversion rates, since customers prefer fast-loading sites, and optimized images make your products look better. Here’s how to get your Magento images looking right.
Image via Pixabay
Use the Proper Format
First, make sure you’re saving your images in the best possible format before you upload them to your site.
For an ecommerce store, you have three image format options: JPEG, PNG, and GIF. You typically only need GIFs for animations, or for thumbnails and icons. This format uses a low file size, but the quality is also too low for all but the smallest images.
JPEGs are the most universal online image format. They offer a good balance between file size and image quality, so you can get nice images that won’t slow your site down much.
PNGs offer higher quality and a greater color range, but they also have larger file sizes. You’ll need PNGs if you want your images to have a transparent background, though - no other format lets you make the background transparent.
A JPEG is typically your best bet for most of your images. You can experiment with how much you compress your JPEGs to strike the right balance between image quality and loading time. However, PNG images fare best with multiple edits, since JPEG compression alters the image a bit during each edit and can result in distortion.
Check Aspect Ratios
The aspect ratio of an image tells you the relationship between its width and its height. For example, an aspect ratio of 1:1 tells you that the image has equal width and height.
Your site will limit images to a certain aspect ratio. If the aspect ratio on the site is different from the original aspect ratio of the images you upload, your images can end up distorted. This might make them look grainy or blurry. Check the aspect ratio of your site’s images, then make sure to only upload photos with the same aspect ratio.
Size Images Appropriately
When you upload photos with too many pixels, they can counterintuitively end up distorted, too. If you’ve tried these other tactics and your images still come out distorted or blurry, they might simply be too big (not just the file size, but the image itself). Try uploading smaller images and see what happens.
Compress Images Wisely
While there are a number of different image compression tools you can use, a Magento image optimization extension may give you the best results.
Apptrian, Sirv, and Potato Commerce all have great reviews, and save you from a lot of the manual image optimization work. While you’ll have to pay more for these extensions, they’ll often pay for themselves in time, by saving your time and making your site more attractive.
Since each Magento site is unique, it may take a bit of experimentation to find out exactly how to optimize images for yours. However, the answer to your difficulties with image appearance will lie in one of these optimization techniques - and the other suggestions here can also help by making your site faster. You can learn a lot by working on this project manually, but if you have lots of product photos to routinely upload, an extension definitely makes a worthwhile investment.
Dec 29, 2020 - 06:01 AM
Add New Comment