docs: lazy load images

[zeroedin]

What I did

1. Add loading="lazy" to all images in doc/*

Closed #1958

Testing Instructions

1. View deploy preview

Notes to Reviewers

AI assisted with this PR. Please review each line changed fairly closely. I gave it a thorough once-over myself, but with over 300 edits, I could have missed something as well.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c65561d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	c65561d
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/686ec0cb4eab75000872535c
😎 Deploy Preview	https://deploy-preview-2470--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Size Change: 0 B

Total Size: 230 kB

ℹ️ View Unchanged

Filename	Size
./elements.js	538 B
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.67 kB
./elements/rh-accordion/rh-accordion-panel.js	1.26 kB
./elements/rh-accordion/rh-accordion.js	3.32 kB
./elements/rh-alert/rh-alert.js	4.98 kB
./elements/rh-announcement/rh-announcement.js	2.12 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.81 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js	1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.4 kB
./elements/rh-audio-player/rh-audio-player.js	13 kB
./elements/rh-audio-player/rh-cue.js	1.95 kB
./elements/rh-audio-player/rh-transcript.js	2.68 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.68 kB
./elements/rh-back-to-top/rh-back-to-top.js	1.96 kB
./elements/rh-badge/rh-badge.js	1.6 kB
./elements/rh-blockquote/rh-blockquote.js	1.37 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.02 kB
./elements/rh-button/rh-button.js	3.29 kB
./elements/rh-card/rh-card.js	3.43 kB
./elements/rh-chip/context.js	165 B
./elements/rh-chip/rh-chip-group.js	1.58 kB
./elements/rh-chip/rh-chip.js	2.06 kB
./elements/rh-code-block/prism.css.js	667 B
./elements/rh-code-block/prism.js	572 B
./elements/rh-code-block/rh-code-block.js	7.66 kB
./elements/rh-cta/rh-cta.js	3.92 kB
./elements/rh-dialog/rh-dialog.js	4.81 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-disclosure/rh-disclosure.js	2.25 kB
./elements/rh-footer/rh-footer-block.js	714 B
./elements/rh-footer/rh-footer-copyright.js	357 B
./elements/rh-footer/rh-footer-links.js	1.19 kB
./elements/rh-footer/rh-footer-social-link.js	1.15 kB
./elements/rh-footer/rh-footer-universal.js	3.96 kB
./elements/rh-footer/rh-footer.js	4.84 kB
./elements/rh-health-index/rh-health-index.js	2.4 kB
./elements/rh-icon/rh-icon.js	2.49 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-jump-links/context.js	179 B
./elements/rh-jump-links/rh-jump-link.js	1.55 kB
./elements/rh-jump-links/rh-jump-links-list.js	1.17 kB
./elements/rh-jump-links/rh-jump-links.js	2.35 kB
./elements/rh-menu/rh-menu.js	1.21 kB
./elements/rh-navigation-primary/context.js	176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js	1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js	3.41 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js	534 B
./elements/rh-navigation-primary/rh-navigation-primary.js	7.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.26 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.57 kB
./elements/rh-site-status/rh-site-status.js	2.38 kB
./elements/rh-skip-link/rh-skip-link.js	1.19 kB
./elements/rh-spinner/rh-spinner.js	1.29 kB
./elements/rh-stat/rh-stat.js	2.08 kB
./elements/rh-subnav/rh-subnav.js	2.42 kB
./elements/rh-surface/rh-surface.js	893 B
./elements/rh-surface/test/elements.js	763 B
./elements/rh-switch/rh-switch.js	2.89 kB
./elements/rh-table/rh-sort-button.js	1.4 kB
./elements/rh-table/rh-table.js	2.89 kB
./elements/rh-tabs/context.js	226 B
./elements/rh-tabs/rh-tab-panel.js	973 B
./elements/rh-tabs/rh-tab.js	2.95 kB
./elements/rh-tabs/rh-tabs.js	3.62 kB
./elements/rh-tag/rh-tag.js	2.66 kB
./elements/rh-tile/rh-tile-group.js	1.78 kB
./elements/rh-tile/rh-tile.js	4.89 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	3.12 kB
./elements/rh-video-embed/rh-video-embed.js	4.6 kB
./lib/color-palettes.js	851 B
./lib/context/headings/consumer.js	593 B
./lib/context/headings/provider.js	1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js	1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.18 kB
./lib/environment.js	194 B
./lib/functions.js	175 B
./lib/I18nController.js	1.37 kB
./lib/ScreenSizeController.js	876 B
./lib/ssr-controller.js	201 B
./lib/themable.js	549 B
./react/rh-accordion/rh-accordion-header.js	199 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	215 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-announcement/rh-announcement.js	189 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js	213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	207 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-chip/rh-chip-group.js	182 B
./react/rh-chip/rh-chip.js	187 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-disclosure/rh-disclosure.js	192 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-icon/rh-icon.js	202 B
./react/rh-jump-links/rh-jump-link.js	196 B
./react/rh-jump-links/rh-jump-links-list.js	189 B
./react/rh-jump-links/rh-jump-links.js	195 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js	205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js	210 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js	199 B
./react/rh-navigation-primary/rh-navigation-primary.js	189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	185 B
./react/rh-table/rh-sort-button.js	213 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	194 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B
./react/rh-video-embed/rh-video-embed.js	227 B
./uxdot/ssr-failure-recoverable.js	581 B
./uxdot/uxdot-best-practice.js	812 B
./uxdot/uxdot-color-scheme-picker.js	1.56 kB
./uxdot/uxdot-copy-button.js	1.24 kB
./uxdot/uxdot-copy-permalink.js	1.1 kB
./uxdot/uxdot-demo.js	1.38 kB
./uxdot/uxdot-example.js	1.14 kB
./uxdot/uxdot-feedback.js	837 B
./uxdot/uxdot-header.js	1.02 kB
./uxdot/uxdot-masthead.js	1.36 kB
./uxdot/uxdot-pattern-ssr-controller-client.js	615 B
./uxdot/uxdot-pattern-ssr-controller-server.js	1.72 kB
./uxdot/uxdot-pattern-ssr-controller.js	213 B
./uxdot/uxdot-pattern.js	2.23 kB
./uxdot/uxdot-repo-status-checklist.js	1.16 kB
./uxdot/uxdot-repo-status-list.js	1.07 kB
./uxdot/uxdot-repo-status-table.js	782 B
./uxdot/uxdot-repo.js	1.17 kB
./uxdot/uxdot-search.js	2.39 kB
./uxdot/uxdot-sidenav.js	2.68 kB
./uxdot/uxdot-spacer-tokens-table.js	2.46 kB
./uxdot/uxdot-toc.js	1.8 kB

_{compressed-size-action}

[adamjohnson]

Nice changes overall. Perhaps these changes will make uxdot the fastest site at Red Hat?

[bennypowers]

we should automate this with https://jampack.divriots.com/ instead of editing source files

[zeroedin]

we should automate this with https://jampack.divriots.com/ instead of editing source files

Hmm, interesting, didn't know this existed. I'll take a look at implementing this instead.

Update: Jampack takes....foreveeeeerrrrrr to run. Maybe overkill. Maybe gets run in CI and not locally, definitely not on incrementals anyway?

Not sure I'm thrilled with <the-fold></the-fold> idea for marking where images automatically get set with appropriate values.

[bennypowers]

I'm not married to that tool specifically. The main point is to not make this an opt-in / developer discipline thing.

It's better to automate than to nag

We could write an 11ty transform, find another processor, etc. Make a golang project of it 😉

I've had experience with jampack. I agree performance kinda sucks though