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.
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
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
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.
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.
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
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.
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
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
webp output formats.
3. Lazy Loading
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.
<head> section of your webpage.
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.