Cut image payload 70% with WebP and lazy loading; add copy buttons and anchors - #29
Merged
Conversation
Plots are exported at ~1500x1500, and the page now ships 100+ of them. Re-encoding the notebook's PNG output as quality-85 WebP cuts the image payload from 8.5 MB to 2.6 MB with no visible loss. Filenames keep the MD5-of-base64 scheme so unchanged plots keep their URLs. image_from_cell now also returns the pixel dimensions, which the template uses to reserve layout space.
Every plot image but the first one now loads lazily and decodes off the main thread, so a visit only fetches what the reader scrolls to. The width/height attributes come from the rendered image, which keeps the cards from collapsing and reflowing as images arrive. Also adds alt text, which the images never had.
The whole point of the site is lifting a snippet into your own notebook, which until now meant selecting the pygments markup by hand. One delegated click handler covers all 101 panels and falls back to a "Press ⌘C" hint where the clipboard API is unavailable. Also drops the $.bigfoot() call: the library was never loaded, so it threw on every page load.
The heading already carried a deep link, but it was a Font Awesome icon and Font Awesome is not loaded, so it rendered as nothing. A muted # after the title is visible without competing with the heading.
og:image pointed at a cover.png over plain http, so previews were insecure-mixed-content at best. It now points at the banner over https, with the large-image Twitter card, matching twitter:* tags, a canonical URL, and a description that names the libraries the page actually covers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
The page ships 101 plot images; this cuts their payload 70% (8.54 MB → 2.58 MB) by converting render.py's output to WebP q85, and lazy-loads all but the first image with width/height attributes so cards don't reflow while streaming. Also: copy-to-clipboard buttons on every code panel, working anchor links, and fixed social-preview metadata.
Stacked on #26 (
add-hvplot).Files to review (3):
templates/t_index.html(start here)render.pyimage_from_cellwrites WebP via Pillow (quality 85); MD5 naming kept so unchanged plots keep URLs.web/css/custom.css.copy-btnstyling matched to the dark code panel.Reviewer notes
#), and the template called$.bigfoot()with no bigfoot library loaded, throwing a TypeError on every page load. Console is now clean, verified headless.navigator.clipboardwith a "Press ⌘C" fallback; verified all 101 buttons resolve their code block with zero misses.og:imagewas plain-http and pointed at a nonexistent cover.png; now https banner.png with alt text and twitter:card.