How to Create a Thumbnail File

Thumbnails make image galleries, product lists, and video catalogs snappy and scannable. In dev threads, you will often see debates about size, format, and whether to pre-generate or generate on the fly. 

I am building an image and video gallery and need to batch-generate small previews for grids and cards. What are the best practices and cross-platform tools for how to create a thumbnail file? I care about speed, consistent sizing, and keeping file sizes small. Code samples for Node or Python would be great, plus any tips for naming, caching, and format choices.

Great question! A thumbnail is a small, optimized preview of a larger asset. Common sizes are 150×150, 300×300, or 480 on the longest edge. The goal is consistent display and quick delivery.

• Pick a target size and stick to it, for example 300×300 for grid cards.
• Use center cropping to keep important content in view.
• Use modern, efficient formats. JPG is widely compatible. WebP can shrink size significantly. See WebP format pros and cons.
• Keep files small. If needed, reduce image file size while retaining visual quality.
• Set width and height attributes or CSS aspect ratio for stable layout.

ImageMagick for images:

# 300x300 square thumbnail, centered crop, quality at 85
convert input.jpg -thumbnail 300x300^ -gravity center -extent 300x300 -quality 85 output_thumb.jpgCode language: CSS (css)

FFmpeg for video frame thumbnails:

# Grab a frame at 2 seconds and scale to width 300 (keep aspect)
ffmpeg -ss 00:00:02 -i input.mp4 -vframes 1 -vf "scale=300:-1" output_thumb.jpgCode language: PHP (php)

import sharp from 'sharp';

// Square thumbnail 300x300, centered crop, save as WebP
await sharp('input.jpg')
  .resize(300, 300, { fit: 'cover', position: 'center' })
  .toFormat('webp', { quality: 80 })
  .toFile('input_thumb.webp');Code language: JavaScript (javascript)

from PIL import Image, ImageOps

with Image.open('input.jpg') as img:
    thumb = ImageOps.fit(img, (300, 300), method=Image.LANCZOS, centering=(0.5, 0.5))
    thumb.save('input_thumb.jpg', quality=85, optimize=True)Code language: JavaScript (javascript)

• Use a consistent suffix or folder. Examples: image_thumb.jpg or thumbnails/image.jpg.
• Consider variant naming tied to size like image_300x300.webp for clarity.
• Serve with long cache headers and use immutable URLs. If you change output, include a version or hash in the filename.
• For responsive layouts, generate a few sizes per aspect ratio and pick the closest with srcset.

• Pre-generate: predictable sizes, heavy traffic on stable assets, simple CDN caching.
• On the fly: many variants, dynamic UIs, or when you want to compute the thumbnail only once per unique transformation and then cache it.

If you prefer not to maintain thumbnail pipelines, you can upload originals and request thumbnails in the delivery URL. The first request generates and caches the result at the edge.

Example image thumbnail URL:

https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,w_300,h_300,q_auto,f_auto/samples/landscapes/beach.jpg

• c_fill,g_auto centers on salient content.
• w_300,h_300 sets exact dimensions.
• q_auto,f_auto pick optimal quality and format automatically.

Node SDK upload and URL generation:

import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: 'demo',
  api_key: 'your_key',
  api_secret: 'your_secret'
});

const result = await cloudinary.uploader.upload('input.jpg', { folder: 'samples' });

// Build a 300x300 thumbnail URL
const thumbUrl = cloudinary.url(`${result.public_id}.jpg`, {
  transformation: [
    { width: 300, height: 300, crop: 'fill', gravity: 'auto' },
    { quality: 'auto', fetch_format: 'auto' }
  ]
});
console.log(thumbUrl);Code language: JavaScript (javascript)

This approach centralizes generation, CDN caching, and format optimization, which is especially helpful at scale or when teams collaborate on media assets.

• Faces or key objects cropped out: use center-crop or face-aware cropping when available.
• Heavy files: lower quality a bit, switch to WebP, and avoid PNG for photos.
• Layout shift: specify dimensions in markup or reserve aspect ratio space.

• Resize and center-crop to a fixed size like 300×300.
• Save as JPG or WebP with quality around 70 to 85 for small files.
• Use ImageMagick, FFmpeg, Sharp, or Pillow for batch workflows.
• If you want zero thumbnail infrastructure, use URL based generation and CDN caching.

• Image to WebP
• PNG to WebP
• Image to JPG
• Compress PNG

Ready to streamline thumbnail generation and delivery across platforms and devices? Register free for Cloudinary and start optimizing your workflow today.