by Dream Intrepid Ltd

Food Photography Optimization: How Bloggers and Restaurants Get Beautiful Images That Load Fast

By Optimage

Food photography is the hardest category to compress without visible quality loss. This guide covers the exact settings, formats, and workflows that food bloggers and restaurant websites use to serve stunning photos without killing their page speed score.

Table of Contents

Your panna cotta photo is perfect. The light catches the surface just right. The berry compote has that jewel-toned intensity. You spent 45 minutes on the shoot and another hour editing in Lightroom. It looks genuinely beautiful.

Then you upload it to your WordPress recipe blog at 100% export quality and your Google PageSpeed score drops to 31. Seventeen seconds after someone searches for "easy panna cotta recipe" and clicks your result, the page is still loading. They have already hit the back button and clicked the result below yours instead. Google's own research shows that 53% of mobile visitors abandon pages that take longer than three seconds to load. Recipe blogs routinely exceed that threshold by a factor of three or four.

Food photography is the category where the tension between image quality and file size is most painfully felt. Smooth cream, glossy glaze, intricate crumb structure, the deep greens of fresh herbs: these are exactly the kinds of high-frequency visual detail that compression algorithms find most challenging. Compress too aggressively and the image looks muddy, plastic, or pixelated in ways that food enthusiasts notice immediately. Compress too conservatively and you are sending your visitors a file that belongs on a billboard, delivered through a mobile phone screen.

The good news is that the right settings exist. They have been tested, refined, and validated by food bloggers with millions of monthly visitors. Getting there requires understanding why food images are different, not just following generic compression advice.

