diff --git a/funnel/signals.py b/funnel/signals.py
index ae1742ea1..46487b6de 100644
--- a/funnel/signals.py
+++ b/funnel/signals.py
@@ -61,3 +61,5 @@
 # Commentset role change signals (sends user, document)
 project_role_change = app_signals.signal('project_role_change')
 proposal_role_change = app_signals.signal('proposal_role_change')
+
+project_data_change = app_signals.signal('project_data_change')
diff --git a/funnel/templates/layout.html.jinja2 b/funnel/templates/layout.html.jinja2
index a1d8ac9dc..1f0a3dd89 100644
--- a/funnel/templates/layout.html.jinja2
+++ b/funnel/templates/layout.html.jinja2
@@ -50,10 +50,10 @@
       <meta property="og:url" content="{{ request.base_url }}" />
     {%- endblock canonical_url %}
     {%- block image_src %}
-      {%- if project and project.bg_image.url %}
-        <link rel="image_src" href="{{ project.bg_image }}" />
-        <meta property="og:image" content="{{ project.bg_image }}" />
-        <meta name="twitter:image" content="{{ project.bg_image }}" />
+      {%- if project and project.preview_image %}
+        <link rel="image_src" href="{{ project.url_for('preview_image') }}" />
+        <meta property="og:image" content="{{ project.url_for('preview_image') }}" />
+        <meta name="twitter:image" content="{{ project.url_for('preview_image') }}" />
       {%- elif project and project.account.logo_url %}
         <link rel="image_src" href="{{ project.account.logo_url }}" />
         <meta property="og:image" content="{{ project.account.logo_url }}" />
diff --git a/funnel/templates/preview/project.html.jinja2 b/funnel/templates/preview/project.html.jinja2
new file mode 100644
index 000000000..8fe90490e
--- /dev/null
+++ b/funnel/templates/preview/project.html.jinja2
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style>
+            * {
+              box-sizing: border-box;
+              color: #1f2d3d;
+              font-weight: 600;
+              font-family: 'SegoeUI', 'Montserrat', 'Helvetica', sans-serif;
+              padding: 0;
+              margin: 0;
+            }
+
+            body {
+                width: 320px;
+                height: 180px
+            }
+
+            .main-wrapper {
+                width: 100%;
+                height: 100%;
+                position: relative;
+                display: flex;
+                align-items: start;
+                justify-content: space-between;
+            }
+
+            .main-content {
+              width: -webkit-fill-available;
+            }
+
+            .project-title {
+                font-size: 1.2em;
+                text-align: left;
+                padding-bottom: 0.5rem;
+                font-weight: 600;
+                border-bottom: 0.5px solid #1f2d3d;
+            }
+
+            .project-tagline {
+                padding-top: 0.3rem;
+                font-size: 0.7rem;
+                font-weight: 300;
+            }
+            .title-wrapper{
+                line-height: 1.2;
+                text-align: left;
+                padding: 0.75em;
+            }
+
+            .organization-label{
+              font-size: 0.4rem;
+              text-transform: uppercase;
+              padding-bottom: 0.1rem;
+            }
+
+
+            .datetime-wrapper {
+              position: absolute;
+              font-size: 0.5rem;
+              left: 1.35em;
+              bottom: 1.2em;
+              gap: 4rem;
+              text-align: left;
+              display: flex;
+              justify-content: space-between;
+            }
+        </style>
+    </head>
+    <body>
+        <main class="main-wrapper" id="container">
+            <div class="main-content">
+                <div class="title-wrapper">
+                <h5 class="organization-label">{{project.account.title}}</h5>
+                    <h1 class="project-title">{{ project.title }}</h1>
+                    <div class="project-tagline">
+                      {{ project.tagline }}
+                    </div>
+                </div>
+                <div class="datetime-wrapper">
+                    <p>{{ project.datelocation }}</p>
+                    <p>{{ project.primary_venue.title }}</p>
+                </div>
+            </div>
+        </main>
+        <script>
+            const randomizeIndex = (count) => {
+                return Math.floor(count * Math.random());
+            };
+            const randomizeElements = (hueList) => {
+                const uniqueHuePair = new Set();
+                let hueCount = hueList.length;
+                let randomIndex;
+                let hue;
+                while (uniqueHuePair.size < 2) {
+                    randomIndex = randomizeIndex(hueCount);
+                    hue = hueList[randomIndex];
+                    uniqueHuePair.add(hue);
+                }
+                return uniqueHuePair;
+            };
+
+            window.addEventListener("load", () => {
+                var hueValues = [5, 23, 39, 48, 92, 172, 201, 220, 273, 335]
+                huePair = Array.from(randomizeElements(hueValues));
+                console.log(huePair);
+                var gradient = `linear-gradient(to bottom right, hsl(${huePair[0]}, 100%, 87%), hsl(${huePair[0]+(huePair[1]-huePair[0])*0.33}, 100%, 87%), hsl(${huePair[0]+(huePair[1]-huePair[0])*0.66}, 100%, 87%), hsl(${huePair[1]}, 100%, 87%))`;
+                document.getElementById("container").style.background = gradient;
+            })
+        </script>
+    </body>
+</html>
diff --git a/funnel/views/__init__.py b/funnel/views/__init__.py
index f3c17cd36..764fc684c 100644
--- a/funnel/views/__init__.py
+++ b/funnel/views/__init__.py
@@ -38,6 +38,7 @@
     shortlink,
     siteadmin,
     sitemap,
