Grocery and Food Delivery Menu Image Fallbacks

Context

Why food images fail more often than other categories

Restaurant menu images are notoriously inconsistent. A restaurant may have photos for 60% of items; the rest were not photographed, are seasonal, or were added after the initial onboarding. Grocery suppliers maintain product databases that are updated independently of image assets.

Delivery app platforms also aggregate from many sources simultaneously: a single city-level instance may query images from hundreds of restaurants across five different integrations. A temporary CDN outage at one integration can blank a large section of the menu grid.

The scale and source diversity makes manual image monitoring impractical. Automated fallbacks at the component level are the only reliable fix.

Color palette

Use warm palette fallbacks for food contexts

Color psychology matters in food interfaces. Cool grays and purples feel neutral to cold and are associated with non-food contexts. Warm oranges, ambers, and reds perform better as food category placeholders because they align with food photography palettes.

Pick a fallback color that is adjacent to your app's primary brand color but skews warm. For a teal-branded delivery app, a warm amber fallback is less jarring than a teal one.

<!-- Warm orange-amber food fallback (works for most food categories) -->
https://fallback.pics/api/v1/400x300/EA580C/FEF9C3?text=Dish+Photo

<!-- Category-specific warm tones -->
https://fallback.pics/api/v1/400x300/DC2626/FEE2E2?text=Meat
https://fallback.pics/api/v1/400x300/16A34A/DCFCE7?text=Salad
https://fallback.pics/api/v1/400x300/CA8A04/FEF9C3?text=Bakery
https://fallback.pics/api/v1/400x300/0EA5E9/E0F2FE?text=Drinks

Menu grid

Keep menu item grids stable on restaurant pages

Restaurant menu pages on delivery apps show items in a category-organized grid. A missing image in one category section does not affect other sections, but multiple missing images in the same section create a visually broken row.

Apply the fallback URL at the menu item image component level. Pass the dish category as a prop so the fallback color is appropriate for each section.

const FOOD_PALETTE: Record<string, [string, string]> = {
  appetizers:  ['EA580C', 'FEF9C3'],
  mains:       ['DC2626', 'FEE2E2'],
  desserts:    ['DB2777', 'FCE7F3'],
  drinks:      ['0EA5E9', 'E0F2FE'],
  sides:       ['65A30D', 'ECFCCB'],
  default:     ['EA580C', 'FFF7ED'],
};

function MenuItemImage({ src, name, category, width = 300, height = 300 }: {
  src?: string; name: string; category: string; width?: number; height?: number;
}) {
  const [bg, fg] = FOOD_PALETTE[category] ?? FOOD_PALETTE.default;
  const label = encodeURIComponent(name.slice(0, 20));
  const fallback = `https://fallback.pics/api/v1/${width}x${height}/${bg}/${fg}?text=${label}`;
  return (
    <img
      src={src ?? fallback}
      width={width}
      height={height}
      alt={name}
      onError={(e) => { e.currentTarget.src = fallback; }}
      loading="lazy"
    />
  );
}

Grocery catalog

Product fallbacks for grocery delivery catalogs

Grocery apps show product images from supplier feeds. Produce, bulk items, and private-label products are the categories with the highest rate of missing images. Use the product name and section (fruit, dairy, cleaning, etc.) to generate an informative fallback.

Grocery catalogs also use square images for product cards. Set width and height equal to ensure the placeholder matches the catalog grid cell.

// Grocery catalog fallback helper
function groceryFallback(productName: string, section: string, size = 300): string {
  const sectionColors: Record<string, string> = {
    produce:   '16A34A/DCFCE7',
    dairy:     '0EA5E9/E0F2FE',
    meat:      'DC2626/FEE2E2',
    bakery:    'CA8A04/FEF9C3',
    cleaning:  '7C3AED/EDE9FE',
    default:   'EA580C/FFF7ED',
  };
  const colors = sectionColors[section] ?? sectionColors.default;
  const label = encodeURIComponent(productName.slice(0, 20));
  return `https://fallback.pics/api/v1/square/${size}/${colors}?text=${label}`;
}

Modifiers

Modifier and add-on image fallbacks

Food apps show modifier images for toppings, add-ons, and size selections. These are usually very small (40–60px) and rarely photographed at high priority. A minimal square fallback with the modifier name keeps the selector readable.

For small sizes, skip the text parameter — at 40px, text becomes illegible. Use a solid color fallback that matches the category color.

<!-- Small modifier square (40px) – text too small, use solid color -->
<img
  src="https://fallback.pics/api/v1/square/40/EA580C/FFF7ED"
  width="40"
  height="40"
  alt="{{ modifier.name }}"
  onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/square/40/EA580C/FFF7ED';"
/>

App performance

Caching food image fallbacks in delivery apps

Mobile apps and PWAs can pre-cache the most common food category fallback URLs on first launch using a service worker. Because the URLs are deterministic, the cache entry never expires from URL changes.

For a 10-category food app, pre-caching 10 fallback URLs per category size covers the vast majority of missing image scenarios with a trivial storage overhead.

// service-worker.ts – precache food fallback URLs
const FOOD_FALLBACKS = [
  'https://fallback.pics/api/v1/300x300/EA580C/FFF7ED',
  'https://fallback.pics/api/v1/300x300/16A34A/DCFCE7',
  'https://fallback.pics/api/v1/300x300/DC2626/FEE2E2',
  'https://fallback.pics/api/v1/300x300/0EA5E9/E0F2FE',
  'https://fallback.pics/api/v1/300x300/CA8A04/FEF9C3',
];

self.addEventListener('install', (event: ExtendableEvent) => {
  event.waitUntil(
    caches.open('food-fallbacks-v1').then((cache) => cache.addAll(FOOD_FALLBACKS))
  );
});

Further reading

Image fallback strategy for food and grocery platforms

Food app image fallbacks benefit from category-aware color coding more than most ecommerce contexts. Investing a small amount of time in the color palette pays off in a interface that feels designed rather than broken.

# https://fallback.pics/docs/
# https://fallback.pics/placeholder-image-api/
# https://fallback.pics/blog/product-image-placeholder-ecommerce-catalogs/
# https://fallback.pics/blog/fashion-apparel-catalog-placeholders/