Transforming User Experience: How Dream11 Leverages Intelligent Image Delivery

Introduction:

In the world of fantasy sports, where millions of users demand a fast and engaging experience, ensuring seamless experience counts. These users actively engage on the platform to participate in fantasy sports competitions, with up to 15 million users online simultaneously during peak events like IPL or major football tournaments.

One of the critical elements of ensuring streamlined user experience is media assets, particularly high-resolution images of players, teams, and event banners. These images play a vital role in delivering rich and visually engaging user interfaces. However, with a vast user base using a wide range of devices it is challenging to deliver media assets across different resolutions and quality levels. It causes several issues, including:

Increased network usage
Slower load times
Escalating egress costs

We recognised the need for a solution that could deliver tailor-made configuration and compress images according to device screen resolutions while ensuring optimal application performance on Android and iOS devices. The AWS Serverless Image Handler provided the ideal solution, delivering transformative results for efficiency and reduced egress cost.

In this blog, we will explore how we leveraged AWS’s serverless capabilities to enhance image management, improve performance, and reduce egress costs.

Using AWS Solution: Serverless Image Handler

The Serverless Image Handler is a serverless solution for efficient, cost-effective image customisation as per device screen resolution on AWS. It integrates AWS services with Sharp, a popular open-source image processing library, to deliver fast, dynamic image manipulation for high-traffic platforms.

Implementation at Dream11

This solution brings multiple benefits, such as cost-effectiveness and maintainability. Here's a closer look at our implementation:

AWS CloudFormation Template: We utilised AWS's CloudFormation template to simplify the setup process. It automatically provisions for key resources like CloudFront, Lambda@Edge and API Gateway; making infrastructure deployment more efficient. Setting up the infrastructure with CloudFormation was straightforward:
- Navigate to the AWS CloudFormation console.
- Create a new stack and upload the provided template.
- Enter required parameters, such as the S3 bucket for storing original images and desired optimisation settings.
- Review and deploy the stack, allowing the template to automatically configure all necessary resources.
CloudFront Distribution: CloudFront serves as our CDN, caching optimised images and delivering them from edge servers closest to users. This reduces latency and enhances load times, ensuring faster content delivery.
Lambda@Edge Function: A Lambda@Edge function ensures real-time image optimisation. When an uncached image is requested, the function retrieves the original image from storage, applies optimisations like resizing, reformatting, and compression tailored as per requests, and then delivers the optimised version through CloudFront.
API Gateway Integration: API Gateway acts as a secure endpoint for interacting with the Lambda function, efficiently handling incoming image requests and responses.
Dynamic Image Handling: To manage images across diverse teams, we implemented a mapping system. The frontend fetches URLs, which correspond to different S3 buckets where images are stored. These S3 buckets, configured through CloudFormation, are optimised for efficient image handling and delivery.
```
{
  "intelligentImageDomain": "https://images.dream11.com",
  "patterns": {
    "https://userProfiles.s3.amazonaws.com/": "userProfiles",
    "https://d13ir01smqqeyp.cloudfront.net/": "playerimages",
    "https://teamflag.dream11.com/": "teamflag",
  },
  "excludedImageFormats": [
    "gif"
]}
```
Mapping Explanation: The patterns key links asset URLs to specific S3 buckets, enabling the image handler to dynamically optimise images regardless of their original source. The excludedImageFormats key ensures that formats like GIFs are excluded from customising as per devices.

Image Transformation Configuration: Using the mapping, we generate a configuration object for image transformation, which is then Base64 encoded and sent to the API Gateway for customising as per devices.

const imageTransformationConfig = {
 bucket: bucketName, // AWS bucket name
 key: assetPath, // e.g., teamflag/india.jpg
 edits: {
    toFormat: 'webp',
    resize: {
    width: width,
    height: height,
    fit: config.fit || 'cover'
    }
 }
};
const encodedUri = base64.encode(JSON.stringify(imageTransformationConfig))

This configuration enables us to define specific transformations, such as converting images to WebP format and resizing them.

How Do We Verify URLs for Optimisation?

Before applying any transformations, we verify whether the base URL of the original image path is present in our mapping. This ensures that optimisations are only applied to images served from buckets configured for it. If the URL matches, the image is transformed and optimised, otherwise, the original image is loaded without modification.

