Skip to content
Cooking & Food Science Simple #satiety#fullness#foods

Satiety Index of Common Foods

Calorie-for-calorie, some foods keep you full far longer than others.

A free, animated satiety index of common foods you can read here or embed on any website, from Scrollchart.

Satiety Index of Common Foods

Satiety Index of Common FoodsFullness per equal-calorie serving (Holt et al. 1995) — white bread = 100 baseline

Satiety index bars (white bread = 100 baseline) for boiled potato (323), fish (225), oats (209), apple (197), pasta (119), croissant (47). Annotates protein, fiber, and water as primary drivers.

Good for

  • Weight-management cooking articles explaining why meal composition affects hunger and snacking frequency
  • Meal-planning guides for satiety-first eating without strict calorie counting
  • Nutrition blog content comparing processed vs whole foods on a fullness-per-calorie basis

Source & accuracy

This satiety index of common foods is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Why satiety varies across identical calorie amounts

The satiety index measures how long a food keeps you full relative to a baseline (white bread at 100). Boiled potatoes score around 323, making them roughly three times more satiating per calorie than white bread. Whole grains score 100-150, fish 200+, and beef around 176, while croissants score only 47 because their fat and low fiber content trigger less fullness signaling.

Protein is the most satiating macronutrient per calorie, followed by fiber and water content. Boiled potatoes score high because they are mostly water and resistant starch, which signals fullness powerfully. Protein-rich foods like eggs and fish trigger sustained satiety hormones like peptide YY and GLP-1.

Practical meal building for sustained fullness

High-satiety foods are typically whole, unprocessed, and high in either protein, fiber, or water. Beans and lentils combine all three, scoring around 300. Refined snacks (crackers, pastries, sweets) score below 100 because their processing removes water and fiber while adding concentrated calories.

Eating a filling meal doesn't require high calories. A bowl of vegetable soup (broth plus fiber) with added chicken satiate far longer than a pastry of equivalent calories because satiety depends on volume, water content, and nutrient density, not just energy. This is why weight-loss diets emphasizing whole foods feel less restrictive than calorie-matched processed diets.

Embed this diagram

Add this animated satiety index of common foods to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated satiety index of common foods for any website.
Who uses it
Cooking blogs, Nutrition blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="satiety-per-meal" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Satiety Index of Common Foods" for my website?
Scrollchart provides "Satiety Index of Common Foods" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a satiety index of common foods in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.