GumletGumlet logo
Pricing
Login
Book a Demo
Signup

Page Load Speed

5 min read

Improving Page Load Speed with Gumlet

Page load speed is as critical. A 1 second delay in page response can result in a 7% reduction in conversions. We share a few tips to improve page loading speed using image optimisation.

Feature image

Nupur Sharma 

Updated on Sep 12, 2023
Improving Page Load Speed with Gumlet

Share this Article

Page load speed is as critical as the page design, content, visuals etc. and has a deep impact on user experience, SEO, and conversion rates. A 1 second delay in page response can result in a 7% reduction in conversions.

In this blog, we will talk on how page load speeds can be improved by focusing on the most difficult to manage part of a web application: Images.

With the advancement in camera capabilities, quality of images is getting better by the day even in ordinary phone cameras. As good as this is for everyone else, this comes with loads of extra pixels and extra file sizes that increase page weight significantly for websites. Forget about a professional camera picture, a phone with an 8-megapixel camera will fetch an image 3456 pixels wide and 2304 pixels tall. If you want to get even more out of the smartphone camera, you can check the Backlight blog website for useful tips.

Image Resizing

Generally, you will notice that images are served larger than necessary size on most websites. The easiest workout for this is to resize the images. The problem is that, a team is required to create, store and maintain so many copies of image. Gumlet's image processing APIs, help you create multiple copies of a single image in real-time. Look at the following image, it's size is too big for most devices:

Image Size: 1.41 MB, Dimensions: 3540 x 1992 px

This can be resized to the following dimensions by simply changing the width parameter to get the required size:

Image Size: 458 KB, Dimensions: 2000 x 1125 px

This can further be resized for mobile websites/apps or for thumbnails.

Image Size: 78 KB, Dimensions: 800 x 450 px

Maintaining aspect ratio is also a headache for the image management team. By default Gumlet maintains aspect ratio for all image resizing except for when the mode is set to stretch.


Cropping Images

The next best way to reduce image size is to crop images as per required container and image content.

Sometimes images contain a lot of extra background content with only a small part being relevant. Gumlet has a crop mode that allows you to remove this part of the image while resizing to show only relevant part of the image to any user.  Another use-case for cropping images is to show content perfectly on user device viewport. For example, show a portrait picture on mobile phones and show a landscape image on desktop browsers.

Gumlet has different modes like center, topleft, topright, bottomleft, bottomright to choose which part should be cropped. We also support smart crop mechanism where our algorithms automatically analyse most important part of image and crops it such that the imoprtant object is kept in center in cropped image.

crop=center crop=smart

Supporting devices with high DPR

A lot of devices these days have high device pixel ratio i.e. the ratio between physical pixels and logical pixels. For instance, the iPhone 6s has a device pixel ratio of 2, because the physical linear resolution is double the logical resolution.

The dpr parameter is used to serve correctly sized images for devices that expose a device pixel ratio. Valid values for this are between 1 and 3. This acts as a multiplier to both width and height e.g. width=200&height=300&dpr=3 is equivalent to width=600&height=900. To show this in action, look at the following 2 images, the left one being served to a regular device with dpr=1. The right has dpr=3.

As you can see, serving lower DPR image on a high resolution screen will make it look blurry. Gumlet makes it easy to serve crisp images on all devices.

DPR=1 DPR=3

Image Compression

The next step after resizing the image is to compress the image. Gumlet offers multiple methods for image compression.

1. Serving correct image format

Gumlet serves images in all formats like auto, jpeg, png, webp, tiff or raw. If you use format=auto, Gumlet automatically detects best format according to user browser. For example, Google Chrome supports WebP hence that format will be delivered to users visiting with Chrome browser. When user browser does not support WebP, default image format as per original image is served. WebP image is almost always lesser size for same image quality which results in lower bandwidth usage and faster load times.

2. Gumlet’s compress parameter

Gumlet automatically converts all JPEG images to progressive image and applies lossless quality optimizations by default.

If you set compress=true, we further apply lossy optimizations on image which can greatly reduce resultant image size without perceptual loss of quality. As illustrated in example below, most of time, it results in 20-30% reduction in resultant image size with almost no loss in quality. This feature works with svg, png, jpeg and webp output formats.

Original - 3.6 MB

compress=true - 2.2 MB

3. Lazy Loading

Lazy load helps save time in the initial loading with only the image content being seen getting downloaded . This can be extremely beneficial for pages like blogs or landing screens, where only a fraction of your audience will view the entire content. Gumlet supports lazy loading with a simple javascript integration described below.


Responsive images with Gumlet.js

Gumlet.js allows developers to easily generate responsive images in the browser. This lets you write a simple <img> tag that is parsed to make images look great on any screen size. It uses Gumlet.com to process and resize your images on the fly.

It's very simple to get started. You just need to paste the following Javascript to <head> section of your webpage.

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

Full documentation about the library is available here: https://www.gumlet.com/docs/image/integration-guides/frontend-javascript/

Website Analyser

Gumlet gives you all the tools you need to optimise images on your webpage or mobile app. You can easily get started by signing up for a free account and use very simple URL parameter based APIs to delivery optimap images.

Click here to know how is your website performing and how Gumlet can help you speed up.

Similar readings

image-63d27ea7e394c3000f5a4ac0
Six Gumleteers and 111 Epic Videos
Posted on Nov 07, 2022
image-63d27ea7e394c3000f5a4abe
Monsoon'22 Update
Posted on Jul 29, 2022
image-63d27ea7e394c3000f5a4abd
Summer '22 Update ☀️
Posted on May 24, 2022
Images or videos loading slow?

We compress them so that your users don't need to wait.

Try Gumlet

Images or videos loading slow?We compress them so that your users don't need to wait.  Try Gumlet →

Ready to get started?

Sign up and start optimizing your videos by up to 57% with Gumlet. No credit card required. Reach out to contact sales or to get a custom pricing estimate that fits your needs.

Start now Contact sales →
Optimizing videos is hard, but our pricing is not
Simple per-minute pricing with no hidden fees.
Pricing details →
Effortlessly integrate Gumlet into your existing stack
Upload with API and set webhooks for output in minutes.
Integragtion guide →

Footer

Gumlet Company logo
USA

Gumlet LLC
8 The Green, Dover, DE 19901

Singapore

Gumlet Pte Ltd
20A, Tanjong Pagar Road, Singapore (088 443)

Gumlet aicp logoGumlet soc2 logoGumlet iso logo
PRODUCT
  • Video Overview
  • Video Analytics
  • DRM Video Protection
  • Video CMS
  • Video Protection
  • Video Player Customization
  • Video Streaming
  • Video Transcoding
  • Video DRM
  • Online Video Hosting
  • Image Optimization
  • No-code Integration
  • Wordpress
  • Vimeo Alternative
  • Cloudinary Alternative
  • Imgix Alternative
  • Wistia Alternative
RESOURCES
  • Blog
  • Learn
  • Glossary
  • Tools
  • Startup Credits
  • Why Gumlet
  • Webinars
  • Documentation
  • Howdrm.works
SUPPORT
  • Product Updates
  • Feedback
  • Community
  • Become an Affiliate
  • Contact Us
  • Service Status
COMPANY
  • Pricing
  • About Us
  • Customers
  • Careers
  • Press Kit

© 2025 Gumlet Pte. Ltd.

Privacy Policy

Terms of Service