Bird
Raised Fist0
HLDsystem_design~7 mins

Media sharing in messages in HLD - System Design Guide

Choose your learning style10 modes available
LearnWhyDeepArchPracticeChallengeDesignRecallScale

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Problem Statement
When users send media files like photos or videos in messages, directly embedding these large files can cause slow message delivery, increased storage costs, and poor user experience due to long loading times. Without a proper system, the messaging service can become slow, unreliable, and expensive to maintain.
Solution
The system stores media files separately from text messages in a dedicated media storage service. Messages contain references or links to the media instead of the actual files. When a user sends media, the file uploads to the media storage, and the message includes a secure URL. On receiving, the client fetches the media asynchronously, improving message speed and reducing load on the messaging servers.
Architecture
User Client ├────────────────────▶
Media Storage
→Media Storage
↓
Messaging
◀────────────────────┤ Media Storage
↓
Receiving
User Client

This diagram shows how the user client uploads media to a media storage service, which stores the file and returns a URL. The messaging service stores the message with the media URL and delivers it to the receiving client, which fetches the media asynchronously.

Trade-offs
✓ Pros
→
Reduces load on messaging servers by offloading media storage and delivery.
→
Improves message delivery speed since only text and media URLs are sent initially.
→
Enables scalable storage solutions optimized for large files like CDN or object storage.
→
Allows asynchronous media loading on clients, improving user experience.
✗ Cons
→
Requires additional infrastructure for media storage and CDN integration.
→
Increases complexity in handling media upload failures and URL expiration.
→
Needs secure access control to prevent unauthorized media access.
When the system handles large media files frequently and message delivery speed is critical, typically at scale of thousands of concurrent users sharing media.
For simple chat apps with very low media sharing volume (under 100 uploads per day), where added complexity outweighs benefits.
Real World Examples
WhatsApp
Stores media files separately on their servers and sends message references to enable fast message delivery and efficient media handling.
Slack
Uploads files to dedicated storage and shares secure links in messages, allowing asynchronous loading and reducing message payload size.
Discord
Uses CDN-backed media storage for images and videos shared in messages to ensure fast delivery and scalable storage.
Alternatives
Inline media embedding
Media files are embedded directly inside message payloads without separate storage.
Use when: Only for very small media files or systems with extremely low traffic and simple architecture.
Peer-to-peer media sharing
Media files are shared directly between clients without central storage.
Use when: For decentralized apps where server storage is limited or privacy is a priority.
Summary
Separating media storage from message delivery improves performance and scalability.
Messages contain references to media stored in dedicated storage or CDN services.
This approach reduces server load and enables asynchronous media loading on clients.

Practice

(1/5)
1. What is the main reason to separate media storage from message text storage in a messaging system?
easy
A. To reduce the number of messages sent
B. To make the user interface more colorful
C. To improve performance and scalability by handling large media files separately
D. To avoid using cloud storage services

Solution

  1. Step 1: Understand media file size impact

    Media files like photos and videos are large and can slow down message storage if kept together.

  2. Step 2: Separate storage benefits

    Separating media storage allows using specialized systems like CDNs and cloud storage optimized for large files.

  3. Final Answer:

    To improve performance and scalability by handling large media files separately -> Option C

  4. Quick Check:

    Separate media storage = better performance [OK]
Hint: Separate big files from text for faster message handling [OK]
Common Mistakes:
  • Thinking media size doesn't affect performance
  • Confusing UI design with storage design
  • Ignoring scalability needs
2. Which component is essential for efficiently delivering media files in a messaging system?
easy
A. Content Delivery Network (CDN)
B. Message queue
C. Load balancer for text messages
D. Database index

Solution

  1. Step 1: Identify media delivery needs

    Media files are large and need fast delivery to users worldwide.

  2. Step 2: Role of CDN

    A CDN caches media files close to users, reducing latency and bandwidth usage.

  3. Final Answer:

    Content Delivery Network (CDN) -> Option A

  4. Quick Check:

    Fast media delivery = CDN [OK]
Hint: Use CDN to speed up media file delivery [OK]
Common Mistakes:
  • Confusing CDN with database indexing
  • Thinking load balancers handle media files
  • Ignoring network latency
3. Given a messaging system where media files are uploaded to cloud storage and messages store only media URLs, what is the expected behavior when a user sends a photo?
medium
A. The photo is embedded directly in the message text stored in the database
B. The photo is uploaded to cloud storage and the message stores a URL pointing to it
C. The photo is sent as a base64 string inside the message
D. The photo is stored in the message queue before delivery

Solution

  1. Step 1: Understand media upload flow

    Media files are large, so they are uploaded separately to cloud storage for efficiency.

  2. Step 2: Message stores media reference

    The message contains a URL pointing to the media location, not the media itself.

  3. Final Answer:

    The photo is uploaded to cloud storage and the message stores a URL pointing to it -> Option B

  4. Quick Check:

    Media URL in message = cloud upload [OK]
Hint: Messages store URLs, not media files directly [OK]
Common Mistakes:
  • Embedding large media in message text
  • Using base64 which increases size
  • Storing media in message queues
4. A messaging system stores media files directly in the message database causing slow queries. What is the best fix?
medium
A. Increase database RAM without changing design
B. Delete all media files from messages
C. Compress media files and keep them in the database
D. Move media files to cloud storage and store only URLs in the database

Solution

  1. Step 1: Identify problem with current design

    Storing large media in the database slows down queries and reduces scalability.

  2. Step 2: Apply best practice for media storage

    Moving media to cloud storage and storing URLs improves performance and scalability.

  3. Final Answer:

    Move media files to cloud storage and store only URLs in the database -> Option D

  4. Quick Check:

    Separate media storage = faster queries [OK]
Hint: Store URLs, not media, in message DB for speed [OK]
Common Mistakes:
  • Relying only on hardware upgrades
  • Compressing media but still storing in DB
  • Removing media reduces feature, not fix
5. You design a messaging app that supports sharing photos and videos. To handle millions of users, which combination of components best ensures scalability and fast media delivery?
hard
A. Upload media to cloud storage, use a CDN for delivery, and store media URLs in messages
B. Store media in the message database and use a single server for all requests
C. Send media as base64 in messages and cache messages on client devices
D. Use peer-to-peer media sharing without central storage

Solution

  1. Step 1: Analyze scalability needs

    Millions of users require scalable storage and fast delivery without overloading servers.

  2. Step 2: Choose best architecture components

    Cloud storage handles large media files reliably; CDN speeds up delivery globally; storing URLs keeps messages lightweight.

  3. Step 3: Evaluate other options

    Single server or embedding media causes bottlenecks; peer-to-peer lacks reliability and control.

  4. Final Answer:

    Upload media to cloud storage, use a CDN for delivery, and store media URLs in messages -> Option A

  5. Quick Check:

    Cloud storage + CDN + URLs = scalable media sharing [OK]
Hint: Combine cloud storage, CDN, and URLs for scalable media [OK]
Common Mistakes:
  • Storing media in DB causing bottlenecks
  • Sending base64 increases message size
  • Ignoring global delivery speed