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:
This can be resized to the following dimensions by simply changing the width
parameter to get the required size:
This can further be resized for mobile websites/apps or for thumbnails.
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.
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.