export function getOptmisedSource(
  originalSource: ImageSource | undefined,
  config?: ImageOptimisationConfig
) {
  try {
    const {
      intelligentImageDomain,
      patterns,
      excludedImageFormats,
    } = imageOptimisationMappingHelper.getImageOptimisationMapping()

    if (
      !intelligentImageDomain ||
      !Object.entries(patterns).length ||
      typeof originalSource === 'number' ||
      Array.isArray(originalSource) ||
      !config
    ) {
      return originalSource
    }

    const { origin, pathname, search } = getProtocolAndHostName(originalSource?.uri || '')

    if (!origin || !pathname) {
      return originalSource
    }

    /**
     * Cloudfront and S3 adds '+' if there are any spaces in file / folder name while forming URL.
     * Replace '+' with empty space so that we can exact path to asset.
     * Example: https://cloudfront.net/image/Test+Folder/Jammu+%2B+Kashmir.png
     * In above URL the exact path to asset is "image/Test Folder/Jammu + Kashmir"
     * Reference: https://stackoverflow.com/questions/33759479/how-to-handle-files-having-spaces-in-amazon-cloudfront
     */
    const decodedPathName = decodeURIComponent(pathname.split('+').join(' '))

    if (isImageFormatBlackListed(pathname, excludedImageFormats)) {
      return originalSource
    }

    const width = PixelRatio.getPixelSizeForLayoutSize(config.width)
    const height = PixelRatio.getPixelSizeForLayoutSize(config.height)

    const pathnameArray = pathname.split('/')

    // Remove asset name from path
    pathnameArray.pop()

    let mostSpecificMatch = ''
    let bucketName = ''

    pathnameArray.forEach((path) => {
      mostSpecificMatch = `${mostSpecificMatch}${path}/`
      if (patterns[`${origin}${mostSpecificMatch}`]) {
        bucketName = patterns[`${origin}${mostSpecificMatch}`]
      }
    })

    if (!bucketName) {
      return originalSource
    }

    const imageTransformationConfig = {
      bucket: bucketName,
      key: decodedPathName.replace('/', ''),
      edits: {
        toFormat: 'webp',
        resize: {
          width: width,
          height: height,
          fit: config.fit || 'cover',
        },
      },
      ...(search && {
        search,
      }),
    }

    const encodedUri = base64.encode(JSON.stringify(imageTransformationConfig))

    return {
      uri: `${intelligentImageDomain}/${encodedUri}`,
    }
  } catch (_error) {
    return originalSource
  }
}

Results

Image Size Reduction and Bandwidth Savings

A key objective was to reduce bandwidth usage for our users by optimising images based on the pixel density of the device to serve optimal images. Through these optimisations, we significantly reduced the total size of approximately 300 images on each session without compromising on the quality of the image:

This substantial reduction not only improves the page load time but also decreases the amount of data users need to download, resulting in a faster, more efficient browsing experience.

Egress Cost Savings

In addition to enhancing the user experience, this led to considerable reductions in egress costs. Following the implementation of the serverless image handler, we noticed approximately a 70% decrease in egress expenses. This reduction was achieved by minimising the volume of data transferred through the CDN, which directly reduced our operational costs

Future Scope

Looking ahead, we are excited to further refine our image optimisation strategies by incorporating key user factors:

Network Conditions: Adapting image optimisation based on users' network speeds, ensuring fast and responsive image delivery even in regions with slower internet connectivity.
Geolocation: Enhancing image delivery to align with regional infrastructure and preferences, providing optimised and culturally relevant content tailored to different locations.
Device Capabilities: Fine-tuning image optimisation for devices commonly used in India, considering key factors such as battery efficiency, and processing power.

By focusing on these areas, we aim to elevate the user experience, delivering a highly personalised, efficient, and context-aware visual content across diverse regions in India. As the fantasy sports landscape continues to evolve, Dream11 remains at the forefront, leveraging cutting-edge technology to meet the needs of the users and redefine their experience.

Transforming User Experience: How Dream11 Leverages Intelligent Image Delivery

Using AWS Solution: Serverless Image Handler

Implementation at Dream11

Results

Written by

Previous Article

Tags

Related Blogs