Magento is one of the most popular eCommerce platforms to develop a shopping website. More than 250000 merchants use Magento to sell online. ImageKit offers a very simple integration which allows you to optimize images on a Magento website instantly.
Steps for basic image optimization on Magento with ImageKit
1. Create an account if you have not registered already. While creating an account, choose an appropriate ImageKit ID, as it will be a unique identifier in your image urls.
2. Log in to your ImageKit dashboard and go to the integration section.
3. In your current Magento store, there could be two ways of storing images - you could be either storing them directly on your server (more likely) or you could be storing your images in an AWS S3 Bucket. If you are using an AWS S3 Bucket to store your Magento images, and want to optimize the images in that AWS S3 bucket, you can refer to the AWS S3 integration guide. If you are storing the images on your server, then you can continue following the steps below for integration.
4. Add a new image origin by clicking on the "Add Origin" button.
5. To integrate ImageKit with the images on your server, you need to add your server as an origin for ImageKit. For this purpose, we need to set the origin type as "Web Server - HTTP(S) server and Magento, Shopify, Wordpress etc."
6. The value of base URL should be your website's address with the protocol (http or https) in the beginning. For a website that is accessible on https://my.magentostore.com, the image URLs would also begin with https://my.magentostore.com. The same should be the value of the base URL as well.
7. Click on Submit.
8. The first image origin that you add is automatically added to the list of origins accessible through the default URL endpoint i.e.
https://ik.imagekit.io/your_imagekitId you can modify this by editing "origin sequence". You can either continue to use the “Default URL endpoint” or create a new URL endpoint if you want to manage multiple image origins with ImageKit.
9. Before we move to the next step, we will verify if the images on your Magento website are now accessible via ImageKit.
For example, if the image URL on your current Magento website is
and you added https://my.magentostore.com as the base URL while adding the origin, then for this the URL via ImageKit will be
You will need to replace <your_imagekitId> with your own ImageKit ID.
If the above change does not work for your images, then you can get in touch with our team to help you with the integration by creating a support ticket from your ImageKit dashboard.
11. If the above image did work correctly, we can now proceed to make the changes in our Magento admin panel to switch the image delivery and optimization to ImageKit. In Magento 2, go to Stores -> Configurations -> Web.
12. Under Base URL for User Media Files field, enter https://ik.imagekit.io/<your_imagekitId>
You need to replace <your_imagekitId> with the ImageKit ID for your ImageKit account.
13. If you want to use ImageKit to serve CSS and JS files as well, to speed up their delivery, then enter https://ik.imagekit.io/<your_imagekitId> in the field Base URL for Static View Files and https://ik.imagekit.io/<your_imagekitId> in the field Secure Base URL for Static View Files.
14. Save these settings and clear the cache for your Magento store (if any). Now refresh the webpage for your Magento store and check the image URLs. They should now load from URLs beginning with https://ik.imagekit.io/<your_imagekitId> You can use the Chrome Developer Tools to check that all the images are being loaded via ImageKit and that all images are loading correctly.
Now that you have successfully configured ImageKit to fetch images from your Magento Store, you might want to understand image url construction in ImageKit start delivering resized and optimized images. Edit your theme files to load right dimension image. Checkout this guide to deliver responsive images on different device.
We are always there to help you in case of any doubt. You can create a support ticket from your ImageKit dashboard and our team will help you with the integration.
In case you have any questions, please create a support ticket from your dashboard or if you are on a paid plan, start a conversation by clicking on the chat icon in the bottom right.