Improve image loading and move homepage quote above navigation

README.md

@@ -48,6 +48,17 @@ This GitHub repository contains CD workflows, that will **automatically run** a
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
+## Image assets
+
+Photographs and graphics are served as static files from this repository. Keep the
+originals, then run `python3 scripts/optimise-images.py` with Pillow installed to
+regenerate the small WebP portraits, article images and homepage logo. Commit the
+generated files; visitors and production builds do not need an image service.
+Committee thumbnails are sized for up to three times their displayed resolution.
+The original Jeremy Lo Ying Ping author photograph was copied from
+<https://jezz.me/img/jeremy_lo_ying_ping.jpg>.
+Luma's live calendar and its event images remain hosted by Luma.
+
 ## Redesign preview on GitHub Pages
 
 The redesign is published separately at <https://uclai.co.uk/preview/website-redesign/>.

blog/2024-10-20-nobel-prizes-2024.md

@@ -31,7 +31,7 @@ The AI system *AlphaFold2* by DeepMind is the first non-experimental method that
 
 Until very recently it could take research biologists a year to get a single answer about a 3D shape of a protein fold; now we have a machine learning algorithm that can do the same in 5-10 minutes. 
 
-![Alt text](/img/blog/nobel-prize-1.png)
+![Alt text](/img/blog/optimised/nobel-prize-1.webp)
 
 The program consists of three stages: database search and preprocessing, *EvoFormer*, and structure model. 
 

blog/2025-01-28-ww2-shaping-ai.md

@@ -18,7 +18,7 @@ To counteract Enigma algorithms, the brilliant minds at Bletchley Park, includin
 
 But how was this code-breaking machine a predecessor to modern AI?
 
-![The Enigma machine](/img/blog/history-of-ai-1.png)
+![The Enigma machine](/img/blog/optimised/history-of-ai-1.webp)
 
 Breaking the Enigma cipher involved identifying patterns in ciphertext to deduce the underlying encryption keys. Modern neural networks, particularly in deep learning, excel at recognising patterns in complex datasets. Image and speech recognition, genomics, and medical imaging are all fields where we use trend detection nowadays. 
 

blog/2025-03-02-first-neural-network.md

@@ -12,7 +12,7 @@ A neural network is a computational model inspired by the structure of the brain
 
 Modern neural networks are complex multi-layered networks capable of solving intricate tasks like image recognition, natural language processing, and autonomous driving. They have had a profound impact on modern technology, revolutionizing and enriching people's lives through their application in solutions ranging from large language models like GPT-4 to advancements in healthcare, such as disease detection and drug discovery.
 
-![How an artificial neural network works: input layer, hidden layers, output layers. (Image source: Facundo Bre)](/img/blog/neural-network-1.png)
+![How an artificial neural network works: input layer, hidden layers, output layers. (Image source: Facundo Bre)](/img/blog/optimised/neural-network-1.webp)
 
 ### The Turing Machine
 To truly appreciate modern neural networks, it’s important to look at the story of their first theoretical inception. The origins of neural networks are intertwined with the origins of artificial intelligence itself, beginning in Cambridge in 1936, where a mathematician named Alan Turing was quietly laying the foundation for modern AI.
@@ -28,7 +28,7 @@ Inspired by Turing’s 1936 paper, Warren McCulloch, a neuroscientist, and Walte
 
 They proposed that neurons could be modeled as binary on-off units, firing when inputs exceeded a certain threshold (akin to receiving enough excitatory signals). By connecting these idealized neurons in various configurations, they demonstrated that the systems could implement basic logical operators like AND, OR, and NOT. This offered the possibility that these systems might simulate logical operations or even more complex computations. They were the first to describe what later researchers would call a neural network.
 
-![The McCulloch-Pitts Neuron Model. (Image source: available under fair use, Creative Commons)](/img/blog/neural-network-3.png)
+![The McCulloch-Pitts Neuron Model. (Image source: available under fair use, Creative Commons)](/img/blog/optimised/neural-network-3.webp)
 
 Although their model was only theoretical and faced several limitations, their mathematical approach to neural functioning inspired subsequent generations of researchers—paving the way for cybernetics and later the field of artificial intelligence. Their work ultimately shaped the path for modern AI and deep learning, which are now deeply embedded in our everyday lives.
 

blog/2025-04-01-i-am-ai-music.md

@@ -6,7 +6,7 @@ tags: [music, art, neural networks, deep learning, genAI]
 ---
 
 ***"Even AI gotta practice clonin' Kendrick / The double entendre, the encore remnants."* - Kendrick Lamar, America Has A Problem (Remix).**
