Image

You might say

Let me add images to the article, and make sure they don't get distorted on phones.

Display an image with the right size, crop, and fallbackAn image component can handle aspect ratio, cropping, lazy loading, preview, and loading failure consistently. Reserve its space to prevent layout shifts. Meaningful images need alternative text; purely decorative images should be ignored by screen readers.

🔍 Preview

⚠
Loading failed

Quick checkChoose the best answer

Product card images have different source ratios. Cards jump taller after loading and some images stretch. How should this be handled?

Reserve no image space and let each natural image size expand its card after loadingReserve a consistent ratio, crop proportionally, and provide text alternatives for content imagesGive every source the same width and height and let the browser stretch it to fill

You can say this to an AI Agent

Use one aspect ratio for product-card image containers and reserve the space before load. Crop proportionally instead of stretching, add meaningful alt text, and provide a failure fallback. Test landscape, portrait, and slow-network cases.

Image≠Icon

Image shows a photo, illustration, or the content itself. Icon is a small reusable symbol for an action or status.

Image≠Video

Image is one static frame. Video has time-based content such as play, pause, duration, and sound.

When to use it

Product and article media
CoverProduct image
Profile or team photos
Thumbnail→ ClickEnlarge preview
Responsive thumbnails
⚠ Couldn’t loadShow a placeholder and explanation when loading fails
Images that need preview or loading states
The container is square and the image is wide; crop to fill without distortion

When NOT to use it

Stretch an image into the wrong ratio
Forcing the dimensions stretches the image out of proportion
Load full-size files for tiny thumbnails
Loading many images at once noticeably slows the page
Leave a broken-image icon with no fallback
Product launch · 50% off for a limited timeText that exists only in an image can’t be searched or read by screen readers
Write alternative text that adds no useful meaning
⚠ Couldn’t loadWithout alt text, there’s no description if the image fails to load

Anatomy

🔍 Preview

Decide on size and cut

What is really shown

Hover to appear, click to enlarge

Variants

Cover

The proportion of the container is fixed and it would rather be cut off than deformed.

Contain

The content of the picture cannot be cropped, and the whole picture must be read even if the margins are left.

Circle

Special for avatars, cut into rounded corners

Fallback

⚠
Loading failed

Placeholder when image loading error occurs

Typical use cases

Product photo

Desktop lifting table

¥1,299

Outdoor mountaineering bag 40L

¥459

Article cover

Alex Chen · 2 hours ago

This set of scene diagrams is so intuitive that it has been copied into the team specifications 👍

maya-lee · 5 hours ago

Zhengchou how to explain the empty status to newcomers, forwarded

Gallery preview

Article image (preview mask appears when hovering):

🔍 Preview

User profile

🖼️ Image loading failed

alt="Mountain Hiking Route Real Shots" —— Placeholder and explanatory text are still displayed when loading fails.

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.