High quality images are an integral part of contemporary website design. They make your site stand out and generate user engagement. But if one is not careful images can slow down the website and lead to bad user experience.
Gumlet is complete image optimisation solution. It takes care of all 5 aspects of optimised image delivery:
Automatic Image Resize: All images are resized according to users device screen size. Each and every user of your site gets the right sized images.
Image compression: Gumlet uses perceptually lossless image compression to reduce the image file size without any effect on image quality. We even optimise GIFs and SVGs.
Automatic WebP: Images are delivered in "new age" WebP format whenever it is supported by the browser. WebP images are 40% lighter then JPEG images for same quality.
Lazy load: The plug-in has in-built lazy load to ensure the fastest page view experience.
Caching and CDN Delivery: All images processed via Gumlet is delivered through CloudFront CDN with more than 215 POPs across the world. It ensures lowest latency for all of your images.
All of above benefits are delivered via a single click install plugin. Please follow the below instructions to make your WordPress site faster and more SEO friendly. This plugin also works with WooCommerce.
Please follow the these simple instructions closely and your site should have optimised images in no time.
Please create a Gumlet account by signing up and login to your Gumlet account.
We need to know where to fetch the original images for optimisation. Click the "+ Add WordPress source" button to reach the following screen.
First important input you need to provide us your WordPress URL. Please open the site where you want to implement Gumlet in a new browser tab ▶️ Copy the URL from the address bar ▶️ And paste in the WordPress URL box.
Doing it this way will ensure that this critical step is completed correctly. As some sites have URL format like https://www.example.com and others have https://example.com. Both are different and it is important to capture the correct URL here.
Second input is the Gumlet subdomain that you create. Here you can enter any name that you see fit for your website. Please note this subdomain as it will be required in the next step. Your images will be delivered via
https://subdomain.gumlet.io/path/to/image.jpg like URL.
After above information added, please click
Next button and you will be taken to parameters screen. These options are for advanced use cases only. Please leave the settings as it is and click
Save button to create a WordPress source.
For Gumlet to work properly in is very important that all other lazy load, image optimisation or image caching plugins are deactivated. As Gumlet takes care of all of these functionalities in one go, any other active plugin would create interference and prevent Gumlet from working.
Some popular themes like Brizy and Divi have have inbuilt lazy load, so please check your theme and disable these option. If you are using a caching plugin like WP Rocket please disable lazy load from it and exclude image file types form caching.
Once other lazy load and image optimisation plugins are disabled. Install and activate Gumlet Plugin on your WordPress.
Go to Plugins > Gumlet Plugin > Settings on your WordPress dashboard where you will see the below plugin settings screen.
Enter the subdomain created in Step 2 in Gumlet Source field. Please make sure it is entered in
Kindly leave Current Image Domain field blank and other settings unchanged.
Refer the FAQ below in case you face any issues. Feel free to reach-out to us over support chat or email (email@example.com) in case you need any further help.
Our CDN accelerates delivery of files via a global network. To ensure that your website is as fast as possible, we have enabled delivery of CSS and JS files over our CDN.
If you are using a popular caching plugin like WP Rocket, it is very simple! (If not there are free alternative below)
In the top menu click the WP Rocket link.
Click the CDN tab.
Check "Enable Content Delivery Network" box
Enter Gumlet subdomain created in step 2 (example.gumlet.io) in the text field called CDN CNAME(s).
Save the changes.
Clear the cache.
Once the above settings are done it might take a few minute for the changes to reflect. Kindly check if your CSS and JS files are being served via Gumlet subdomain. Contact our support in case you face any issue.
Even if you are not using WP Rocket, there are plenty of free caching plugins for WordPress. We recommend using WP Super Cache. Here is a guide on how to setup CDN for WP Super Cache. Please feel free to reachout to our support chat or email for any further assistance.
There is still a way to deliver JS and CSS files via Gumlet CDN. But it will involve changing the code for your WordPress site.
You can deliver any file
https://example.com/path/to/file/cssFile.css over Gumlet CDN by simply changing it's URL to Gumlet subdomain created in step 2
https://example.gumlet.io/path/to/file/cssFile.css. Changing the URLs for CSS and JS files may require advance technical knowledge of WordPress platform.
Open your site in Google Chrome
Right click on any image
Select "Open image in New Tab" from the menu
If the image address starts from
<yoursubdomain>.gumlet.io then you images are being optimised by Gumlet.
Kindly note that our analytics panel updates every 45 minutes. Checking Analytics right after installing plugin is not the right way to check if plugin is working.
Please follow this guide.
Yes. Gumlet optimises the background images set it CSS as well. However, the image URL must be mentioned "in-line". If the image URL is mentioned in a separate CSS file it can not be optimised by Gumlet. Popular themes like Elementor have settings to make sure image URLs are on page.
No. Gumlet ensures that your image SEO remains intact by sending "canonical link" header to the search engines. This is done automatically for all users without any config required. You can check this in your network tab instantly.
Gumlet plugin are very smart. Whenever it detects a browser that supports WebP format, image is served in WebP format. However, your image URLs are never changed. The file format is changed and conveyed to the browser with HTTP response header (MIME filetype). You can check this easily with network tab in developer tools of the browsers.
If the Google Chrome browser does not show file type as WebP for your website, then there is definitely a problem. Reach out to us on support channels and we will fix it.
Sometimes for some images you might not want Gumlet optimization. Now there is an easy way to do it. Enter the original image URLs (https://www.gumlet.com/public/img/sea.jpeg) not Gumlet URLs (https://demo.gumlet.com/sea.jpeg) to the Exclude image URLs box at the bottom of Gumlet WordPress plugin config.
If you want to add multiple URLs in the exclude list, please add each new URL in a new line.
Some WordPress themes hardcode a width and height attribute into each image tag by default. This creates problems as in modern web designs the size of an image is defined by CSS width rules.
By default Gumlet responsive resize takes <img> tag width parameter on face value to avoid shrinking any images. But if you are facing the issue where GTMetrix says "serve scaled images" or Google pagespeed insights recommends "resize images", please do the following.
Uncheck "Use <img> width" option under Advanced Settings.
Sometimes enabling Gumlet plugin may make your photo grid look like the this:
There is an easy solution to this problem. Please uncheck Use Original Images setting under Advanced settings from Gumlet plugin panel and clear the cache.