+    thumbnails,
     ticket_event,
     ticket_participant,
     update,
diff --git a/funnel/views/project.py b/funnel/views/project.py
index 272176278..089bd28e6 100644
--- a/funnel/views/project.py
+++ b/funnel/views/project.py
@@ -6,7 +6,15 @@
 from json import JSONDecodeError
 from types import SimpleNamespace
 
-from flask import Response, abort, current_app, flash, render_template, request
+from flask import (
+    Response,
+    abort,
+    current_app,
+    flash,
+    render_template,
+    request,
+    send_file,
+)
 from flask_babel import format_number
 from markupsafe import Markup
 
@@ -456,6 +464,7 @@ def edit(self) -> ReturnView:
             db.session.commit()
             flash(_("Your changes have been saved"), 'info')
             tag_locations.queue(self.obj.id)
+            project_data_change.send(self.obj)
 
             # Find and delete draft if it exists
             if self.get_draft() is not None:
@@ -908,5 +917,16 @@ def update_featured(self) -> ReturnView:
             }
         return render_redirect(get_next_url(referrer=True))
 
+    @route('preview.png')
+    def preview_image(self) -> Response:  # pylint: disable=R1710
+        """Return the project preview image."""
+        if self.obj.preview_image:
+            return send_file(
+                io.BytesIO(self.obj.preview_image),
+                as_attachment=False,
+                mimetype='image/png',
+            )
+        abort(404)  # TODO: Return a placeholder image
+
 
 ProjectView.init_app(app)
diff --git a/funnel/views/thumbnails.py b/funnel/views/thumbnails.py
new file mode 100644
index 000000000..9b37834f4
--- /dev/null
+++ b/funnel/views/thumbnails.py
@@ -0,0 +1,41 @@
+"""View for autogenerating thumbnail previews."""
+
+from __future__ import annotations
+
+import os
+import tempfile
+
+from flask import render_template
+from html2image import Html2Image
+
+from ..models import Project, db
+from ..signals import project_data_change
+from .jobs import rqjob
+
+
+@project_data_change.connect
+def redo_project_preview_image(project: Project) -> None:
+    render_project_preview_image.queue(project_id=project.id)
+
+
+@rqjob()
+def render_project_preview_image(project_id: int) -> None:
+    """Generate a project preview image."""
+    project = Project.query.get(project_id)
+    if project is None:
+        return
+
+    fd, temp_filepath = tempfile.mkstemp('.png')
+    os.close(fd)
+    temp_dir, temp_filename = os.path.split(temp_filepath)
+    hti = Html2Image(size=(320, 180), output_path=temp_dir)
+    html_src = render_template('preview/project.html.jinja2', project=project)
+    screenshot_files = hti.screenshot(html_str=html_src, save_as=temp_filename)
+
+    if screenshot_files:
+        with open(screenshot_files[0], mode='rb') as file:
+            project.preview_image = file.read()
+        db.session.commit()
+
+    for each_screenshot in screenshot_files:
+        os.remove(each_screenshot)
diff --git a/requirements/base.in b/requirements/base.in
index f1bb5f6a1..2ed0c24c6 100644
--- a/requirements/base.in
+++ b/requirements/base.in
@@ -26,6 +26,7 @@ geoip2
 grapheme
 greenlet<3.0  # Required for asyncio in SQLAlchemy, but version conflict in Playwright
 gunicorn
