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.
Next up, login to your account and click "+ Add Source" button. This will let Gumlet know where to fetch your original images from.
For most websites, source type is web folder, if your images are stored in S3, Wasabi, etc. Please check out our advanced setup image source guide.
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 plan. We have 14-day free trial available for all plans.
In the final step we need to make changes in your website or mobile app to start serving images via Gumlet to your users.
We have developed a special client library to automatically handle all the image optimization related tasks. 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.
example.gumlet.net in above code with the subdomain created in Step 2.
example.com with the domain or subdomain currently used by your website to deliver images. Please note that we do provide custom domain support if you want to continue serving images from your own domain.
<img src="" to
<img data-src="" everywhere
This is the only step which requires some code change. Your current
<img> tags will have
src attributes set. We recommend you change them to
data-src attributes. 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 correct size for all your images on the user's device and automatically populate
src attribute 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, as and when request by a user.
Kindly note that just by changing your current image domain to Gumlet subdomain created in step 2, you would be able to serve optimized image via Gumlet. We handle the following optimizations on server side:
Lossless image compression
Mobile app developers can append a calculated width parameter to serve resized images. For advance options like Crop, Overlay, Blur, etc. please refer the documentation.