๐Ÿ‹
Menu
Image

Thumbnail

Thumbnail (Preview Image)

A small, reduced-size version of a larger image that serves as a quick visual preview, commonly used in galleries, file browsers, and search results to help users identify content without loading full-resolution images.

ๆŠ€่ก“็š„่ฉณ็ดฐ

Thumbnails are typically generated by downsampling the original image to a target size (100-300px on the longest edge) using resampling algorithms: nearest-neighbor (fast, blocky), bilinear (smooth, slightly blurry), bicubic (sharper), or Lanczos (highest quality, slowest). In browsers, the Canvas API's drawImage() resizes images client-side. Server-side thumbnail generation uses libraries like Pillow (Python), Sharp (Node.js), or ImageMagick. Thumbnails should be stored separately rather than generated on each request. EXIF data in JPEG files often contains an embedded thumbnail in the APP1 segment.

ไพ‹

```javascript
// Thumbnail: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```

้–ข้€ฃใƒ„ใƒผใƒซ

้–ข้€ฃ็”จ่ชž