[DO NOT MERGE] Image experiment

app/assets/stylesheets/views/_image-test.scss

@@ -0,0 +1,3 @@
+.image-test {
+  width: 100%;
+}

app/controllers/image_test_controller.rb

@@ -0,0 +1,5 @@
+class ImageTestController < ApplicationController
+  def show; end
+  def solo; end
+  def graphics; end
+end

app/views/image_test/graphics.html.erb

@@ -0,0 +1,18 @@
+<% add_view_stylesheet("image-test") %>
+<h1>Image test</h1>
+
+<h2> Original resolution </h2>
+
+<h3> Original PNG (1598 x 1236, 56 Kilobytes) </h3>
+ <%= image_tag("image-test/monitor.png", class: "image-test") %>
+
+<h2> Compressed versions </h2>
+
+<h3> MozJPEG (61 Kilobytes) </h3>
+<%= image_tag("image-test/monitor.jpg", class: "image-test") %>
+
+<h3> AVIF (960 x 640, 8 Kilobytes) </h3>
+<%= image_tag("image-test/monitor.avif", class: "image-test") %>
+
+<h3> WebP (960 x 640, 11 Kilobytes) </h3>
+<%= image_tag("image-test/monitor.webp", class: "image-test") %>

app/views/image_test/show.html.erb

@@ -0,0 +1,36 @@
+<% add_view_stylesheet("image-test") %>
+<h1>Image test</h1>
+
+<h2> Original resolution </h2>
+
+<h3> Original JPG (6380 x 4255, 6.2 Megabytes) </h3>
+ <%= image_tag("image-test/image.jpg", class: "image-test") %>
+ Largest contentful paint (lowest to value achieved): 0.58-0.84s
+
+<h2> Resized to 960 x 640 (designer recommended resolution) </h2>
+
+<h3> MozJPEG (960 x 640, 809 Kilobytes) </h3>
+<%= image_tag("image-test/moz.jpg", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.38-0.64s
+
+<h3> AVIF (960 x 640, 406 Kilobytes) </h3>
+<%= image_tag("image-test/avif.avif", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.37-0.71s
+
+<h3> WebP (960 x 640, 327 Kilobytes) </h3>
+<%= image_tag("image-test/webp.webp", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.34-0.68s
+
+<h2> Resized to 1920 x 1280 (double of 960 x 640) </h2>
+
+<h3> MozJPEG (1920 x 1280, 2.81 Megabytes) </h3>
+<%= image_tag("image-test/1920.jpg", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.46-0.81s
+
+<h3> AVIF (1920 x 1280, 1.4 Megabytes) </h3>
+<%= image_tag("image-test/1920.avif", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.48-0.68s
+
+<h3> WebP (1920 x 1280, 1.1 Megabytes) </h3>
+<%= image_tag("image-test/1920.webp", class: "image-test") %>
+Largest contentful paint (lowest to highest value achieved): 0.46-0.66s

app/views/image_test/solo.html.erb

@@ -0,0 +1,2 @@
+<% add_view_stylesheet("image-test") %>
+<%= image_tag("image-test/1920.webp", class: "image-test") %>

config/initializers/dartsass.rb

@@ -9,6 +9,7 @@
   "views/_homepage_header.scss" => "views/_homepage_header.css",
   "views/_homepage_more_on_govuk.scss" => "views/_homepage_more_on_govuk.css",
   "views/_homepage.scss" => "views/_homepage.css",
+  "views/_image-test.scss" => "views/_image-test.css",
   "views/_local-transaction.scss" => "views/_local-transaction.css",
   "views/_location_form.scss" => "views/_location_form.css",
   "views/_place-list.scss" => "views/_place-list.css",

config/routes.rb

@@ -135,6 +135,10 @@
   # published route so can't be accessed from outside
   get "/static-error-pages/:error_code.html", to: "static_error_pages#show"
 
+  get "/image-test", to: "image_test#show"
+  get "/image-test/solo", to: "image_test#solo"
+  get "/image-test/graphics", to: "image_test#graphics"
+
   # Answer pages
   constraints FormatRoutingConstraint.new("answer") do
     get ":slug", to: "answer#show", as: "answer"