-![I AM AI - edit of Playboi Carti's "MUSIC" album cover which reads "I AM MUSIC".](/img/blog/i-am-ai-music.jpeg)
+![I AM AI - edit of Playboi Carti's "MUSIC" album cover which reads "I AM MUSIC".](/img/blog/optimised/i-am-ai-music.webp)
 ### love all my supporters          it’s time
 It’s been just over two weeks since Playboi Carti dropped his latest album. Since his last, we've seen more than four years of pushed-back dates, scrapped rollouts, and straight up lies. *MUSIC* is him thanking the world for the wait. 
 

blog/authors.yml

@@ -2,34 +2,34 @@ jeremy:
   name: Jeremy Lo Ying Ping
   title: Co-founder & CEO, DOXA AI
   url: https://jezz.me/
-  image_url: https://jezz.me/img/jeremy_lo_ying_ping.jpg
+  image_url: /img/committee/thumbnails/jeremy_lo_ying_ping.webp
 
 martynas:
   name: Martynas Pocius
   title: President
-  image_url: /img/committee/martynas_pocius.jpg
+  image_url: /img/committee/thumbnails/martynas_pocius.webp
 
 jess:
   name: Jess Tsang
   title: Event Officer
-  image_url: /img/committee/jessica_tsang.JPG
+  image_url: /img/committee/thumbnails/jessica_tsang.webp
 
 charlie:
   name: Charlie Harrison
   title: Head of Content
-  image_url: /img/committee/charlie_harrison.jpg
+  image_url: /img/committee/thumbnails/charlie_harrison.webp
 
 anthony:
   name: Anthony Nkyi
   title: Head of Content
-  image_url: /img/committee/anthony_nkyi.jpeg
+  image_url: /img/committee/thumbnails/anthony_nkyi.webp
 
 sofiya:
   name: Sofiya Flenova
   title: Content Executive
-  image_url: /img/committee/sofiya_flenova.jpeg
+  image_url: /img/committee/thumbnails/sofiya_flenova.webp
 
 rivan:
   name: Rivan Chanian
   title: Content Executive
-  image_url: /img/committee/rivan_chanian.jpg
+  image_url: /img/committee/thumbnails/rivan_chanian.webp

our-initiatives/journal-club/journal-club-1.md

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 **Date: 9th October 2023**
 
-![Yves-Alexandre de Montjoye](/img/jc/journal-1-image.jpeg)
+![Yves-Alexandre de Montjoye](/img/jc/journal-1-image.webp)
 
 The AI Society Journal Club was thrilled to welcome Yves-Alexandre de Montjoye for an enthralling dialogue, centered around the metamorphosis of data anonymity in today's torrent of data, where every action and movement is captured in real-time. 🌐 The influx of large-scale behavioral data has not only enriched our comprehension of individual and societal behaviors, but also ignited serious privacy apprehensions. 🚀
 

scripts/optimise-images.py

@@ -0,0 +1,55 @@
+"""Generate small static image variants; keep original photographs unchanged.
+
+Run manually with Python and Pillow. Generated images are committed, so builds
+and visitors need neither an image service nor Python.
+"""
+from pathlib import Path
+import re
+
+from PIL import Image, ImageOps
+
+ROOT = Path(__file__).resolve().parents[1]
+STATIC = ROOT / 'static'
+COMMITTEE = STATIC / 'img/committee'
+
+
+def webp(source, destination, max_size, *, lossless=False):
+    destination.parent.mkdir(parents=True, exist_ok=True)
+    with Image.open(source) as original:
+        has_alpha = 'A' in original.getbands() or 'transparency' in original.info
+        image = ImageOps.exif_transpose(original).convert('RGBA' if has_alpha else 'RGB')
+        image.thumbnail(max_size, Image.Resampling.LANCZOS)
+        image.save(destination, 'WEBP', quality=82, method=6, lossless=lossless)
+
+
+def main():
+    names = set(re.findall(r"image: '([^']+)'", (ROOT / 'src/data/committee.js').read_text()))
+    author_paths = re.findall(r'image_url:\s*(/img/committee/\S+)', (ROOT / 'blog/authors.yml').read_text())
+    for path in author_paths:
+        stem = Path(path).stem
+        originals = [p for p in COMMITTEE.iterdir() if p.is_file() and p.stem == stem]
+        if len(originals) != 1:
+            raise ValueError(f'Expected one original author image for {stem}: {originals}')
+        names.add(originals[0].name)
+
+    before = after = 0
+    for name in sorted(names):
+        source = COMMITTEE / name
+        destination = COMMITTEE / 'thumbnails' / f'{source.stem}.webp'
+        webp(source, destination, (216, 270))
+        before += source.stat().st_size
+        after += destination.stat().st_size
+    print(f'{len(names)} portraits: {before:,} -> {after:,} bytes ({100 * (1 - after / before):.1f}% smaller)')
+
+    for source in sorted((STATIC / 'img/blog').iterdir()):
+        if source.suffix.lower() in {'.jpg', '.jpeg', '.png'}:
+            webp(source, source.parent / 'optimised' / f'{source.stem}.webp', (960, 960), lossless=source.suffix.lower() == '.png')
+
+    source = STATIC / 'img/jc/journal-1-image.jpeg'
+    webp(source, source.with_suffix('.webp'), (960, 960))
+    source = STATIC / 'img/design/society-mark.webp'
+    webp(source, source.with_name('society-mark-256.webp'), (256, 256), lossless=True)
+
+
+if __name__ == '__main__':
+    main()

src/components/Society/About.js

@@ -35,7 +35,7 @@ export default function About() {
       <section className="society-section society-committee" aria-labelledby="committee-title">
         <details><summary id="committee-title">Meet the committee</summary><div className="society-committee__groups">
           {committee.categories.map(category => <section key={category.title}><h3>{cleanText(category.title)}</h3><div className="society-member-grid">{category.members.map(member => <article className="society-member" key={member.name}>
-            {member.image && <SiteImage src={`/img/committee/${encodeURIComponent(member.image)}`} alt={member.name} width="88" height="104" loading="lazy" onError={event => { event.currentTarget.style.display = 'none' }} />}
+            {member.image && <SiteImage src={`/img/committee/thumbnails/${encodeURIComponent(member.image.replace(/\.[^.]+$/, '.webp'))}`} alt={member.name} width="72" height="88" loading="lazy" onError={event => { event.currentTarget.style.display = 'none' }} />}
             <div><h4>{member.linkedin ? <Link to={member.linkedin}>{member.name}</Link> : member.name}</h4><p>{cleanText(member.position)}</p>{member.course && <p className="society-member__course">{cleanText(member.course)}{member.year && `, ${cleanText(member.year)}`}</p>}</div>
           </article>)}</div></section>)}
         </div></details>

src/components/Society/Home.js

@@ -5,14 +5,17 @@ import PixelScene from './PixelScene'
 import { links } from './content'
 
 export default function Home() {
-  return <Page title="Home" description="UCL's AI community. Learn, research and build together, with safe and ethical AI at the centre.">
+  return <Page title="Home" description="UCL's AI community. Learn, research and build together, with safe and ethical AI at the centre." preloadEmblem>
     <header className="society-home-hero">
       <PixelScene />
       <Emblem />
       <h1>UCL Artificial<br/>Intelligence Society</h1>
       <p>For everyone curious about AI. Learn, research and build with us.</p>
       <div className="society-actions"><Button href={links.opportunities}>See events & opportunities</Button><Link className="society-text-link" to={links.membership}>Join the society <Arrow external /></Link></div>
     </header>
+    <section className="society-quote society-section" aria-label="Jensen Huang on UCL AI Society">
+      <blockquote><p>“UCL AI Society. AI has a society now.”</p><footer>Jensen Huang <span>Founder and CEO, NVIDIA</span></footer></blockquote>
+    </section>
     <nav className="society-section society-home-directory" aria-labelledby="home-directory-title">
       <h2 id="home-directory-title">Explore the society</h2>
       <div className="society-home-directory__pages">
@@ -25,8 +28,5 @@ export default function Home() {
     <aside className="society-section society-home-news" aria-label="Nexus Labs applications">
       <div><h2>Nexus Labs research applications</h2><p>Join our student research programme. Applications close <time dateTime="2026-10-23">Friday 23 October</time>.</p></div><Link className="society-text-link" to={links.nexus}>Explore Nexus Labs <Arrow /></Link>
     </aside>
-    <section className="society-quote society-section" aria-label="Jensen Huang on UCL AI Society">
-      <blockquote><p>“UCL AI Society. AI has a society now.”</p><footer>Jensen Huang <span>Founder and CEO, NVIDIA</span></footer></blockquote>
-    </section>
   </Page>
 }

src/components/Society/Opportunities.js

@@ -1,16 +1,18 @@
 import React from 'react'
 import Link from '@docusaurus/Link'
+import Head from '@docusaurus/Head'
 import { useColorMode } from '@docusaurus/theme-common'
 import { Page, Hero, Partnerships, Button } from './shared'
 import { links } from './content'
 
 function EventsCalendar() {
   const { colorMode } = useColorMode()
-  return <iframe className="society-events__calendar" title="UCL AI Society and partner events on Luma" src={`${links.calendarEmbed}?lt=${colorMode}`} loading="lazy" />
+  return <iframe className="society-events__calendar" title="UCL AI Society and partner events on Luma" src={`${links.calendarEmbed}?lt=${colorMode}`} loading="eager" />
 }
 
 export default function Opportunities() {
   return <Page title="Events & opportunities" description="Browse UCL AI Society and partner events on our Luma calendar, then explore career support, micro-internships and partner programmes.">
+    <Head><link rel="preconnect" href="https://luma.com" /><link rel="preconnect" href="https://images.lumacdn.com" /></Head>
     <Hero title={<>Events &<br/>opportunities</>}>Find society and partner events, practical experience and career support.</Hero>
     <nav className="society-section society-page-links" aria-label="On this page"><Link to="#events">Events calendar</Link><Link to="#career-opportunities">Career opportunities</Link></nav>
     <section className="society-section society-events" id="events" aria-labelledby="events-calendar-title">

src/components/Society/shared.js

@@ -9,20 +9,22 @@ import { links, pillars } from './content'
 import PixelScene from './PixelScene'
 import displayFont from '@site/static/fonts/EBGaramond-Latin.woff2'
 import textFont from '@site/static/fonts/Geist.woff2'
+import societyMark from '@site/static/img/design/society-mark-256.webp'
 
-export function Page({ title, description, children, canonical }) {
+export function Page({ title, description, children, canonical, preloadEmblem = false }) {
   return <Layout title={title} description={description} wrapperClassName="society-wrapper">
     <Head>
       <link rel="preload" href={displayFont} as="font" type="font/woff2" crossOrigin="anonymous" />
       <link rel="preload" href={textFont} as="font" type="font/woff2" crossOrigin="anonymous" />
+      {preloadEmblem && <link rel="preload" href={societyMark} as="image" />}
       {canonical && <link rel="canonical" href={`https://uclai.co.uk${canonical}`} />}
     </Head>
     <main className="society-page">{children}</main>
   </Layout>
 }
 
 export function SiteImage({ src, ...props }) {
-  return <img src={useBaseUrl(src)} {...props} />
+  return <img src={useBaseUrl(src)} decoding="async" {...props} />
 }
 
 export function Arrow({ external = false }) {

src/css/custom.css

@@ -115,7 +115,7 @@ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px soli
 .society-section--first { padding-top: 12px; }
 .society-section__intro { margin-bottom: 34px; }
 .society-section__intro > p { margin-top: 20px; max-width: 54ch; }
-.society-emblem { display: block; width: 118px; aspect-ratio: 1.08; background: var(--soc-accent); -webkit-mask: url('/img/design/society-mark.webp') center / contain no-repeat; mask: url('/img/design/society-mark.webp') center / contain no-repeat; }
+.society-emblem { display: block; width: 118px; aspect-ratio: 1.08; background: var(--soc-accent); -webkit-mask: url('/img/design/society-mark-256.webp') center / contain no-repeat; mask: url('/img/design/society-mark-256.webp') center / contain no-repeat; }
 .society-home-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 480px; padding: 28px var(--soc-gutter) 36px; }
 .society-home-hero .society-emblem { width: 88px; margin-bottom: 18px; }
 .society-home-hero h1 { font-size: clamp(60px, 6vw, 80px); line-height: 1.02; font-weight: 400; }
@@ -308,7 +308,8 @@ html[data-theme='dark'] .society-career26-logo { filter: invert(1); }
   .society-quote { padding-block: 0 16px; }
   .society-quote blockquote { display: block; padding-block: 24px; text-align: center; }
   .society-quote blockquote p { font-size: 27px; max-width: 26ch; margin-inline: auto; }
-  .society-quote footer { margin-top: 18px; }
+  .society-quote footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin-top: 14px; }
+  .society-quote footer span { margin-top: 0; }
   .society-home-news { grid-template-columns: 1fr; gap: 20px; padding-block: 30px 36px; }
   .society-home-news h2 { font-size: 35px; }
   .society-home-news p { font-size: 14px; }