Optimize Images on Your Magento Website using ImageKit

Magento is one of the most popular eCommerce platforms to develop a shopping website. More than 250000 merchants use Magento to sell online. Facing competition from Shopify, WooCommerce, and many other such platforms, Magento still ranks at the first position by capturing 29% of the e-commerce stores.

Having a website to sell is the first step towards building a successful e-commerce business but there is always a challenge of improving the conversion rate.

Many factors have a direct impact on conversion rate, the most important factor is user experience.

Visitors to your online store goes through a series of steps before they make a purchase. The first very important touchpoint for them is the product images. Yes, those beautiful product images that lure them to ultimately buy the actual product. Therefore it is very important that these images load as quickly as possible, despite slow internet connection. That is why image optimization is very critical to the success of your business.

It’s not very easy to do it all on your own. A lot goes into optimizing images – choosing the right image format, resizing to the required dimension and properly integrating CDN. But with ImageKit you can achieve all this in few minutes.

ImageKit offers a very simple integration which allows you to optimize images on a Magento website instantly.

Steps to integrate ImageKit with Magento

  1. First, create an account on ImageKit and choose your ImageKit Id. It can be your website name or any number that works fine for you. This ImageKit Id will be used as a unique identifier in your URL and will help you to access the images. For example: https://ik.imagekit.to/<imagekit id>
  2. After registering with ImageKit, you can log in and access your Dashboard.
  3. Click on “Add Sources” and attach your Magento Website as a Web Folder image source. Put the base URL of your Magento website.
  4. Now it’s time to configure the settings of your Magento site. In Magento 2, go to Stores -> Configurations -> Web
  5. Under Base URL (secure), fill https://ik.imagekit.io/<imagekitID>/ in the field – Secure Base URL for User Media Files.
  6. Under Base URL, fill http://ik.imagekit.io/<imagekitID>/ in the field – Base URL for User Media Files.
  7. If you are using ImageKit to serve CSS and JS files as well, then fill http://ik.imagekit.io/<imagekitID>/ in the field Base URL for Static View Files and http://ik.imagekit.io/<imagekitID>/ in the field Secure Base URL for Static View Files.
  8. If you plan to use custom CNAME of your own domain, then please get in touch with us at developer@imagekit.io
optimize images on a magento website
Magento Web Configuration Screenshot

Save settings, clear cache. Open developer tools to check if all images are being delivered through ImageKit. Compare page speed score before and after ImageKit. There should be no image related warning left.

We are always there to help you in case of any doubt. Just drop an email at developer@imagekit.io and get the expert assistance.

Our customers have observed better image quality using ImageKit resizing parameters instead of Magento’s default. In the subsequent post, we will cover how to edit theme files and start using ImageKit real-time image resizing parameters. Stay tuned!