Why Food Photography Is the Hardest Thing to Compress {#why-food-photography-is-hard}

Standard image compression wisdom says: use WebP at quality 80 and you will be fine. For a product photo on a white background, that advice holds. For food photography, it is frequently not enough.

High-frequency detail throughout the frame

Most product photography has a clear subject against a controlled background. Compression algorithms handle this efficiently because large areas of similar pixels (the white background, the smooth fabric) compress extremely well. The detail budget is concentrated in the product itself.

Food photography typically has complex detail throughout the entire frame. A bowl of pasta on a wooden table with fresh herbs, scattered parmesan, a linen napkin, and a shallow depth-of-field background means every square centimeter of the image is doing visual work. There is no "easy" background region where the encoder can store fewer bits. The encoder has to work harder to represent the entire scene adequately, and at aggressive compression settings, the regions that get sacrificed are exactly the ones your audience notices: the individual sesame seeds on the bun, the texture of the crust, the droplets of condensation on the glass.

Saturated colors and gradients

Food photography is deliberately color-saturated. The vibrancy of orange blossom, the deep red of a tomato sauce, the glossy brown of caramelized onions: these are colors that human vision is particularly good at detecting when they shift. Compression artifacts in food photography often manifest as subtle color banding in gradients (the graduation from highlight to shadow on a rounded surface like a tomato) or color smearing in highly saturated regions.

WebP and AVIF both handle color representation better than JPEG at equivalent file sizes, which is one reason modern formats are particularly beneficial for food photography. But even WebP at quality 75 will visibly degrade a highly saturated food image in ways that might not be apparent in other content categories.

Steam, condensation, and liquid surfaces

Macro elements in food photography, things like steam wisps rising from a soup bowl, droplets of water on a glass, or the bubbles on the surface of a carbonated drink, are extremely difficult for compression algorithms to handle. These elements have high-frequency detail against smooth backgrounds, and any visible compression artifacts in them tend to look obviously unnatural because viewers have strong visual intuitions about how these phenomena should appear.

For images containing steam or fine liquid details, quality settings 5 to 8 points higher than you would use for static product photography are typically necessary to preserve these elements without visible degradation.

Editorial vs Functional Food Images: Treating Them Differently {#editorial-vs-functional}

Not all food images serve the same purpose, and treating them uniformly is a missed optimization opportunity.

Editorial food images

Editorial images are the hero shots. They are the full-frame, carefully styled, horizontally formatted photograph that appears at the top of your recipe post and in the search snippet preview. These images are the first thing a visitor sees and the primary reason they decide to read further. They appear on your homepage in grid format, as social media shares, in Pinterest pins, and as the featured image in Google recipe rich results.

Editorial images deserve your highest quality settings and the most attention to optimization. They are serving multiple purposes: driving clicks from search and social, establishing the visual identity of your brand, and convincing visitors that this recipe is worth their time. A blurry or artifact-laden editorial image is damaging in a way that a slightly degraded in-content step photo is not.

For editorial food images: WebP quality 84 to 88, or AVIF quality 62 to 68. These settings are more conservative than generic recommendations because food editorial photography requires it. The file sizes will be larger than what a product photo at the same quality level would produce, but the visual integrity is worth it.

Functional food images

Functional images are the in-recipe step photos, the process shots, the "this is what the batter should look like at this stage" images. They communicate information. They do not need to be showstoppers. A visitor reading a recipe on their phone in the kitchen is looking at process shots to answer the question "is mine supposed to look like this?" not to be aesthetically moved.

Functional images can be compressed significantly more aggressively than editorial images without harming the user experience. The composition is typically simpler (ingredients in a bowl, a pan on a stove), the background is often a kitchen surface rather than a carefully arranged scene, and the image serves an informational purpose rather than an inspirational one.

For functional food images: WebP quality 75 to 80, or AVIF quality 52 to 58. These settings produce substantially smaller files with quality levels that are entirely adequate for their informational purpose.

A 12-recipe-step image sequence that uses editorial-quality settings for the hero and aggressive settings for the process shots might total 2.5 MB. The same sequence at a single uniform quality setting for all images might be 6 to 8 MB. The difference is not visible in the page quality. It is very visible in the page load speed.

Optimal Settings for Food Photos: Quality, Format, and Sharpening {#optimal-settings}

Here are the specific settings validated for food photography content, format by format.

WebP settings for food photography

Editorial hero images: quality 85, no additional sharpening (over-sharpening at this quality level introduces halos and artificial-looking crispness)

In-content recipe photos: quality 78 to 80

Thumbnail images (recipe card, category grids): quality 75, with a mild unsharp mask at radius 0.6 to 0.8 before compression to compensate for the reduction in perceived sharpness at thumbnail sizes

Background and decorative images (bokeh backgrounds, texture overlays): quality 70, no sharpening needed

AVIF settings for food photography

AVIF performs excellently on food photography because its color model better preserves the saturated hues that characterize this genre. The artifacts that AVIF produces at aggressive settings tend to be smoother and less visually jarring than JPEG artifacts in the same conditions.

Editorial hero images: quality 62 to 65

In-content recipe photos: quality 52 to 56

Thumbnails: quality 50 to 52

Output sharpening before compression

When resizing images downward (from 3000px source to 1200px web image), some sharpness is lost in the interpolation process. Applying a subtle output sharpening pass before the final compression step recovers perceived sharpness without inflating file size:

  • Unsharp mask: amount 60-80%, radius 0.5, threshold 4 (for photographic content)
  • This setting adds minimal bytes to the compressed output but visibly improves perceived crispness

Do not apply sharpening before compression if you are not resizing. Sharpening a file that will remain at full resolution before a lossy compression pass creates high-frequency artifacts at edges that the compression algorithm handles poorly, increasing file size and introducing edge halos.

Resizing for Context: Hero Images, Recipe Cards, Thumbnails, and Social {#resizing-for-context}

Each display context in a food blog or restaurant website has a different optimal image dimension. Serving the right size to each context is as important as quality settings for overall performance.

Hero images (blog post top)

Display width on desktop: typically 740 to 1200 pixels (varies by theme/layout).

Upload at: 1600 x 1067 pixels (3:2 landscape) or the native crop of your editorial shot (often 4:3 portrait for food photography).

For portrait-oriented food photography (which many food bloggers prefer for its Pinterest performance): upload at 1200 x 1800 pixels (2:3 ratio), which renders appropriately in both desktop and mobile contexts without requiring width that exceeds screen size.

Recipe card images

Recipe cards (using plugins like Tasty Recipes or WP Recipe Maker) display a featured image, typically 720 x 540 pixels (4:3) or 720 x 480 pixels (3:2).

Upload recipe card images at exactly 1440 x 1080 pixels (double display size for retina screens) at your appropriate quality setting. This gives retina/high-DPI screens crisp display while keeping file sizes manageable.

In-content process photos

Process photos in the recipe instructions are typically displayed at 50 to 100% of the content column width, depending on layout. For a content column of 800px width:

Upload at: 1200 x 800 pixels (landscape) or 800 x 1200 pixels (portrait). At quality 78 WebP, a 1200 x 800 process photo should be under 150 KB.

Category and homepage thumbnails

Recipe grid thumbnails on category pages and homepage feeds are small. They are typically displayed at 300 to 400 pixels wide.

You do not need to upload separate thumbnail images. WordPress and most recipe plugins generate thumbnails from your uploaded full-size images. The key is ensuring your original image is sharp enough to produce a good thumbnail when resized, which means your source upload should be at the dimensions recommended above, not sized down to thumbnail dimensions that produce poor upscaled quality in other contexts.

Social sharing dimensions

Images used for social sharing need different aspect ratios than your website images. Specifically:

  • Pinterest: 2:3 or 1:2 portrait (standard: 1000 x 1500px). Pinterest is the largest traffic source for most food blogs, and pin-formatted images (taller aspect ratios) significantly outperform square or landscape crops in feed visibility.
  • Instagram grid: 1:1 square, minimum 1080 x 1080px
  • Instagram Stories/Reels cover: 9:16 vertical, 1080 x 1920px
  • Facebook post image: 1200 x 630px (1.91:1 landscape)
  • Open Graph (link preview): 1200 x 630px

Our complete social media image size guide for all platforms covers exact specifications for every platform relevant to food bloggers and restaurants.

How Bloated Food Blog Images Kill Recipe Rankings {#how-images-kill-rankings}

Food blogging has an SEO problem that is directly and causally related to image optimization. Recipe content has been one of the most competitive niches in search for years, and Google's Core Web Vitals update has shifted the competitive landscape significantly.

Core Web Vitals and recipe content

Google's PageSpeed Insights data from 2024 and 2025 shows that food and recipe websites consistently perform among the worst for Core Web Vitals across all content categories. The HTTP Archive Web Almanac category data confirms that recipe and food content sites have higher median page weights and worse LCP scores than most other categories, with images being the primary driver.

The consequence is direct: food bloggers who pass Core Web Vitals thresholds (LCP under 2.5 seconds, CLS under 0.1, INP under 200ms) have a measurable search ranking advantage over otherwise equivalent content. In a space where dozens of food blogs are all publishing banana bread recipes with comparable quality content and SEO optimization, page speed has become a genuine differentiator.

Recipe schema and image requirements

Google's recipe rich results (the visual recipe cards that appear in Google Search and at the top of recipe searches) require a recipeImage property in the structured data markup. Google's recipe structured data documentation specifies that this image should be at a 16:9, 4:3, or 1:1 aspect ratio and recommends at minimum 1200 x 628 pixels (16:9).

Importantly: Google displays this image in the rich result even before someone clicks through to your site. If your recipe image is compelling and high quality, it drives more clicks. If it is blurry or shows compression artifacts in the preview, it drives fewer clicks, even if your recipe ranks highly.

The dual requirement of looking excellent in Google's image preview and loading fast on the actual page page is exactly the tension this guide addresses. The answer is not to choose between them. It is to optimize the image correctly so both can be achieved simultaneously.

The Ramsay's Law of food blog loading

This is an informal observation, but it holds consistently: the more visually spectacular a food blog's photography, the slower its pages tend to load, because the blogger has optimized for beautiful photography without building a corresponding optimization workflow. The result is a competitive moat being left open. A blog with slightly less photogenic photography but dramatically faster load times frequently outranks the prettier competitor in recipe search.

The Workflow for Food Bloggers Publishing Multiple Times Per Week {#food-blogger-workflow}

A high-volume food blogging operation (3 to 5 posts per week, each with 20 to 30 images) cannot afford a slow, manual optimization process. Here is a workflow that takes under 10 extra minutes per post.

The pre-upload routine

  1. Edit in Lightroom/Capture One. Apply your color grading and corrections. Export a full-quality JPEG or WebP from Lightroom at 90% quality, your working resolution (typically 3000px long edge).

  2. Sort by type. Create two subfolders: "hero-editorial" and "process-photos". Move images accordingly. (This takes 2 minutes for a typical 25-image shoot.)

  3. Run batch compression. Open Optimage. Drag the "hero-editorial" folder and set: WebP quality 85, maximum dimension 1600px. Run. Drag the "process-photos" folder and set: WebP quality 78, maximum dimension 1200px. Run. Total processing time: under 60 seconds.

  4. Prepare social crops. For the hero editorial image, export a Pinterest-format crop (2:3) separately and apply the same quality 85 setting. This is the image you schedule to Pinterest.

  5. Upload the web-optimized images. Upload from the processed folders, not the original export folders.

The entire added time to your publication workflow: 5 to 8 minutes per post. The benefit: pages that load in 2 to 3 seconds instead of 8 to 12 seconds, consistently passing Core Web Vitals, and maintaining the visual quality that your audience expects.

Annual library maintenance

Once per year (or when switching hosting or themes), do a full audit of your media library. Use Google PageSpeed Insights on your 10 most-visited posts and identify any image opportunities being flagged. Re-compress and re-upload the images on high-traffic posts where the savings are significant.

Instagram and Pinterest vs Website Export Settings {#social-vs-website-settings}

A persistent mistake among food bloggers is using the same image for social media and website publication, or vice versa. These are fundamentally different contexts with different requirements.

Website images: optimize aggressively for file size

Your website images are delivered over HTTP to browsers. Every byte costs bandwidth, affects load time, and influences your search rankings. Aggressive optimization is appropriate and necessary.

Website export settings (as established above): WebP quality 78 to 85 depending on image type, appropriate dimension constraints.

Instagram: the platform re-compresses everything

Instagram applies its own JPEG compression to every uploaded image, regardless of what format you upload. Instagram accepts JPEG, PNG, and HEIC. The platform downsizes images to 1080 pixels on the longest edge and applies aggressive JPEG compression.

The counter-intuitive best practice for Instagram: upload JPEG at quality 90 to 95. Instagram's compression is going to degrade your image regardless. Uploading at higher quality gives Instagram's algorithm more data to work with, producing a better final compressed result than if you upload an already-compressed image and let Instagram compress it again.

Never upload a WebP to Instagram for publication images. The platform may handle it, but JPEG at high quality is the most predictable workflow for platform social media.

Pinterest: similar rules, slightly different context

Pinterest also re-compresses images. Vertical (2:3 or 1:2) formats significantly outperform square or landscape in Pinterest feed. For Pinterest uploads:

  • Format: JPEG, quality 85 to 92
  • Dimensions: 1000 x 1500px (2:3) as the minimum, 1200 x 1800px for maximum quality
  • Avoid over-sharpening before upload; Pinterest's compression handles naturally-shot images better than heavily sharpened ones

The key insight: optimize your website images for website delivery, and prepare separate social media versions exported at appropriate settings for each platform. The 5 minutes this takes per post is worthwhile given how differently these contexts handle the images you supply them.

Restaurant Websites and Delivery Platforms: Specific Requirements {#restaurant-and-delivery-platforms}

Food image optimization is not only a food blogger concern. Restaurant websites and the delivery platform profiles that drive a significant portion of a restaurant's revenue have specific image requirements that many operators overlook.

Restaurant website photography

A restaurant website typically includes several image-heavy sections: the hero banner (usually a signature dish or ambiance shot), the menu section (individual dish photos), and possibly a gallery section.

Hero banner: This is your LCP image. It needs to be 2560 x 1440 pixels maximum, WebP quality 80, targeting under 400 KB. It should be compressed separately from menu photography because the visual quality expectations for a full-bleed hero shot are higher than for menu thumbnails.

Menu photography: Individual dish photos displayed at menu item size (typically 300 to 600px wide) should be uploaded at maximum 1200 x 800 pixels, WebP quality 82. Well-composed, properly lit dish photography at this setting produces files under 200 KB that display beautifully at menu thumbnail size.

Google Business Profile images: Google's Business Profile photo guidelines recommend high-quality photos of at least 720 x 720 pixels for Google Business Profile. Upload JPEG at quality 85. Google applies its own processing but starts from the quality you provide.

DoorDash

DoorDash recommends menu item photos at 1920 x 1080 pixels (16:9 landscape) with a maximum file size of 5 MB. The platform accepts JPEG and PNG. Upload at JPEG quality 88 to 90 at the recommended dimensions.

DoorDash displays menu photos at approximately 350 x 200 pixels in the menu listing, but the full image is shown when a customer taps the item. Uploading at recommended dimensions ensures the full-view is sharp.

Uber Eats

Uber Eats accepts menu images at a minimum of 320 x 320 pixels and recommends 1080 x 1080 (1:1 square ratio) as the standard. Maximum file size is 5 MB. Upload JPEG quality 88 at 1080 x 1080 pixels. Uber Eats displays menu items in a square format in most interface contexts, so square-cropped dish photos perform better than landscape crops that get center-cropped by the platform.

SkipTheDishes (Canada)

SkipTheDishes, a major delivery platform in the Canadian market, recommends images at minimum 1080 x 1080 pixels (square), JPEG format, under 5 MB. The same square format optimization advice for Uber Eats applies here.

A note on food styling for delivery platforms: Delivery platform photos are competing in a scroll environment where the image must communicate the dish in about 1 second. Overhead shots, clean backgrounds, and generous portion presentation perform consistently better than atmospheric restaurant-style photography in this context. Style for the platform, not for your restaurant's brand aesthetic.

Tools and Batch Processing for Food Content {#tools-and-batch-processing}

The workflow above is only practical if the tools are fast and do not require technical expertise for each use.

What to look for in a food photography optimization tool

  • Batch folder processing: You should be able to drop an entire shoot folder and have it process unattended
  • Per-folder or per-group quality presets: The ability to set different quality levels for hero images vs process photos without processing them individually
  • Before/after file size comparison: So you can verify the optimization before committing
  • Format conversion to WebP and AVIF: Not just JPEG compression
  • Dimension constraints: Maximum width/height settings that apply automatically
  • EXIF stripping: Remove camera metadata (GPS, camera model) that adds bytes and can expose private information

Optimage handles all of these in a drag-and-drop interface designed for content creators, not software engineers. You can process an entire 25-image recipe shoot from 180 MB of Lightroom exports to under 8 MB of publication-ready WebP files in under 2 minutes, with per-folder quality settings that match the editorial/functional image split described in this guide.

The investment in learning a proper optimization workflow pays for itself on the first post where your recipe ranks because of improved Core Web Vitals, or the first time a user mentions in the comments that your site finally "feels fast."

Cloudinary's annual State of Visual Media report consistently shows that websites adopting modern formats and proper compression see median page weight reductions of 40 to 60% and measurable improvements in engagement metrics. Food and recipe sites, given their image density, sit at the upper end of both the problem and the potential upside.

For a broader look at how image optimization connects to revenue metrics, the analysis in image optimization and ecommerce revenue applies directly to food bloggers running affiliate-monetized or ad-monetized sites where page views and session depth translate directly to income.

Real Example: Compressing a 24-Photo Recipe Shoot From 180MB to Under 8MB {#real-compression-example}

This is a real example from a recipe blog post (a multi-component Italian Sunday dinner, published early 2025). Details have been generalized but the numbers are accurate.

The shoot

24 photos total:

  • 3 editorial hero shots (various angles of the final plated dish)
  • 5 step photos for the pasta dough process
  • 6 step photos for the sauce
  • 4 step photos for the assembly
  • 4 ingredient flatlay photos
  • 2 lifestyle shots (table setting, hands serving)

Source files from Lightroom export

Export settings used (before optimization): JPEG, quality 95, 4000px long edge, sRGB

Image Category Count Avg Size Total
Hero editorial shots 3 9.8 MB 29.4 MB
Pasta dough process 5 6.2 MB 31.0 MB
Sauce process 6 6.8 MB 40.8 MB
Assembly process 4 7.1 MB 28.4 MB
Ingredient flatlays 4 8.4 MB 33.6 MB
Lifestyle shots 2 8.6 MB 17.2 MB
Total 24 7.5 MB avg 180.4 MB

After optimization

Hero editorial shots: WebP quality 86, 1600px max long edge

Image Category Count Avg Size Total
Hero editorial shots 3 420 KB 1.26 MB
Pasta dough process (WebP q78, 1200px) 5 185 KB 0.93 MB
Sauce process (WebP q78, 1200px) 6 210 KB 1.26 MB
Assembly process (WebP q78, 1200px) 4 195 KB 0.78 MB
Ingredient flatlays (WebP q82, 1400px) 4 310 KB 1.24 MB
Lifestyle shots (WebP q82, 1600px) 2 365 KB 0.73 MB
Total 24 256 KB avg 6.2 MB

Total reduction: 96.6%

Visual quality comparison

The optimized files were reviewed at 100% zoom in a browser at 1600px display width (larger than any recipe blog content column). The hero editorial shots were visually indistinguishable from the original Lightroom exports. The process photos showed extremely subtle reduction in texture definition in the pasta dough texture shots, visible only at 100% zoom and imperceptible at normal display sizes. The ingredient flatlays and lifestyle shots showed no perceptible quality difference.

Page load impact

The recipe post was published with the optimized images. Google PageSpeed mobile score for the post: 74. LCP: 2.2 seconds (within the "Good" threshold). Prior to the blog owner's optimization workflow being established, comparable posts from the same site scored in the 35 to 48 range with LCP scores of 6 to 9 seconds.

The difference in session data: the optimized post had a 38% lower bounce rate and 62% higher scroll depth compared to unoptimized comparable posts, based on analytics data from the first 30 days of publication.

Frequently Asked Questions {#faq}

My food photos look great on my screen but blurry on the published post. What is wrong?

This is almost always a resize issue, not a compression issue. If your WordPress theme or recipe plugin is displaying images at a size larger than the dimensions you uploaded, the browser upscales the image and it appears soft. Check your theme's content column width and upload images at at least the display width, ideally 2x display width for retina screen sharpness.

Should I use AVIF for food photography?

AVIF is a good choice for food photography if your publishing workflow supports it. AVIF's improved color compression is particularly beneficial for highly saturated food content. Use quality 62 to 68 for editorial shots and 52 to 58 for process photos. The encoding is slower than WebP, but the results are noticeably better at equivalent file sizes for this content type.

How do I keep my images from being recompressed when I update my WordPress theme?

Theme updates do not recompress images. However, switching themes can change registered image sizes, which means WordPress may no longer have a registered size that matches the new theme's display dimensions. After a theme switch, use the "Regenerate Thumbnails" plugin to generate image size variants matching your new theme's requirements. Your source images remain as uploaded.

Is it worth using different quality settings for different recipes?

Matching quality settings to content type (editorial vs process vs thumbnails) is worth the extra 2 minutes per post in workflow. The cumulative effect on your site's overall page weight and Core Web Vitals is significant when multiplied across hundreds of posts. However, recipe-to-recipe variation within the same category (all editorial hero shots at quality 85, all process shots at quality 78) is not typically necessary. The content category split is where the meaningful size difference lies.

My recipe blog has 400 old posts with unoptimized images. Should I go back and fix them?

Focus on your highest-traffic posts first. Use Google Search Console to identify which posts receive the most impressions and clicks, and use Google PageSpeed Insights to identify which of those have the largest image optimization opportunities. Fixing the top 20 highest-traffic posts will typically eliminate 80% of your aggregate image optimization problem, because traffic is never uniformly distributed. A full library optimization can be done progressively rather than all at once.

Ready to optimize your images? Try Optimage free and compress your next recipe shoot to web-ready sizes in under 2 minutes, with quality settings designed for photographic content that cannot afford to look bad.

Related reading:

Try Optimage Free

Compress, convert, and optimize your images in seconds. No sign-up needed to start.

Start Optimizing Free
Back to The Optimage Journal