Magento is one of the most popular eCommerce platform to build your own self-hosted eCommerce business.
ImageKit.io offers a straightforward integration to optimize all the images on your Magento website. Here is what you need to do:
Let's quickly fetch the image using ImageKit.io URL-endpoint and see if it's working.
When you add the first origin in your account, it automatically becomes accessible through the default URL-endpoint, that is
https://ik.imagekit.io/your_imagekit_id. Otherwise, you will have to configure an existing URL endpoint or create a new one to fetch images from this newly added origin.
If your old image URL was
https://www.example.com/media/catalog/product/p/p/pphsaj50030132-2_1.jpg , then the same image should be accessible through new URL. i.e.
Once the above image works with the ImageKit.io URL endpoint, you will need to make changes within the Magento admin panel to switch the image delivery and optimization to ImageKit.io.
In Magento 2, go to Stores ➡ Configurations ➡Web:
Fill Base URL for User Media Files with the
your_imagekit_url_endpoint/media/. Note that we added
/media/ in the end.
Save these settings.
Use the sidebar to navigate to System ➡ Cache Management and Flush Magento Cache. Learn about cache management in Magento.
Refresh the webpage of your Magento storefront, and you should see images loading via ImageKit.io.
You can also use ImageKit.io to deliver non-image type static assets like JS, CSS, or font files. Navigate to Stores ➡Configurations ➡ Web:
For Base URL for Static View Files, set
your_imagekit_url_endpoint/pub/static/ depending on your setup.