Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Image Terminology/
Exercise #3

Aspect Ratios and Responsive Focal Cropping

An aspect ratio describes the proportional relationship between an image's width and height ($W:H$):

  • 16:9 (Widescreen): Standard for video players and cinematic desktop hero banners.
  • 4:3 (Classic): Standard for editorial cards and tablet presentations.
  • 1:1 (Square): Universal for user profile avatars, e-commerce catalog grids, and square thumbnail previews.
  • 3:2 (Photography): Standard 35mm camera frame ratio.

Responsive Focal Point Management

On mobile screens, wide 16:9 images shrink vertically, rendering human faces or key details illegible. Modern UI employs CSS object-position and art-directed crops to zoom into the subject's focal point on narrow screens.

Topics

Raster vs. Vector Graphics in Digital Interfaces
Modern Web Image Formats: SVG, WebP, and AVIF
Aspect Ratios and Responsive Focal Cropping
Pixel Density, Retina Displays, and @2x/@3x Assets
Authentic Human Imagery vs. Stock Clichés in UX
Decorative vs. Informative Imagery: Accessibility Standards
design
UX Design

From lesson

7

Image Terminology

Level 2 · Elements of Design I

Top contributors

Community contribution details will appear here once real learner activity is available.

Share