Type keyword

Image

A previewable image is a visual representation or thumbnail that offers users a glimpse or preview of a larger image, document, or media file. It's typically a smaller version of the original content, often used in various contexts to provide a quick overview or a snapshot before users decide to view or interact with the full-sized version.

Usage

Key characteristics of a previewable image include:

  1. Visual Representation: It offers a condensed visual representation of the larger content, providing users with an idea of what the full-size image or document contains.
  2. Thumbnail or Reduced Size: Previewable images are smaller in size compared to the original content, allowing them to be displayed more efficiently in listings, galleries, or previews.
  3. Quick Overview: They serve as a way for users to quickly assess the content without fully engaging with it, enabling faster decision-making on whether to view the complete item.
  4. Clickable or Expandable: In many cases, clicking or interacting with the previewable image allows users to access the full-sized version or open the complete content in a separate view or window.
  5. Versatility: Previewable images are widely used across various digital platforms, including websites, file browsers, social media, and document viewers, providing a consistent way to offer previews of content.
  6. Contextual Information: They often accompany additional information or metadata to provide context, such as file names, dates, or descriptions, aiding users in understanding the content before engaging with it.

Aspect ratio

The image above shows the aspect ratio used for images in the OneFish design system.

import React from 'react';
import { Image } from 'antd';

const App: React.FC = () => (
  <Image
    width={200}
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  />
);

export default App;