Stop Manually Creating Thumbnails: How We Automated It in OneEntry

Anyone who has worked with galleries or catalogs knows that manual image thumbnails are a never-ending pain for developers. Implementing this process leads to dozens of file copies, unnecessary storage clutter, inconsistent sizes and layouts, degraded LCP/INP metrics, and ultimately a loss of search rankings.

At OneEntry, we solved this problem so it would never again become a headache for teams. Thumbnail generation is built directly into the system: it works out of the box, fully autonomous, and requires no plugins, scripts, or manual interventions. And this approach aligns perfectly with where the industry is heading. Since March 12, 2024, FID has been officially replaced by INP, Core Web Vitals requirements have become even stricter, more projects are switching to modern formats like WebP and AVIF, responsive images are becoming the standard, and priority hints are now an essential tool for optimizing key visuals.

How OneEntry Solves the Thumbnail Challenge

When an image is uploaded to OneEntry, the system immediately takes over all the routine work. Thumbnails are generated automatically based on predefined presets, links and URLs remain stable and predictable, caching works correctly, and when the original is replaced, the thumbnails are updated without any developer involvement.

For content teams this means simplicity and clarity: the admin panel always provides ready and consistent previews that match exactly how they will appear on the storefront. Developers get stable fields in the API and SDK and can be confident that sizes and formats won’t fail them.

For businesses this translates into tangible benefits: product cards, catalogs, or portfolios appear uniform and professional, while the team is freed from manual tasks, reduces errors, and gains valuable time for more important work.

The screenshots show how presets for images are defined in OneEntry, a file is uploaded, and the system automatically creates multiple versions of thumbnails for different usage scenarios.

Code Examples: Thumbnails in OneEntry

In OneEntry, working with thumbnails is implemented so that a developer can immediately retrieve ready-to-use image sizes through the SDK or REST.

import { TemplatePreviews } from "@oneentry/sdk";

async function getPreview() {
  const preview = await TemplatePreviews.getTemplatePreviewByMarker(
    "my-marker",
    "en_US"
  );
  console.log(preview);
}

The getTemplatePreviewByMarker method returns a set of thumbnails, where each marker corresponds to a ready-made object with a URL and image dimensions. This allows you to directly use the data in your frontend code. For example, in product cards, galleries, or lists.

Usage Patterns
• Lists and catalogs: insert optimized thumbnails into feeds to reduce page weight.
• Galleries: use different sizes — small for thumbnails, large for modal viewing.
• Product cards: choose the right size for the grid and a separate one for the detail page.

This approach eliminates manual thumbnail generation and guarantees predictable results: the developer gets ready-made links and dimensions, and the system handles all the routine work.

Multiple Thumbnails for a Single Image

Usually, a single image turns into an endless to-do list for the team: make a “thumbnail for the list,” a “medium size for the card,” a “large version for the gallery,” save them in different folders, then reconcile everything and remember to update when the original changes. In the end, a simple image upload becomes a small project with its own deadline.

At OneEntry, we approached this systematically. Each image, upon upload, automatically receives several ready-made thumbnails in different sizes and formats. All of this is a single set available in both the API and the admin panel. Need to display a product in a feed? Take the lightweight version. Need to open a product card full screen? You already have the large version. Want to speed up mobile delivery? Use the optimized WebP.

For businesses, this is a significant advantage. Catalogs no longer “drift” due to inconsistent visuals, editors don’t waste time preparing images manually, and developers simply pick the right option from the ready-made set. In a single step, the system does the work of three people.

Performance and SEO: Why Auto-Generated Thumbnails Really Matter

When images are loaded in the wrong sizes or without optimization, everything suffers: pages become heavier, LCP increases, and INP signals delays. Automatic thumbnail generation solves this problem systematically. Each image is delivered in the correct size, without unnecessary kilobytes and without quality loss, directly speeding up cards, lists, and entire galleries.

Developer checklist:

• use modern formats WebP and AVIF
• set width and height explicitly to avoid layout shifts
• apply loading="lazy" where images are not critical to the first screen
• add decoding="async" for smoother rendering
• use priority hints for key images that affect LCP

These simple rules translate into real numbers. In a typical e-commerce catalog, switching from manual thumbnails to automatic ones combined with responsive images reduces the total image weight by 20–40% and speeds up Largest Contentful Paint by 120–250 ms under mobile network conditions. For the user, this feels like an instant response, and for the business, it means higher conversion rates and improved SEO rankings.

LQPT (Low Quality Preview Thumbnail)

There’s a certain magic when an image appears instantly, even if the internet connection isn’t fast. You open a page and, instead of a blank rectangle, you immediately see a blurred, lightweight preview of the image. Within milliseconds, it’s replaced by the sharp, final photo. To the eye, this feels like an instant load.

This technique is called LQPT (Low Quality Preview Thumbnail), and it’s built into OneEntry. The system automatically generates these “phantom thumbnails” for images and delivers them along with the other previews. All the developer needs to do is connect this option in the interface so that the user experiences a fast, responsive site.

In e-commerce, it means a product card always looks “alive,” even on 3G. In media projects, article teasers don’t turn into empty blocks while scrolling — lightweight placeholders appear instantly. In corporate portals, employees don’t stare at blank spaces waiting for photos to load.

And most importantly, achieving this effect requires no external libraries or hacks. It’s already built into OneEntry and you just need to use it.

The example below demonstrates how LQPT works: first, the user instantly sees a blurred lightweight preview, and in the API you can access links to all thumbnail versions, including these “fast placeholders.”

Business Value and Scenarios

Automatic thumbnail generation in OneEntry quickly proves its worth in real business tasks.

For e-commerce and marketplaces, it means a unified and professional look for product cards. The assortment can be updated daily, yet the storefront always remains consistent and predictable. The team no longer needs to manually prepare dozens of image versions — the system handles it automatically.

In content projects and media, well-structured covers and teasers become a powerful tool for audience retention. Feeds load faster, materials look consistent, and the brand gains visual integrity without additional editorial effort.

In corporate and internal portals, automation saves hours of routine work. Editors don’t have to coordinate sizes and adjustments with developers, and content publishing itself becomes simpler and faster.

From the perspective of total cost of ownership (TCO), the advantage is clear. There’s no longer a need for external plugins, custom-built pipelines, or third-party DAM services. Everything is already built into the platform, which means the team works faster and the business spends less on maintenance and infrastructure.

To see how this works in real projects, you can try our demo applications and explore the documentation in more detail. We are confident that this approach will help your teams reduce routine tasks, accelerate product launches, and focus on what truly matters.

We hope this overview will be the beginning of our collaboration. At OneEntry, we are always open to dialogue and ready to demonstrate how the platform works in practice.

👉 Try it yourself:

• OneEntry Documentation
• OneEntry SDK