You need to specify alt tags for product images. You need to compress images in the most delicate way, without any deterioration, while providing significant size reduction. 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. 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. Will your visitors like such pictures? We don’t think so. This is why the uploaded photo will be distorted in order to be fitted to the aspect ratio of the product image.Īs a result, the image is distorted, which can be reflected by blurring, or a grainy or pixelated appearance. As you can see, the aspect ratio of the original picture and product image are not equal. 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. Its size is 1920 pixels high and 1080 pixels wide, thus its aspect ratio is 16:9. Let’s consider the example: you’ve taken a picture of the product. 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. Keep the aspect ratio of the original Image Here you should think of image optimization. It also has extra optimization tools: image compression and code structure optimization to provide the best page performance.Hello Jacky! The problems you have with images go from their poor integration into your website. With the Lazy Load extension, product information is only filled when a user scrolls down the pages, thus speeding up initial page rendering. Also, the compression can be activated on a frequent basis, so you don’t have to worry about it. This extension supports store admins to compress various types of images including PNG, JPG, GIF, TIF and BMP and even let you set the compression level. Image Optimizer for Magento 2 by Mageplaza Here are some useful extensions that can be suitable for your Magento store: The extension will do the work for you to ensure that your images don’t slow down the page load speed. Integrate third-party extensionsĪnother way to optimize your images is to use a Magento extension. For Magento, the official recommendation is Fastly as it is tightly integrated with Magento and brings added security benefits, along with full-page caching solutions. Use a CDNĪ CDN is another way to optimize your images on on-the-fly, without having to tamper with the source images. Of course the more sizes you create, the better it’s displayed on a device, but this can take up more space on your server. * Note: the recommended number of image sizes is 3-5. Magick convert picture.jpg -resize 500x300 picture-small.jpg To resize an image to fit within 500px wide by 300px high, run the following command: # macOS/LinuxĬonvert picture.jpg -resize 500x300 picture-small.jpg To resize an image to 54% of its original size, run the following command in your terminal:Ĭonvert -resize 54% picture.jpg picture-small.jpg JPEG images: Using JPEGTran find media/catalog/product/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile -small.jpg`). PNG images: Using OptiPNG optipng -o7 -strip all media/catalog/product/*.png.All cached images will also be optimized while you don’t have to refresh the cache. These command lines will rewrite your current images to an optimized version without changing the filename. Here are some tools you should use: GIFSicle, JPEGTran, OptiPNG. You can optimize your product images in bulk by running the compression on the image files in /media/catalog/product/. In this tutorial, we will show you ways to optimize images in your Magento store. Performance directly affects your bottom line-and since images are the most frequently requested type of resource on the Web, optimizing images should be the first step that you should think of when trying to improve your Magento store’s conversion rate.
0 Comments
Leave a Reply. |