B2B Wholesale Catalog Placeholders for PDF and Web
Keep B2B wholesale catalog pages and PDF exports clean with b2b catalog placeholder images sized for product sheets, line sheets, and buyer portals.
B2B wholesale catalogs have a documentation problem: the product database often outpaces the photography workflow by weeks or months. Buyers reviewing a line sheet or a buyer portal expect to see every SKU represented visually. B2B catalog placeholder images fill those slots cleanly in both web portals and PDF exports.
The fallback.pics API delivers correctly proportioned, label-bearing placeholder images from a URL—no upload, no processing. Drop the URL into your catalog template and every SKU renders with a professional placeholder until real photography arrives.
B2B context
Why B2B catalogs need placeholder discipline more than B2C
B2C shoppers can scroll past a missing image and move on. Wholesale buyers are placing orders for dozens or hundreds of SKUs at once. A product with a missing image is a product they will skip in the order form. That has direct revenue impact per order, not just a bounce metric.
Line sheets and trade show catalogs get exported to PDF and printed. A broken image in a PDF export is a hard failure—there is no onerror handler, no lazy loading, and no way to repair it after print. The placeholder must be embedded at render time.
Buyer portals also get screenshotted, shared, and reviewed in meetings. A grid of broken image icons in a screenshot forwarded to a buyer's procurement team looks unprofessional regardless of product quality.
Sizing guide
Product image dimensions for wholesale catalogs and line sheets
Web buyer portals typically use 400x400 or 600x600 square images for product tiles. Product detail side panels go to 800x800. Line sheets exported to PDF use column-constrained images, usually 200x200 or 300x300 to keep file size manageable.
For full-page category header images in a PDF export, use 1200x400 or 1440x300 wide-format placeholders. These communicate section breaks visually without being mistaken for product photos.
<!-- Buyer portal product tile -->
<img
src="https://fallback.pics/api/v1/square/400?text=SKU+12345"
width="400"
height="400"
alt="Product SKU 12345 image placeholder"
/>
<!-- Line sheet PDF column image (200x200) -->
<img
src="https://fallback.pics/api/v1/square/200?text=No+Photo"
width="200"
height="200"
alt="Product photo pending"
/>
<!-- Category header in PDF export -->
<img
src="https://fallback.pics/api/v1/1200x400/3B82F6/FFFFFF?text=Category+Header"
width="1200"
height="400"
alt="Category header placeholder"
/>PDF generation
Embed fallback.pics URLs in PDF-generated catalogs
Most server-side PDF libraries (wkhtmltopdf, Puppeteer, WeasyPrint, Prince) resolve image URLs at render time. Fallback.pics URLs work in all of them because they are real HTTP URLs that return standard image responses. There is no authentication, no token, and no referrer restriction to configure.
The key constraint for PDF exports is size. Avoid using SVG output in PDF generators that do not support inline SVG—request PNG or JPEG format by appending the extension to the URL.
// Puppeteer PDF generation with fallback.pics URLs
const html = products.map(p => `
<div class="product-cell">
<img
src="${p.imageUrl ?? `https://fallback.pics/api/v1/300x300/3B82F6/FFFFFF.png?text=${encodeURIComponent(p.sku)}`}"
width="300"
height="300"
/>
<p>${p.name}</p>
<p>${p.sku}</p>
</div>
`).join('');
await page.setContent(`<html><body>${html}</body></html>`);
const pdf = await page.pdf({ format: 'A4', printBackground: true });SKU labels
Display the SKU in the placeholder for easy catalog review
When a buyer reviews a catalog with placeholder images, they need to know which SKU needs photography. Embedding the SKU or a truncated product name in the placeholder text turns a visual gap into actionable information: the buyer's team can annotate exactly which products need photos before the next revision.
Keep the text short—fallback.pics truncates long text automatically, but you should trim to 12-18 characters before encoding to guarantee clean display at small sizes.
function skuPlaceholderUrl(sku: string, size = 400): string {
const label = encodeURIComponent(sku.slice(0, 12));
return `https://fallback.pics/api/v1/square/${size}/3B82F6/FFFFFF?text=${label}`;
}Buyer portal
Buyer portal grid with inline fallbacks and photo status badge
Buyer portals benefit from a visual indicator distinguishing placeholder images from real photos. A small badge overlay ('Photo Pending') communicates to the buyer that the image is temporary and a real photo will replace it. This prevents buyers from ordering based on a placeholder that might not represent the actual product color or style.
// BuyerProductCard.tsx
export function BuyerProductCard({ product }: { product: Product }) {
const fallbackSrc = `https://fallback.pics/api/v1/square/400/3B82F6/FFFFFF?text=${encodeURIComponent(product.sku.slice(0, 12))}`;
const hasRealPhoto = Boolean(product.imageUrl);
return (
<div className="relative">
<img
src={product.imageUrl ?? fallbackSrc}
width={400}
height={400}
alt={product.name}
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = fallbackSrc;
}}
/>
{!hasRealPhoto && (
<span className="absolute top-2 left-2 bg-yellow-400 text-xs px-2 py-1 rounded">
Photo Pending
</span>
)}
</div>
);
}Internal links
More wholesale and catalog image patterns
See the full API reference for dimension, color, and format options. Related posts cover marketplace listing fallbacks and dropshipping catalog strategies.
https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/dropshipping-catalog-image-fallback/
https://fallback.pics/blog/marketplace-listing-image-fallback/Key takeaways
What to standardize before shipping
- Wholesale buyers skip products with missing images in order forms—B2B catalog placeholders have direct revenue impact.
- PDF line sheet exports have no onerror handler; the placeholder must be embedded at render time using a real HTTP image URL.
- Append .png or .jpg to fallback.pics URLs in PDF generators that do not support inline SVG.
- Embed the SKU in the placeholder text so catalog reviewers can identify which products need photography.
- Show a 'Photo Pending' badge overlay to distinguish placeholder images from real photos in buyer portals.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
Dropshipping Catalog Image Fallback Strategy
Handle missing and broken dropshipping product images with a URL-based fallback strategy that keeps catalogs polished when supplier photos are unavailable.
Marketplace Seller Listing Image Fallbacks
Handle missing and broken seller-uploaded images in marketplace platforms. Use fallback.pics to keep listing grids stable when vendor media fails.
Amazon-Style Product Grid Placeholder Sizes
Match Amazon product image size standards for grid and detail views using deterministic placeholder URLs that enforce correct aspect ratios before real photos arrive.