Published on January 13, 2021

Progressive Image Rendering For Better UX

Table of Contents

WebEngage now supports Progressive Image Rendering for all rich in-app notifications to power up your users’ experience. With 3-step Progressive Image Rendering, images render faster in in-app notifications on Android and iOS. This functionality improves your users’ experience when the image size is big, or the network is slow. Images will load faster, and your users would be able to view your in-app notification without any lag. 

What changes for your users?

Previously, your users get to see the notification only once after the image was downloaded completely. Images of larger size took longer to download, causing delays.

Now, the notification is displayed instantly, and the images in your in-app notifications are rendered progressively for a better user experience. The rendering process instantly displays a lightweight image as a placeholder for the actual image, transitioning to the actual high-resolution version of the image. Your users view the notifications on-time and faster than earlier. 

Here’s the difference between the two processes:

 Importance of Image Rendering | WebEngage
Version A showing the notification only when the image is fully loaded. Version B showing a slowed-down representation of the image being rendered progressively in the notification.

Showing visual progress to your users while loading/rendering an image on the app is a great practice. Media-rich platforms like Medium and Instagram are among a few great examples that showcase the progressive loading of images. These placeholders enable images to load faster and help your users remain patient, signifying a work in progress.

Here’s what goes on:

The image is broken down into smaller chunks for rendering it in parts, and that’s how the whole image is downloaded faster. 

Step 01: Load a thumbnail version of the image

A thumbnail version of the image shows up in the notification, with the image’s color component but no distinct features. This allows for a better placeholder than using a solid color in the in-app notification. 

Quality of the image: 50%

Step 1 of Image Rendering | WebEngage
Step 01 of the image getting rendered progressively showing an image quality of 50%

Step 02: Progress to a version slightly better than the thumbnail

Again, this is a light version that is slightly better than the thumbnail in terms of quality and display features.

Quality of the image: 70%

Step 2 of Image Rendering | WebEngage
Step 02 of the image getting rendered progressively showing an image quality of 70%

Step 03: Final version of the image

This is the final, high-quality version of the image. 

Quality of the image: 100%

 Step 3 of Image Rendering | WebEngage
Step 03 of the image getting rendered progressively showing an image quality of 100%

Why is Progressive Image Rendering great for Product teams?

In-app notifications act as the primary form of communication for Product teams. Progressively rendered images work great if your target audience experiences slow internet speed. Or if you share large-sized images in your in-app messages, where the timing of the message is crucial to push your users forward in their journey.

Some use-cases include:

  • Onboarding new users
  • Prompting users to update the app
  • Gathering NPS or feedback questions
  • Suggesting additional features
  • Guiding users stuck at the same level of the app
  • Upselling /cross-selling features
  • Prompting users to enable push notifications
  • A/B testing marketing messages

Progressive Image Rendering is live for all in-app notifications sent through WebEngage. Try it out and let us know if you like using it for your business. You can also have a preview of how the image would appear to your users in the dashboard preview section. 

Have questions or need more clarity on the same? Ask away! We are here to help.

Follow us on Twitter to get notified about more such product updates.

Stay Updated! – Subscribe to our newsletter to stay updated on the latest in B2C marketing

 

Swati Singh

Related Articles

WebEngage Is Now Salla Platform Native – Asia’s #1 CEP Joins Hands With GCC’s Largest E-commerce Platform

ajit singh

September 3, 2026

Analytics Digest – Introducing Multi-splits in Event Analytics, Choose Between Uniques/Occurrences In Funnels, Hold Property Constant In Funnels & Compare Funnels Across Time Periods

ajit singh

September 2, 2026

Can MarTech Be Your Competitive Edge in E-Commerce Growth?

Gaurav Patil

September 2, 2026

Get new articles
in your inbox.

platform

Platform

Zero PII

No personal data stored.

AI-Powered

Atlas AI

AI-powered customer engagement suite.

Capabilities

Customer Data Platform

Your schema, your engagement rules

Automation

Automate workflows, orchestrate growth

Segmentation

Precise user segmentation, simplified

Personalization

Smarter web and app personalization

Analytics

Deeper analytics, sharper decisions

Recommendations

Context-aware recommendations that sell

Solutions

Travel & Hospitality

Healthcare

Automotive

Insurance

E-commerce and Retail

Resources

Product Releases

Ebooks

Blogs

Newsroom

Webinars

EngageMint

Impact Stories

Glossary

FEATURED

Introducing Entity Relationship Visualizer – Manage Relationships Between Your CDPx Data Objects In A Visual Interface

Winning Back Users: Proven Retargeting & Deep Linking Strategies.

Products

Platform

Zero PII, Black, Composable CDP

Capabilities

CDP, Segmentation, Analytics & more

Channels

Mobile, Email, WhatsApp, SMS & More

Solutions

BLACK

Resources