WordPress

Integrate Gumlet with your Wordpress website in 15 minutes

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:

  1. 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.

  2. 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.

  3. 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.

  4. Lazy load: The plug-in has in-built lazy load to ensure the fastest page view experience.

  5. 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.

Gumlet WordPress Integration Guide

Please follow the these simple instructions closely and your site should have optimised images in no time.

1. Create Account

Please create a Gumlet account by signing up and login to your Gumlet account.

2. Add a WordPress Source

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.com/path/to/image.jpg like URL.

Kindly note that the choice of this subdomain will not have any impact on your site SEO. Gumlet adds canonical link header to tell the search engines that the original image belongs to your website and not Gumlet.com. This functionality is well supported by Google (Read more: Google) and popular in the SEO landscape. It is also supported by lots of other WP plugins like ShortPixel.

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.

Once above steps are complete, your image source is ready.

For Advanced use cases only

If your original images are not being served from your main domain. Instead images are stored in Amazon S3 or Wasabi Storage, please follow this guide for source creation.

3. Install and Configure Plugin

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.

If you using Brizy page builder, then please disable Gumlet Lazy load option. As Brizy has in-built lazy load that can not be disabled.

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 https://example.gumlet.com format.

Heads up! Do not enter Gumlet source in https://www.example.gumlet.com format.

Kindly leave Current Image Domain field blank and other settings unchanged.

Ready!

Please save the settings and clear WordPress cache and you are done!

You images should be optimised and delivered by Gumlet. Please feel free to reach-out to us over support chat or email (support@gumlet.com) in case you need any further help.

We hope you would like the service. Please leave a review for our plugin at on WordPress.

For Advanced use cases only

If your images are loading from any other domain than your website domain then please enter that domain name in Current Image Domain field.

Bonus: Serve CSS and JS files via Gumlet CDN

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)

  1. In the top menu click the WP Rocket link.

  2. Click the CDN tab.

  3. Check "Enable Content Delivery Network" box

  4. Enter Gumlet subdomain created in step 2 (example.gumlet.com) in the text field called CDN CNAME(s).

  5. In the reserved for dropdown, please select CSS & JavaScript.

  6. Save the changes.

  7. Clear the cache.

WP Rocket CDN config panel

Please enter Gumlet subdomain in the format example.gumlet.com and not https://example.gumlet.com.

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.

What if I don't use WP Rocket?

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.

What if I don't want to use any caching plugin?

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.com/path/to/file/cssFile.css. Changing the URLs for CSS and JS files may require advance technical knowledge of WordPress platform.

FAQs and Troubleshooting

How do I check if my images are optimised by Gumlet?

  1. Open your site in Google Chrome

  2. Right click on any image

  3. Select "Open image in New Tab" from the menu

  4. If the image address starts from <yoursubdomain>.gumlet.com 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.

Does Gumlet work with background image?

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.

Elementor setting changes required for Gumlet

Does serving images from a Gumlet subdomain affect my SEO?

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 Canonical link feature for Image SEO

This functionality is well supported by Google (Read more) and popular in the SEO landscape (Read more). It is also supported by lots of other WP plugins like ShortPixel and other CDN plugins.

Why my images are not converted to WebP?

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.

Gumlet plugin automatically serving WebP images

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.

How do I exclude images from Gumlet optimization?

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://example.com/path/to/image.jpg) not Gumlet URLs (https://example.gumlet.com/path/to/image.jpg) 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.

Exclude URLs in Gumlet WordPress plugin

Why my images not resized ? OR Why speed test still asks me to resize my images?

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.

Gumlet WordPress plugin advance setting

Gumlet plugin messes up image sizes in my grid display. How to fix?

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.