ImageEngine vs. Gumlet
This is part I of a two-part comparison between ImageEngine and Gumlet. You can find part II here.
Performance issues on your image-heavy website holding you back? Fed up with optimizing your images by hand? Or, want to streamline your entire image workflow with a proprietary solution?
Looks like you’re in need of an image optimization and delivery solution.
You’re in luck because in this article I’m going to do an in-depth analysis of two of the top players: Gumlet and ImageEngine.
Below, we’ll compare key areas of these two services, such as:
- Ease of use
- Integration coverage
- Storage options
- Transformation API
- Automatic image optimization
- CDN
- Supported content formats, and more
We’ve got a lot of ground to cover, so let’s get to it:
Ease of Use
First of all, let’s see what it takes to get up and running with both Gumlet and ImageEngine:
Getting Started with Gumlet
Let’s start by seeing how easy it is to set up Gumlet for your web project.
First of all, head over to the website and click ‘Signup’ to create an account:
You can create an account by signing in with your existing Github or Google account. Alternatively, you can just provide some basic information:
Once you’re logged into the dashboard, the first thing you’ll probably want to do is set up a source to pull your images from. You can do this by navigating to Images -> Sources in the lefthand menu:
Regardless of which option you choose, the process is pretty straightforward. I used a Web Folder and only needed to provide a publicly available URL to the location and give it a name/subdomain that you’ll use to access the images through Gumlet.
For example, if you choose the subdomain “myimagetest” then you can access your images with the URL:
“myimagetest.gumlet.io/myimage.jpg”
At this point, you should already be able to access and serve your images through the Gumlet CDN.
When it comes to actually integrate the Gumlet service with your web project, you can go about it in two ways:
- Simply replace the contents of your image tag src attributes with their new Gumlet URL.
- Copy-paste and configure Gumlet’s JavaScript library which will automatically change the URLs of your images and provide some other plug-and-play functionality.
The first is definitely the easier option, especially if you don’t have experience with HTML or JavaScript. However, the second is will make maintaining your images easier by automatically updating new image URLs.
For the first step, all you need to do is modify your image tags in the following way:
From,
<img src=”myimage.jpg”/>To,
<img src=”//myimagetest.gumlet.io/myimage.jpg”/>You can find full instructions for option #2 here.
Regardless of which route you take, implementing Gumlet is extremely quick and easy. However, the time will depend on which method you use as well as the number of images on your site.
Getting Started with ImageEngine
When it comes to setting up your website with an image CDN, ImageEngine is every bit as quick and easy as Gumlet, if not more so.
To start, head over to ImageEngine and sign up for the free 30-day trial:
You’ll then go through a simple 3-step process:
- Create a user account with your email and a password, alternatively with your Github or Google account:
2. Next, create your first Engine by defining the origin of your images.
This can be a Google Cloud Storage or Amazon S3 bucket or any other publicly accessible web location. If you need help finding the origin your website uses, hit the “?” button on the right, enter your website URL, and scan your site. A few origins will then be suggested for you. If you’re still not sure, you can always skip this step and reach out to the customer success team.
ImageEngine will now create a subdomain for you where your optimized images will be served from. Like Gumlet, ImageEngine will automatically, pull, optimize, and start serving your images without any further setup needed.
3. After this, ImageEngine will provide you with the domain (Delivery Address) your images will be served from:
You can then start serving optimized images on your website by also updating your image URLs like so:
<img src=”https://www.mywebsite.com/assets/images/myimage.jpg”/>Should be changed to:
<img src=”https://{delivery-address}/assets/images/myimage.jpg”/>And, that’s literally all you need to do to fully configure ImageEngine for your web app.
Integration Coverage
Because you can serve images optimized and accelerated by either image CDN simply by updating their respective URLs, you can integrate Gumlet and ImageEngine in nearly any web project with ease.
You can also easily integrate both Gumlet and ImageEngine with platforms like Magento simply by altering some of the media settings. However, ImageEngine also provides a free Magento plugin for even easier integration. WordPress users can install and configure the straightforward WordPress plugins provided by both Gumlet and ImageEngine.
Finally, you can find relatively straightforward instructions to integrate ImageEngine in your React.js, Angular or Vue.js applications while Gumlet provides similar instructions for Next.js.
However, as mentioned, don’t feel restricted to only these options as both platforms can be used in just about any project with minimal extra coding, including native apps.
Storage Options
Neither Gumlet or ImageEngine offer storage space as part of their service. However, both platforms provide incredibly simple and streamlined integration with a number of third-party storage solutions.
Both allow for serving images stored in publicly accessible web folders which also means they can pull images straight from your WordPress, Magento, or hand-coded website project files.
ImageEngine also provides streamlined steps to integrate with AWS or Google Cloud buckets.
Gumlet, on the other hand, also offers straightforward integration with various cloud storage services (AWS, Digital Ocean, Wasabi, etc.), migration from other services like Cloudinary or imgix, and serving images via Web Proxies.
Transformation API
Gumlet provides quite an extensive transformation API. While not as comprehensive as imgix, for example, there are commands that range from practical to purely cosmetic. There are well over 50 transformations you can apply to your images, such as:
- Size: Includes settings for width, height, DPR, enlarge, fill, crop, trim, mask, fill, pad, and dpi.
- Formats: Specify various input and output formats as well as enabling/disabling options like progressive scan, compression, quality, and removing metadata.
- Image operations: Alter images by using settings like rotate, flip, blur, threshold, opacity, contrast, gamma, and sharp.
- Color operations: Adjust image colors using operations like background, brightness, saturation, hue, tint, grayscale, or specifying palettes.
- Image overlays: Add image overlays and style them according to position, tile, and size.
- Text overlays: Add textual overlays and style them according to position, size, alignment, color, orientation, etc.
It’s fairly easy to apply manual transformations using the simple URL-based syntax. For example, the below snippet crops the image to a size of 400px by 400px and enables automatic format selection:
<img src=”https://demo.gumlet.io/black-leaf.jpeg?mode=crop&width=400&height=400&format=auto" alt=”mode=crop”>For a more advanced, developer-oriented approach, you can also use the REST API to make many of the same transformations to your images in code.
ImageEngine supports a smaller set of transformations aimed more towards operations that optimize your images, but with a few cosmetic customizations thrown in. There are 13 total directives you can utilize:
- Width
- Automatic width
- Height
- Compression
- Format
- Fit method
- Sharpness
- Rotation
- Size image according to a percentage of the screen
- Crop
- Inline
- Pass through
- Strip EXIF metadata
ImageEngine supports two different types of syntax for using these transformations:
- Using a path parameter (with URL prefixing: https://{random string}.cdn.imgeng.in/w_300/f_webp/http://mywebsite.com/assets/images/myimage.jpg">
- Using query parameter: https://{random string}.cdn.imgeng.in/assets/images/myimage.jpg?imgeng=/w_300/f_webp
As you can see, there aren’t any purely cosmetic transformations, such as applying overlays or using color palettes. However, many will prefer making these kinds of edits using dedicated software, such as Photoshop. Regardless, all the basics are covered.
Automatic Image Optimization
The better an image CDN is at automatic image optimization, the more time and effort it will save you as well as deliver improved performance results.
In this regard, few image CDNs can compete with ImageEngine. This is largely due to ImageEngine being the only mainstream option that utilizes built-in mobile optimization based on WURFL device detection. This allows ImageEngine to collect far more information about the context the image is accessed in beyond the typical Accept header values used by most other image CDNs.
As a result, ImageEngine’s AI-powered optimization engine can make much more informed decisions about how to optimally transform images. Among others, this allows ImageEngine to offer completely dynamic image resizing, without the need for specifying image `srcsets` or extra client-side processing.
This capability is built into each of ImageEngine’s edge servers. The information they are able to extract from the requesting device and browser includes:
- The physical screen size on the device
- Resolution of the screen
- Viewport size
- Device pixel ratio
- Supported and most efficient image formats
Like most other image optimization platforms, Gumlet is restricted to a less detailed set of data points. If you only use URL-based image optimization, the only optimization Gumlet can apply is compressing and formatting images. In my test, this only led to a 16.66% decrease in image payloads.
You can improve Gumlet’s performance by adding the Gumlet.js library to your website project. While it’s only 5kB in size, there will be a performance impact due to introducing more JavaScript to your website pages. It’s also not always considered best practice to load content, such as images, using JavaScript. However, it will produce significantly better results, reducing payloads by up to 83.33%.
Still, ImageEngine outshone Gumlet by reducing image payloads by as much as 97.5% without noticeably compromising the visual quality of images.
As a massive bonus, both services support client hints to further fine-tune image transformation and optimization as well as support for the save-data header.
You can see how both services’ automated image optimization performs in part II of this series.
CDN
Transforming your images is only half the story when it comes to how image optimization services speed up your websites. The other half is by accelerating image delivery to endpoints across the globe via powerful CDNs.
Gumlet uses the Fastly CDN for its content delivery, one of the largest and most popular CDNs around. Enterprise customers can also choose to rather deliver their assets via the Amazon Cloudfront CDN or switch over to any other third-party CDN.
In contrast, ImageEngine utilizes its own in-house CDN with over 20 global PoPs. to take full advantage of its unique device-detection capabilities and lower response times, this logic is built into each of their device-aware edge servers. Furthermore, customers on any plan can request to integrate with other third-party CDNs.
Supported Content Formats
You can find a complete list of the supported image input and output formats in the table below.
However, both Gumlet and ImageEngine perform admirably when it comes to supporting a wide and convenient variety of image formats. Notably, both provide support for WebP which is currently the de facto standard for serving optimized images in most situations. Both also offer support for AVIF which is set to potentially replace WebP and is not yet supported by most other services.
In terms of video, ImageEngine offers above-average support for GIFs, being able to convert it to both MP4 as well as aWebP. Video is also an important part of Gumlet’s offering, especially video streaming. You can deliver videos in HLS and MPEG-DASH (both mostly for streaming purposes), as well as MP4, WebM, and MKV.
Another unique ImageEngine feature is support for JPEG-2000 which is primarily used for optimized image delivery in Safari browsers and JPEG-XR which used to be favored by Microsoft browsers, such as IE and Edge.
Both ImageEngine and Gumlet also support delivering static files, such as JS and CSS via their CDN.
Conclusion
Before we wrap up this comparison, here is a table with a final feature roundup:
All in all both platforms are fairly impressive offerings that have much in common. They are both incredibly easy to set up, provide automatic optimization, support for advanced formats as well as client hints/data saver mode, and provide transformation APIs to take control of your image assets.
In general, Gumlet provides a slightly wider range of options for its users. You can integrate a larger variety of storage solutions and it provides a more extensive transformation API.
However, ImageEngine offers unparalleled automated image optimization capabilities without needing to resort to added JavaScript or clunky responsive syntax. Despite being the more hands-off solution, it also offers increased performance gains.
Read part II of this series for an in-depth pricing and performance comparison between ImageEngine and Gumlet.
