Getting Started

Suggest Edits

1. Sign Up on Gumlet

First, you need to create a Gumlet account here if you don't already have one. It is completely free. We recommend signing up using your business email id to make billing, account management, and support much easier.

2. Setup Image Source

🚧

WordPress Site?

If you have a WordPress site, please follow the WordPress Integration guide for a no-code plug-in-based integration. This guide is not suitable for WordPress sites.

Next up, log in to your account and go to the image sources page. Click the + Create New Source button. A source tells Gumlet how to fetch the original image.

2328

Choose your platform from the list and click on the Next button. Please check out our advanced Configure Image Source guide if you have any confusion.

2072

While setting up the source, you will create a Gumlet subdomain, which will be used to deliver your images. You may choose any available subdomain; it does not affect the performance or SEO. The CDN type will be automatically selected as per your subscription plan.

👍

Done!

Gumlet is all set up to fetch and optimize your images. Complete the next step to automate image optimization for your entire website.

3. Integrate with Your Website or Application

In the final step, you need to make changes in your website or mobile app to start serving images via Gumlet to your users.

🚧

Magento User?

From this point onwards, Magento users should follow our no-code Magento integration guide. The rest of this guide is not applicable for Magento sites.

Option 1: Gumlet.js plug-in

Recommended for websites

We have developed a special client library to handle all the image optimization related tasks automatically. It ensures your images are responsively resized, compressed, converted to WebP and/or Retina images as required, and delivered via CDN without you having to code any of it.

First, add Gumlet.js library code in <head> section of your pages.

<head>
    <script type="text/javascript">
        window.GUMLET_CONFIG = {
            hosts: [{
                current: "example.com",
                gumlet: "example.gumlet.io"
            }],
            lazy_load: true
        };
        (function(){d=document;s=d.createElement("script");s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
    </script>
</head>

Replace example.gumlet.io in the above code with the subdomain created in Step 2.

Also, replace example.com with the domain or subdomain currently used by your website to deliver images. Please note that we provide Custom Domain if you want to continue serving images from your own domain.

Rename <img src="" to <img data-src="" everywhere

This is the only step that requires some code change. Your current<img>tags will havesrcattributes set. We recommend you change them todata-srcattributes.

For example:

<!-- Current image tag -->
<img src="https://example.com/logo.png" alt="Gumlet Logo">

<!-- Image tag required for Gumlet -->
<img data-src="https://example.com/logo.png" alt="Gumlet Logo">

The Gumlet library will run at page load, calculate the correct size for all your images on the user's device, and automatically populatesrcattributes with optimized image URLs. This is all that was needed to deliver responsive and most optimized images to your users. Kindly note that Gumlet will optimize all your present and past images.

👍

Ready to launch

Once you deploy the above changes, your users will immediately start getting optimized images, and your PageSpeed scores would be improved.

📘

Note

For advanced options of our Gumlet.js library, read the documentation.

Option 2: API based Integration

Recommended for mobile apps and deep integrations

If using Gumlet JavaScript plugins is not an option for you. Then you have to change the application code to integrate Gumlet API.

Kindly note that just by changing your current image domain to the Gumlet subdomain created in step 2, you would be able to serve an optimized image via Gumlet. We handle the following optimizations on the server-side:

  • Lossless image compression
  • WebP conversion
  • CDN delivery

Mobile app developers can append a calculated width parameter to serve resized images. For advanced options like Crop, Overlay, Blur, etc. please refer to the documentation.

🚧

Contact Us

We highly recommend contacting support via Chat or email ([email protected]) before going with this option. We have no code migration options available for users migrating from Cloudinary or Imgix.

Updated about 1 year ago