Skip to content
This repository was archived by the owner on Feb 15, 2022. It is now read-only.

performance: responsive image loading #555

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

cdaringe
Copy link
Contributor

@cdaringe cdaringe commented Dec 18, 2021

Per #519, the hero image is very large (1.2MB ish). Instead of serving a giant hero image, instead:

  • host various images sizes for the same intent
  • serve a device/viewport aware image to the user
  • scale the 1.25Mb image down to (30,40,50KB) responsive images for users

less data, faster loading, happy users

Uncompressed demo of changing the viewport and watching new responsive images downloaded at (<600px first load, 600px - 799px, and 800px+). DPR of 2x assumed

demo.mov

Modified relative paths:

https://v3-ocaml-org-git-BRANCH_NAME-ocaml.vercel.app/PATH/TO/PAGE

https://v3-ocaml-org-git-fork-cdaringe-fix-caml-img-ocaml.vercel.app

Contributor Pre-flight Checklist

  • Accessibility check - checked pa11y report for modified pages, observing new errors
  • Responsive check - visually inspected vercel preview, using responsive tool to toggle between desktop and mobile view
  • HTML review - use browser DOM/Page inspector to inspect generated HTML within <div id="__next>" element

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant