4 Mins Read

3,735 Views

Progressive Image Rendering For Better UX

Home - Blog - Progressive Image Rendering For Better UX

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

 

Tags

Author

AVP - Product Marketing, 

WebEngage

Swati leads Product Marketing at WebEngage and likes conducting experiments that help data-driven marketers and PMs leverage WebEngage to build better user-engagement strategies. She is excited about seeing companies discover insights and transform their businesses with WebEngage. A graduate from BITS Pilani, Swati has done research in aerospace where she ran a very different set of experiments!

Related Articles

Scroll to Top

“I like many things about WebEngage, but what stands out is their agility and being customer centric.”

Nitin Sethi,

SVP, CDO – Consumer Businesses

800+ Global brands trust WebEngage

brands-strip-demo

What to expect from the demo call?

Talk to the Partner Team

Supercharge Your Startup's Growth

Supercharge Your Startup's Growth

Book a free consultation

Supercharge Your Startup's Growth

The Program helped us scale our business faster and bring down acquisition costs with time.

ankit-agarwal-testimonial

Ankit Agarwal

Founder, PHOOL

Become a Partner

Grab your copy