DEV Community

Cover image for Make Your Game Faster with IMG + Alibaba Cloud CDN
James Moro
James Moro

Posted on

Make Your Game Faster with IMG + Alibaba Cloud CDN

#alibabachallenge #devchallenge #gamedev #webdev

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

Table of Contents

What I Built

Container Lost: Balance on the High Seas is my third robot-themed game.

Since this is my third project in the series, I was motivated to dive even deeper into Alibaba Cloud's features right from the start — especially focusing on performance and delivery optimizations.

This time, the robot XR-77 — built for maintenance and combat — wakes up inside a drifting container after a shipwreck.. Deranged consoles, insane sound systems, and hostile drones also fell into the waters. XR-77 must keep his balance on the high seas, dodging falling objects and collecting power-ups to survive the storm — all while trapped in a container filled with uncontrollable products.

🖼️ Screenshots:

Gameplay

Live Demo link

🔗 Play now:
👉 https://container-lost.jamesrmoro.me

Alibaba Cloud Services Implementation

When I started working on my third robot-themed game, "Container Lost", one of my main concerns was loading time — especially on mobile connections. Since it's a static game with lots of images (sprites, backgrounds, HUD, effects), I knew I had to optimize everything I could.

That's when I started exploring Alibaba Cloud's tools, and ended up discovering two features that completely transformed the project’s performance:

  • The Global CDN integrated with OSS
  • The image processing (IMG) feature directly in the URL

Using the CDN to reduce latency

The first step was to enable the CDN on my OSS bucket. This made all the assets (JS, images, sounds, etc.) get distributed across servers worldwide, improving response times.

With the CDN, I also set up custom cache rules, like making the index.html expire every 1 minute — not typical for static sites, but super useful during active development when I need to push quick updates and test changes in real-time.

Image processing via URL

After enabling the CDN, I discovered a feature called IMG.

Image description

OSS panel on Alibaba Cloud showing the image processing section (IMG) — This is where you can configure custom styles to resize, convert, and optimize images directly via URL.

Basically, you can add parameters directly in the image URL, like this:

https://container-lost.jamesrmoro.me/assets/images/bg.jpg?x-oss-process=image/resize,m_fill,w_320,h_480/format,webp/quality,q_75

With that, I can:

  • Resize images for mobile devices
  • Automatically convert them to WebP
  • Reduce file size without editing or duplicating anything

Automating with JS in the Game

Since the WebP format offers better compression without losing quality, I wrote a simple script to apply this format to all images automatically — using the CDN URL with dynamic IMG parameters:

const cdn = "https://container-lost.jamesrmoro.me/assets/images";
const ossSuffix = "?x-oss-process=image/format,webp";

const imagePaths = [
    "bg.jpg",
    "shield.png",
    "life.png",
    "battery.png",
    "combo.png",
    "game.png",
    "tv.png",
    "drone.png",
    "phone.png",
    "sound.png",
    "rain-1.png",
    "rain-2.png"
].map(name => `${cdn}/${name}${ossSuffix}`);
Enter fullscreen mode Exit fullscreen mode

With this, all images are served in WebP format, reducing file size without the need to duplicate files or modify anything on the backend. The conversion happens directly in the URL, thanks to Alibaba Cloud’s x-oss-process feature.

Creating Custom Styles in the Alibaba Console

Alibaba Cloud allows you to create reusable image styles directly in the OSS panel, which makes it much easier to generate clean and consistent URLs in your code.

Alibaba Cloud

Name IMG Parameter
webp-only image/format,webp/quality,q_85
mobile image/resize,m_fill,w_320,h_480/format,webp/quality,q_75
tablet image/resize,m_fill,w_768,h_1024/format,webp/quality,q_80

Example:

https://container-lost.jamesrmoro.me/assets/images/bg.jpg?x-oss-process=style/mobile

In my case, I created three simple styles with easy-to-remember names that I can call directly in the URL.

Game Development Highlights

To handle responsive images efficiently, I used CSS variables (:root) with Alibaba Cloud’s x-oss-process. This lets me serve optimized WebP images directly via CSS, switching between styles based on screen size.

Example:

:root {
    --intro-desktop: url("https://container-lost.jamesrmoro.me/assets/images/intro-desktop.png?x-oss-process=image/format,webp");
    --intro-mobile: url("https://container-lost.jamesrmoro.me/assets/images/intro-mobile.png?x-oss-process=image/format,webp");
}
Enter fullscreen mode Exit fullscreen mode

1. Background image of the title screen (desktop version) 

@media (min-width: 601px) {
    .titleBackground {
        background-image: var(--intro-desktop);
    }
}
Enter fullscreen mode Exit fullscreen mode

var(--intro-desktop) loads an optimized webp image for larger screens using x-oss-process.

2. Background image of the title screen (mobile version) 

@media (max-width: 600px) {
    .titleBackground {
        background-image: var(--intro-mobile);
    }
}
Enter fullscreen mode Exit fullscreen mode

var(--intro-mobile) ensures mobile devices carry a lighter version of the background image automatically.

The game was built entirely with CreateJS, which I used to handle canvas rendering, sprite animations, real-time updates, and interactions.

  • 🌊 Animated SVG waves and continuous rain effects
  • ⚡ Explosions, sparks, and lightning with dynamic visual control
  • 🛡️ Creative power-ups: shield, battery, explosive combo
  • 🎮 Movement with easing, animated sprites, and direction flipping
  • 📱 Mobile-first design with both touch and keyboard controls
  • 📳 On mobile, the robot vibrates when hitting the edges of the container
  • 💾 High Score system using localStorage, with persistent scoring
  • 🧊 Rust effect if the robot remains idle for 10 seconds

Conclusion

I already expected a CDN to help, but what really made the difference was the ability to automate image delivery for each screen size — without plugins, without creating multiple image versions, and without setting up a backend.

If you're building static games (or visually heavy websites), it's definitely worth exploring these features. In my case, I reduced mobile loading time by over 40% with just these optimizations.

Top comments (0)

OSZAR »