Image & Video Processing / Streaming
Converting an uploaded image/video into different sizes and qualities so it plays smoothly on every device and network.
19.1 Why is it used?
- A user uploads a 12 MP, 5 MB photo, but a mobile listing needs only a 300px thumbnail. Sending the original makes the page slow.
- Every user's network is different (5G, 4G, slow WiFi); a single-quality video will buffer.
- Different devices support different formats (H.264, H.265/HEVC, VP9, AV1; JPEG, WebP, AVIF), so conversion is necessary.
- Processing is heavy CPU/GPU work, so it is done in async background workers to keep the upload API fast.
- Good compression cuts both bandwidth and the CDN bill a lot.
19.2 How it works
- Transcoding: converting a video from one codec/bitrate/resolution to another, for example renditions of 1080p, 720p, 480p and 240p from a 4K source.
- Thumbnails / resizing: generating multiple image sizes (100px, 300px, 800px) and modern formats (WebP/AVIF).
- Adaptive Bitrate Streaming (ABR): the video is cut into small 2-6 second segments, with separate segments for each quality.
- HLS (Apple) uses a .m3u8 playlist and DASH (MPEG standard) uses a .mpd manifest; the player watches network speed and switches the quality of each segment.
- Async pipeline: upload -> object storage -> queue/event -> transcoding workers -> output S3 -> CDN.
- On-the-fly image transformation: write the size/format in the URL (for example w_300,f_auto), and the service resizes instantly and caches on the CDN.
- DRM (Widevine, FairPlay, PlayReady): encrypting paid content to stop piracy, for OTT such as Netflix/Hotstar.
- Live streaming: an encoder ingests over RTMP/SRT, the server creates HLS/DASH segments in real time, and the CDN delivers them to lakhs of viewers.
- 1.Stadium feed: live camera
- 2.Encoder: RTMP / SRT cloud ingest
- 3.Live transcoder: AWS MediaLive / FFmpeg, 1080p / 720p / 480p / 240p
- 4.HLS / DASH: 2-6 sec segments + .m3u8 / .mpd manifest
- 5.CDN (multi-CDN): segments cached, pushed
- 6.Viewers: 2.5 crore+ concurrent on mobile, TV, web players
After the match, the same content stays in S3 + CDN as VOD highlights
- 1.Player (Video.js / ExoPlayer): reads the .m3u8
- 2.seg 1-2: 1080p (5G / 4G)
- 3.seg 3: 720p (slow 4G)
- 4.seg 4: 240p (train, 2G) - network dropped
- 5.seg 5: 480p (3G)
- 6.seg 6: 1080p (WiFi)
If the network drops, the next segment is 240p: slightly lower quality, but no buffering
- 1.Upload API: fast response
- 2.S3 raw: original 4K / 5 MB
- 3.Queue / Event: SQS / S3 event
- 4.Workers: FFmpeg / MediaConvert / sharp
- 5.S3 output: renditions, thumbs, WebP
- 6.CDN: serves users
Mistake: synchronous transcoding in the upload API -> request timeout; always use a queue + worker. Image sizes: 100 / 300 / 800 px, WebP / AVIF; on-the-fly via URL: w_300,f_auto
19.3 Tools you can use
| Tool | Type | How it is used |
|---|---|---|
| FFmpeg | Open-source media CLI/library | Transcoding, extracting thumbnails, creating HLS segments; for example ffmpeg -i in.mp4 -vf scale=-2:720 out720.mp4. Runs on self-hosted workers. |
| AWS Elemental MediaConvert | Managed video transcoding | Take a video from S3, submit a job, and get HLS/DASH output with multiple renditions in S3; pay per minute. |
| Cloudinary | SaaS image/video platform | Upload and then resize, crop, f_auto format and video ABR through URL parameters - CDN built in. |
| Azure Media Services / GCP Transcoder API | Managed cloud transcoding | Azure/GCP equivalents of MediaConvert (Azure Media Services has been retired, partners are used now); GCP Transcoder API outputs HLS/DASH. |
| ImageMagick / libvips (sharp) | Open-source image processing | Resizing and format conversion of images in a server/Lambda; sharp (libvips) is very fast and light on memory. |
| Video.js / Shaka Player / ExoPlayer | ABR video players | Read the HLS/DASH manifest on the client and switch quality according to bandwidth. |
19.4 Comparison: FFmpeg vs AWS MediaConvert vs Cloudinary
| Point | FFmpeg (self-hosted) | AWS MediaConvert | Cloudinary |
|---|---|---|---|
| Type | Open-source tool, you run it on your own servers | Fully managed AWS service | SaaS: storage + processing + CDN |
| Control | Full control, you can tune every flag | Presets + good control | Less control, work is done via URL params |
| Scaling | You build workers, queue and autoscaling | Automatic scale | Automatic scale |
| Cost | Only compute cost, cheap at large scale | Pay per output minute | Plan/credits based, expensive at large scale |
| Images support | Basic (frames/thumbnail) | No, video only | Yes, best image support |
| Setup effort | High, needs an ops team | Medium, needs AWS knowledge | Very low, start in minutes |
| Best for | Huge scale like Netflix/YouTube, custom pipeline | VOD/OTT library on AWS | Startups, e-commerce images, quick launch |
19.5 When to choose which
- Cloudinary (or imgix): an e-commerce/startup needs images fast and has no media team.
- AWS MediaConvert: an OTT/VOD platform on AWS that needs HLS/DASH + DRM without running its own cluster.
- FFmpeg on Kubernetes/EC2 Spot: very large volume and you want full control over cost/quality.
- sharp/libvips on Lambda: cheap and simple for creating basic thumbnails on an S3 upload event.
- For live events (IPL, cricket) take a managed live service (AWS MediaLive) + multi-CDN.
19.6 Real-world example
Real world: Hotstar (JioHotstar) IPL live streaming
- The stadium's live feed goes to an encoder and reaches the cloud ingest over RTMP/SRT.
- The live transcoder creates HLS/DASH segments of multiple qualities (for example 240p to 1080p) every few seconds.
- Segments and the manifest are pushed to the CDN; Hotstar handled crores of concurrent viewers in IPL (public record 2.5 crore+ concurrency).
- The user's player downloads the .m3u8 manifest and chooses quality by watching the network.
- If the network drops on a train, the player picks the next segment at 240p - quality dips slightly instead of buffering.
- After the match, the same content is transcoded for VOD highlights and stays in object storage + CDN.
- Thumbnails and the player's scrub previews are made by extracting frames with tools such as FFmpeg.
19.7 Interview tips
- Common mistake: doing synchronous transcoding inside the upload API - request timeout; always use a queue + background worker.
- Common mistake: serving a single-quality MP4 - buffering on slow networks; use ABR (HLS/DASH). Sending the original 5 MB image everywhere is also wrong: generate thumbnails and WebP/AVIF.
- Interview tip: if asked HLS vs DASH, say both are segment-based ABR; HLS is Apple's (native on iOS), DASH is the open MPEG standard.
- Numbers worth quoting: 2-6 second segments, a ladder like 1080p/720p/480p/240p; Hotstar's public record of 2.5 crore+ concurrent viewers.