diff --git a/pages/image_formats.py b/pages/image_formats.py
new file mode 100644
index 0000000..a2375b7
--- /dev/null
+++ b/pages/image_formats.py
@@ -0,0 +1,15 @@
+# Extra image sizes for images in CMS rich text, alongside Wagtail's built-in
+# "Full width" (800px wide) and "Left-aligned"/"Right-aligned" (500px wide).
+# The small formats fit the image within 300 x 300 px, so a tall image floated
+# beside a couple of paragraphs doesn't tower over them. They use the same CSS
+# classes as the built-in formats (see static/css/custom.css).
+from wagtail.images.formats import Format, register_image_format
+
+register_image_format(
+    Format("left_small", "Left-aligned (small)", "richtext-image left", "max-300x300")
+)
+register_image_format(
+    Format(
+        "right_small", "Right-aligned (small)", "richtext-image right", "max-300x300"
+    )
+)
diff --git a/pages/tests.py b/pages/tests.py
index 7ce503c..70a9190 100644
--- a/pages/tests.py
+++ b/pages/tests.py
@@ -1,3 +1,37 @@
-from django.test import TestCase
+import tempfile
 
-# Create your tests here.
+from django.test import SimpleTestCase, TestCase, override_settings
+from wagtail.images.formats import get_image_format, get_image_formats
+from wagtail.images.models import Image
+from wagtail.images.tests.utils import get_test_image_file
+from wagtail.rich_text import expand_db_html
+
+
+class ImageFormatsTest(SimpleTestCase):
+    def test_small_formats_are_offered(self):
+        names = [image_format.name for image_format in get_image_formats()]
+        self.assertEqual(
+            names, ["fullwidth", "left", "right", "left_small", "right_small"]
+        )
+
+    def test_small_formats_fit_within_300px(self):
+        for name, side in [("left_small", "left"), ("right_small", "right")]:
+            image_format = get_image_format(name)
+            self.assertEqual(image_format.filter_spec, "max-300x300")
+            self.assertEqual(image_format.classname, f"richtext-image {side}")
+
+
+class SmallImageFormatRenderingTest(TestCase):
+    def test_right_small_renders_within_300px(self):
+        with tempfile.TemporaryDirectory() as media_root, override_settings(
+            MEDIA_ROOT=media_root
+        ):
+            # a 640 x 480 test image
+            image = Image.objects.create(title="Ship", file=get_test_image_file())
+            html = expand_db_html(
+                f'<embed embedtype="image" id="{image.pk}" format="right_small" alt="Ship"/>'
+            )
+
+        self.assertIn('class="richtext-image right"', html)
+        self.assertIn('width="300"', html)
+        self.assertIn('height="225"', html)
diff --git a/static/css/custom.css b/static/css/custom.css
index 8eb935c..6ff678d 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -177,3 +177,9 @@ note[data-notation] {
 .prose {
   max-width: max(65ch, 75%);
 }
+
+/* let a prose block opt out of the width limit above with Tailwind's
+   max-w-none (e.g. the manuscripts page introduction) */
+.prose.max-w-none {
+  max-width: none;
+}
diff --git a/templates/manuscripts.html b/templates/manuscripts.html
index 188412d..8620531 100644
--- a/templates/manuscripts.html
+++ b/templates/manuscripts.html
@@ -11,7 +11,10 @@
       <h3 class="text-4xl mb-8 font-bold" id="top">
         {{ snippet.title|default:"Manuscripts" }}
       </h3>
-      <div class="prose mb-8">
+      <!-- max-w-none lets the introduction use the page's full width like the
+           lists below; flow-root keeps images floated in the CMS text from
+           overlapping the filters -->
+      <div class="prose max-w-none mb-8 flow-root">
         {% if snippet.body %}
           {{ snippet.body|richtext }}
         {% else %}