+html2image
 html2text
 httpx[http2]
 icalendar
diff --git a/requirements/base.txt b/requirements/base.txt
index c55b3da59..062553ac3 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -1,4 +1,4 @@
-# SHA1:2820370229ca38f2e0ba469dbbfe34d0d94623b9
+# SHA1:5dcd04b0376ab9e5efeb28557b7ca2d8839cf852
 #
 # This file is autogenerated by pip-compile-multi
 # To update, run:
@@ -138,7 +138,7 @@ flask-caching==2.1.0
     # via baseframe
 flask-executor==1.0.0
     # via -r requirements/base.in
-flask-flatpages==0.8.1
+flask-flatpages==0.8.2
     # via -r requirements/base.in
 flask-mailman==1.0.0
     # via -r requirements/base.in
@@ -190,6 +190,8 @@ h2==4.1.0
     # via httpx
 hpack==4.0.0
     # via h2
+html2image==2.0.4.3
+    # via -r requirements/base.in
 html2text==2020.1.16
     # via -r requirements/base.in
 html5lib==1.1
@@ -236,7 +238,7 @@ linkify-it-py==2.0.2
     # via -r requirements/base.in
 lxml==4.9.3
     # via premailer
-mako==1.2.4
+mako==1.3.0
     # via alembic
 markdown==3.5.1
     # via
@@ -258,7 +260,7 @@ markupsafe==2.1.3
     #   wtforms
 marshmallow==3.20.1
     # via dataclasses-json
-maxminddb==2.4.0
+maxminddb==2.5.1
     # via geoip2
 mdit-py-plugins==0.4.0
     # via -r requirements/base.in
@@ -374,6 +376,7 @@ requests==2.31.0
     #   -r requirements/base.in
     #   baseframe
     #   geoip2
+    #   html2image
     #   premailer
     #   pyvimeo
     #   requests-file
@@ -452,7 +455,7 @@ tuspy==1.0.1
     # via pyvimeo
 tweepy==4.14.0
     # via -r requirements/base.in
-twilio==8.10.0
+twilio==8.10.1
     # via -r requirements/base.in
 types-python-dateutil==2.8.19.14
     # via arrow
@@ -490,6 +493,8 @@ webencodings==0.5.1
     # via
     #   bleach
     #   html5lib
+websocket-client==1.6.4
+    # via html2image
 werkzeug==3.0.1
     # via
     #   -r requirements/base.in
diff --git a/tests/unit/views/preview_image_test.py b/tests/unit/views/preview_image_test.py
new file mode 100644
index 000000000..e3d31d0df
--- /dev/null
+++ b/tests/unit/views/preview_image_test.py
@@ -0,0 +1,25 @@
+from io import BytesIO
+
+import pytest
+from magic import from_buffer
+from PIL import Image
+
+from funnel.views.thumbnails import render_project_preview_image
+
+
+@pytest.mark.usefixtures('project_expo2011', 'all_fixtures')
+def test_preview_image_jobs(project_expo2011) -> None:
+    assert project_expo2011.preview_image is None
+    render_project_preview_image(project_id=project_expo2011.id)
+    assert project_expo2011.preview_image is not None
+
+
+@pytest.mark.usefixtures('project_expo2011', 'all_fixtures')
+def test_preview_image_size_mimeytpe(project_expo2011) -> None:
+    render_project_preview_image(project_id=project_expo2011.id)
+    with Image.open(BytesIO(project_expo2011.preview_image)) as preview_image:
+        assert preview_image.size == (1280, 720)
+    image_mimetype = from_buffer(
+        BytesIO(project_expo2011.preview_image).read(2048), mime=True
+    )
+    assert image_mimetype == 'image/png'
