Image Terminology

Digital imagery in user interfaces is bifurcated into two distinct mathematical architectures:

1. Raster Graphics (Bitmap)

Constructed from a fixed grid of colored pixels.

• Formats: JPEG, PNG, WebP, AVIF, GIF.
• Behavior: Resolution-dependent. Scaling a raster image beyond its native pixel dimensions results in pixelation, blurring, and artifact distortion.
• Ideal Use Case: Complex photographs, detailed 3D renders, and textured illustrations containing continuous color gradients.

2. Vector Graphics

Constructed from mathematical paths, curves, points, and geometric primitives.

• Formats: SVG (Scalable Vector Graphics).
• Behavior: Resolution-independent. Can be scaled infinitely from a 12px micro-icon to a 4K billboard with zero loss of sharpness.
• Ideal Use Case: System icons, corporate logos, UI illustrations, and decorative geometric shapes.

Selecting the correct container format controls web performance and Largest Contentful Paint (LCP):

• SVG: Standard for icons and UI graphics. Code-based (XML), inspectable in the DOM, styleable via CSS, and compressible with gzip.
• WebP: Developed by Google. Offers 25–35% smaller file sizes than comparable JPEGs at identical perceived visual quality, with native alpha transparency support.
• AVIF: Next-generation open format derived from the AV1 video codec. Delivers up to 50% better compression efficiency than JPEG, supporting HDR color and 10-bit depth.
• PNG: Best reserved for lossless graphics requiring transparency when vector SVG is unavailable.

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.

In 2010, the introduction of high-density displays (such as Apple's Retina) separated CSS pixels from physical device pixels:

• Device Pixel Ratio (DPR): The ratio between physical hardware pixels and logical CSS pixels.
• Standard DPR (1x): 1 CSS pixel = 1 physical screen pixel.
• Retina DPR (2x / 3x): 1 CSS pixel = a 2x2 grid (4 physical pixels) or 3x3 grid (9 physical pixels).

If an engineer serves a 100x100px raster image on a 2x display, the hardware scales it across 200x200 physical pixels, making the image look fuzzy. To maintain crispness, designers must export raster assets at 2x and 3x dimensions.

Extensive eye-tracking studies by Nielsen Norman Group reveal profound user behavioral differences based on image authenticity:

• Stock Photo Blindness: Users actively ignore generic stock photography (e.g., suited models smiling artificially in a sterile boardroom). Eye-tracking heatmaps show users skip past these decorative clichés instantly.
• High-Information Images: Users scrutinize authentic, real-world imagery—genuine product photos, actual team members, and detailed technical diagrams—spending substantial time studying details.

Authentic imagery builds credibility; decorative stock imagery adds cognitive noise and erodes trust.

Every image in a web application must be categorized for assistive technology under WCAG 1.1.1:

Informative Images

Images that convey conceptual information, instruction, or data (e.g., an infographic or a photo demonstrating how to wear a headset).

• Requirement: Must carry descriptive, concise alt text explaining the content and functional purpose to screen reader users.

Decorative Images

Images used purely for visual styling, emotional ambience, or redundant decoration (e.g., a background flourish).

• Requirement: Must carry an empty alt attribute (alt="") or aria-hidden="true" so screen readers ignore them rather than reading irrelevant filenames.