diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 03f179e2e8..002f77a9b3 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -7,6 +7,7 @@ Changelog
  * Added `search_index` option to StreamField blocks to control whether the block is indexed for searching (Vedant Pandey)
  * Remember previous location on returning from page add/edit actions (Robert Rollins)
  * Update settings file in project settings to address Django 4.2 deprecations (Sage Abdullah)
+ * Improve layout and accessibility of the image URL generator page, reduce reliance on JavaScript (Temidayo Azeez)
  * Fix: Update system check for overwriting storage backends to recognise the `STORAGES` setting introduced in Django 4.2 (phijma-leukeleu)
  * Fix: Prevent password change form from raising a validation error when browser autocomplete fills in the "Old password" field (Chiemezuo Akujobi)
  * Fix: Ensure that the legacy dropdown options, when closed, do not get accidentally clicked by other interactions wide viewports (CheesyPhoenix, Christer Jensen)
diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md
index bc891c24a0..e8ef5c80a9 100644
--- a/docs/releases/6.0.md
+++ b/docs/releases/6.0.md
@@ -17,6 +17,7 @@ depth: 1
  * Added `search_index` option to StreamField blocks to control whether the block is indexed for searching (Vedant Pandey)
  * Remember previous location on returning from page add/edit actions (Robert Rollins)
  * Update settings file in project settings to address Django 4.2 deprecations (Sage Abdullah)
+ * Improve layout and accessibility of the image URL generator page, reduce reliance on JavaScript (Temidayo Azeez)
 
 ### Bug fixes
 
diff --git a/wagtail/images/static_src/wagtailimages/js/image-url-generator.js b/wagtail/images/static_src/wagtailimages/js/image-url-generator.js
index c9e50748ae..88c4b53ab1 100644
--- a/wagtail/images/static_src/wagtailimages/js/image-url-generator.js
+++ b/wagtail/images/static_src/wagtailimages/js/image-url-generator.js
@@ -1,5 +1,5 @@
 $(function () {
-  $('.image-url-generator').each(function () {
+  $('[data-generator-url]').each(function () {
     var $this = $(this);
     var $form = $this.find('form');
     var $filterMethodField = $form.find('select#id_filter_method');
@@ -9,7 +9,6 @@ $(function () {
     var $result = $this.find('#result-url');
     var $loadingMask = $this.find('.loading-mask');
     var $preview = $this.find('img.preview');
-    var $sizeNote = $('#note-size');
 
     var generatorUrl = $this.data('generatorUrl');
 
@@ -55,13 +54,6 @@ $(function () {
         }
       }
 
-      // Display note about scaled down images if image is large
-      if ($widthField.val() > $(window).width()) {
-        $sizeNote.show();
-      } else {
-        $sizeNote.hide();
-      }
-
       // Fields with width and height
       $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
         .done(function (data) {
diff --git a/wagtail/images/templates/wagtailimages/images/url_generator.html b/wagtail/images/templates/wagtailimages/images/url_generator.html
index 3ff4e20a4e..396aa5e448 100644
--- a/wagtail/images/templates/wagtailimages/images/url_generator.html
+++ b/wagtail/images/templates/wagtailimages/images/url_generator.html
@@ -3,12 +3,20 @@
 
 {% block titletag %}{% blocktrans trimmed with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %}
 
+{% block extra_css %}
+    <style>
+        .loading-mask {
+            max-height: clamp(25rem, 50vh, 50rem);
+        }
+    </style>
+{% endblock %}
+
 {% block content %}
     {% trans "Generating URL" as title_str %}
     {% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %}
 
-    <div class="image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' image.id '__filterspec__' %}">
-        <form class="w-mb-10">
+    <div class="w-image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' image.id '__filterspec__' %}">
+        <form class="w-image-url-generator__form w-mb-5">
             {% include "wagtailadmin/shared/field.html" with field=form.filter_method %}
             {% field_row max_content=True %}
                 {% include "wagtailadmin/shared/field.html" with field=form.width %}
@@ -17,19 +25,18 @@
             {% endfield_row %}
         </form>
 
-        {% trans "URL" as heading %}
-        {% panel id="url" icon="link" heading=heading %}
-            <textarea id="result-url" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
-        {% endpanel %}
-
         {% trans "Preview" as heading %}
         {% panel id="preview" icon="view" heading=heading %}
-            <div>
-                <div class="loading-mask inline-block">
-                    <img class="preview" src="" alt="{% trans 'Preview' %}" />
+            <div class="w-image-url-generator__preview">
+                <div class="loading-mask w-block w-border-2 w-border-border-furniture w-overflow-scroll w-p-4 w-rounded-sm">
+                    <img class="preview w-max-w-none" src="" alt="{% trans 'Preview' %}" />
                 </div>
             </div>
-            <p id="note-size" class="help-block help-warning">{% icon name='warning' %}{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
+        {% endpanel %}
+
+        {% trans "URL" as heading %}
+        {% panel id="url" icon="link" heading=heading %}
+            <textarea class="w-image-url-generator__url" id="result-url" aria-labelledby="url-heading" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
         {% endpanel %}
     </div>
 {% endblock %}