#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/news-feed-design/image-and-media-handling

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/news-feed-design/image-and-media-handling

Repovive

Image and Media Handling - News Feed Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Image and Media Handling

Optimizing media in posts

Media is the heaviest part of a feed.

Image optimization:

Serve responsive images (srcset)
Use WebP with JPEG fallback
Lazy load images below fold
Show placeholder while loading

Video handling:

Don't autoplay with sound
Load video only when in viewport
Show thumbnail until play

Layout stability:

Reserve space with aspect ratio
Prevent layout shift as images load

.media-container { aspect-ratio: 16/9; }