Managing images and image delivery on the web with Imagekit.io

I was just browsing the web and I came across this tool that can help deliver good image experience on the web. The good part is it has an SDK for almost every technology, language or platform you can think of. The icing on the cake is it has a good documentation to help developers get started quickly and integrate fast enough.

The platform: imagekit.io

Documentation: docs.imagekit.io

The documentation is great enough to walk you through use cases and get you handling image files more effectively. One of the feature that stood out for me is the ability to integrate and manage images with external sources like Amazon S3, Google Cloud Storage, Azure Blob Storage, Wordpress etc. That was just amazing.

What does ImageKit offer:

Simplify your image workflow In delivering images to web or other mobile devices, you might need various sizes of a particular image to display based on certain conditions, like screen size etc. Now, instead of uploading the various sizes you need to file system, you can have just one in Imagekit.io's image library and manipulate the size in real-time from the url.

e.g. https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg

where tr:w-300,h-300 specifies the width and height the image should display.

Integrate with external image sources It is possible to integrate with external image sources like S3, Google Cloud Storage, Azure Blob Storage, and many more. I think this is a cool feature.
Optimize images without changing code You can control image quality without touching or writing codes, with this feature all you need to do is include the optimize option in transform attribute via the SDK.
Faster image loading This tool is said to have come with a global CDN (Amazon Cloudfront). You all know how CDNs are instrumental to fast delivery of contents like images. The CDN is said to have 200 plus Points of presence which I think is great enough.
Increase your conversion rates Because the previous point impact on your page load time (reduces it), faster page loads increases the number of pages visitors are able to view per session which in turn increases your chances of converting those visitors to customers or users.
Improved SEO result Faster pages passes SEO test than slower ones. The search engine is able to index your website faster when you have made sure that one of the things that causes slow page load has been addressed using ImageKit.

Here are some perks in terms of feature for choosing ImageKit over any other solution:

Automatic format conversion
Using custom domain is cheaper, this is under the $49 plan while in some other solution it is under the $249 plan
You can do Performance monitoring on your ImageKit Dashboard
You will be alerted if your images are not performing optimally
You can initiate image transformation e.g. a resize by including your transform specifications in the query session of your url.
Pricing here is also much more affordable

Check for other perks on imagekit.io/cloudinary-alternative

I also tried out a few features with the python SDK as I came across it. They have the SDKs for your language and guidelines for both server side and client-side integrations. You might want to check that out

docs.imagekit.io/getting-started/quickstart..

The features I tried out

The upload feature
The url customization feature
The get all files in the image library
Get image details etc.

Using the python SDK I needed install the ImageKit, you would also find for any language of your choice in the docs docs.imagekit.io/getting-started/quickstart.. . Also create an account for free before you proceed as you will need some keys to access the services.

Create a python file named imagekit_upload.py in vs code

Run pip install imagekitio

from imagekitio import ImageKit
import base64

imagekit = ImageKit(
    private_key='<YOUR_PRIVATE_KEY>',
    public_key='<YOUR_PUBLIC_KEY',
    url_endpoint = 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/'
)

#your url will be different
with open("C:/Users/TeeGuyGeek/Pictures/coverimage.jpg", "rb") as img:
    imgstr = base64.b64encode(img.read())

upload_result = imagekit.upload_file(
    file= imgstr, 
    file_name= "coverimage.jpg", 
    options= {
        "folder" : "/example-folder/",
        "tags": ["sample-tag"],
        "is_private_file": False,
        "use_unique_file_name": True,
        "response_fields": ["is_private_file", "tags"],
    }
)

print(upload_result)

These values can be gotten from your dashboard under DEVELOPER TAB - > Developer Options.

I created another file called imagekit_sample.py to test other possibilities

First was the custom url generation

from imagekitio import ImageKit


#initialize the module with your Keys
imagekit = ImageKit(
    private_key='<YOUR_PRIVATE_KEY>',
    public_key='<YOUR_PUBLIC_KEY>',
    url_endpoint = 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/'
)

imagekit_url = imagekit.url({
            "path": "/default-image.jpg",
            "url_endpoint": "https://ik.imagekit.io/<YOUR_ENPOINT_ID>/",
            "transformation": [{"height": "300", "width": "400"}],
        }
)
print(imagekit_url)

Response looks like this:

https://ik.imagekit.io/<YOUR_ENPOINT_ID>/tr:h-300,w-400/default-image.jpg?ik-sdk-version=python-2.2.8

NOTE: there is already default-image.jpg in the image library by default. So make sure to use this as it applies to you.

To list all your files, in the same file

#list files in imagekit image library
listmyfiles = imagekit.list_files({})
print(listmyfiles)

Response:

{'error': None, 
'response': [
{'type': 'file', 'name': 'default-image.jpg', 'createdAt': '2022-03-31T04:10:04.111Z', 'updatedAt': '2022-03-31T04:10:04.111Z', 'fileId': '6245299cdb52992a27ffc817', 'tags': None, 'AITags': None, 'embeddedMetadata': None, 'customCoordinates': None, 'customMetadata': {}, 'isPrivateFile': False, 'url': 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/default-image.jpg', 'thumbnail': 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/tr:n-ik_ml_thumbnail/default-image.jpg', 'fileType': 'image', 'filePath': '/default-image.jpg', 'height': 1000, 'width': 1000, 'size': 147022, 'hasAlpha': False, 'mime': 'image/jpeg'},

{'type': 'file', 'name': 'coverimage_mdSRu1lJI.jpg', 'createdAt': '2022-03-31T04:53:57.267Z', 'updatedAt': '2022-03-31T04:53:57.267Z', 'fileId': '624533e5d122ae4ce707002b', 'tags': ['sample-tag'], 'AITags': None, 'embeddedMetadata': None, 'customCoordinates': None, 'customMetadata': {}, 'isPrivateFile': False, 'url': 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/example-folder/coverimage_mdSRu1lJI.jpg', 'thumbnail': 'https://ik.imagekit.io/<YOUR_ENPOINT_ID>/tr:n-ik_ml_thumbnail/example-folder/coverimage_mdSRu1lJI.jpg', 'fileType': 'image', 'filePath': '/example-folder/coverimage_mdSRu1lJI.jpg', 'height': 840, 'width': 1600, 'size': 177016, 'hasAlpha': False, 'mime': 'image/jpeg'}
]
}

To get a single file details and metadata of on single file

#get file details
file_id = listmyfiles['response'][0]['fileId']

image_file_details = imagekit.get_file_details(file_id)
print(image_file_details)

#get file metadata
file_metadata = imagekit.get_file_metadata(file_id=listmyfiles['response'][1]['fileId'])
print(file_metadata)

Dear readers, we have come to the end of this and I hope you find this useful for your projects. Looking forward to sharing another interesting topic with you next time. I will like to interact with you in the comment section see you there.

Connect with me on Twitter @oyhetola

Found an image manager and image web delivery tool : ImageKit.io

Managing Images and Image delivery on the web