Getting Started

Steps to help you get started in a few minutes.

Gumlet is designed to ease image processing and delivery. Please go through the steps below to get started.

1. Signup on Gumlet

You just need a free Gumlet account to get started. You can create one here. You can signup using Google or Github accounts. If you prefer Gumlet local account, that option is available as well. We suggest you signup using your company account so billing and support is much easier to provide.

2. Setup Image Source

Once signup is complete, you need to tell us where your images are stored. You will also setup a gumlet subdomain like example.gumlet.com which will be used to deliver all your images. Plesae see detailed instructions on the page setup image source if you need in-depth guide on how to create image source.

3. Integrate with Your Application

If you use wordpress, you can skip rest of this guide and directly get started by installing our wordpress plugin: https://wordpress.org/plugins/gumlet/

Setting up image source gives us all information about where to fetch your images from which subdomain will be used to deliver it. You have to now make changes to your web application such that it delivers images from the newly created Gumlet subdomain rather than your current domain. You have following options to integrate.

Gumlet.js library

We have developed our client side library Gumlet.js which helps you deliver most optimised images to your users with minimal efforts. This is our recommended method to integrate our service with your web application.

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

<head>
<script src="https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js"></script>
<script type="text/javascript">
var gm_config = {
hosts: [{
current: null,
gumlet: "{{mysubdomain}}.gumlet.com"
}]
};
gumlet.init(gm_config);
</script>
</head>

Please replace {{mysubdomain}} in above code to the subdomain created by you. You can refer to detailed documentation of the library at our Frontend Javascript Library page.

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

If you are currenly serving images from a CDN or your webserver, chances are that you would have all <img> tags with src attributes. We recommend you change them to data-src attributes. For example:

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

The library will automatically generate required src tag and pur correct domain. This is all that was needed to deliver responsive and most optimized images to your users.

Manual Integration

If you would not want to integrate with our Javascript library, you need to manually change all <img> tags to use Gumlet domain and put correct URL parameters to deliver correct image sizes.

4. Ready to Launch!

Once above steps are complete, you are ready to launch your web application with optimized images. Once you deploy above changes, your users will immediately start getting optimized images and your PageSpeed scores should now be much improved.