Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resize top tier header images to avoid loading unshown parts #400

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

Conversation

Benaiah
Copy link
Contributor

@Benaiah Benaiah commented Aug 18, 2023

Proposed changes

  • Makes top tier header images have a static maximum height
  • Resizes top tier header images in getSources such that we never require more of an image than can possibly be shown

Screenshots

Desktop:

image

Mobile:

image

@vercel
Copy link

vercel bot commented Aug 18, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ldaf ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 18, 2023 11:37pm

@github-actions
Copy link

Coverage after merging benaiah/resize-top-tier-header-images into main will be

96.68%

Coverage Report
FileStmtsBranchesFuncsLinesUncovered Lines
src/lib/components/Accordion
   Accordion.svelte100%100%100%100%
   AccordionItem.svelte95.65%66.67%100%100%21, 35
   index.ts100%100%100%100%
src/lib/components/Alert
   Alert.svelte94.74%57.14%100%100%34, 41, 41
src/lib/components/AnnouncementBanner
   AnnouncementBanner.svelte100%100%100%100%
src/lib/components/Breadcrumbs
   Breadcrumbs.svelte100%100%100%100%
src/lib/components/Button
   Button.svelte96.77%50%100%100%41, 50
   buttonOptions.ts100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/Card
   Card.svelte97.50%0%100%100%7
   index.ts100%100%100%100%
src/lib/components/ConditionalWrapper
   ConditionalWrapper.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/ContactCard
   ContactCard.svelte98.91%93.75%100%100%54
   Section.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/ContentfulRichText
   ContentfulRichText.svelte97.87%0%100%100%25
   context.ts98.04%80%100%100%8
   headings.ts93.18%50%100%95.12%37–39
   predicates.ts91.67%100%75%94.12%68, 76, 79, 82, 85
src/lib/components/ContentfulRichText/nodes
   AssetHyperlink.svelte100%100%100%100%
   Blockquote.svelte100%100%100%100%
   EmbeddedAssetBlock.svelte87.50%0%100%100%12, 16, 20, 29, 36–38
   EmbeddedEntry.svelte100%100%100%100%
   EmbeddedEntryBlock.svelte100%100%100%100%
   EntryHyperlink.svelte100%100%100%100%
   Heading1.svelte100%100%100%100%
   Heading2.svelte100%100%100%100%
   Heading3.svelte100%100%100%100%
   Heading4.svelte100%100%100%100%
   Heading5.svelte100%100%100%100%
   Heading6.svelte100%100%100%100%
   Hr.svelte100%100%100%100%
   Hyperlink.svelte100%100%100%100%
   ListItem.svelte100%100%100%100%
   Node.svelte100%100%100%100%
   OrderedList.svelte100%100%100%100%
   Paragraph.svelte100%100%100%100%
   Table.svelte100%100%100%100%
   TableCell.svelte100%100%100%100%
   TableHeaderCell.svelte100%100%100%100%
   TableRow.svelte100%100%100%100%
   Text.svelte100%100%100%100%
   UnorderedList.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/CopyToClipboard
   CopyToClipboard.svelte97.50%60%100%100%71, 71
   index.ts100%100%100%100%
src/lib/components/Footer
   Footer.svelte95.26%55%100%100%105, 105, 108, 108, 38, 63, 69, 69, 75
src/lib/components/Header
   Header.svelte93.55%50%80%100%46, 46–47, 47, 50
src/lib/components/Header/Logo
   Logo.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/Header/Nav
   Nav.svelte97.06%83.33%100%100%19
   NavItem.svelte100%100%100%100%
   NavLink.svelte100%100%100%100%
   NavMenu.svelte96.32%70.59%100%100%74, 76, 85, 95, 97
   index.ts100%100%100%100%
src/lib/components/Header/Title
   Title.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/Header/__mocks__
   HeaderBackgroundImage.svelte100%100%100%100%
src/lib/components/Icon
   Icon.svelte87.50%20%100%100%19, 19, 24, 24
   index.ts100%100%100%100%
src/lib/components/Image
   BlurhashRenderer.svelte100%100%100%100%
   Image.svelte90.55%67.21%66.67%96.21%109, 143, 159, 161–162, 195, 200, 205–209, 233–237, 237, 257–258, 27, 29, 32, 44, 55, 55–56, 69–71
   index.ts100%100%100%100%
   renderBlurhash.ts100%100%100%100%
src/lib/components/IntersectionObserver
   IntersectionObserver.svelte94.74%75%100%100%36–37, 39
   RootIntersectionObserver.svelte85.19%0%100%92%14–17
   index.ts100%100%100%100%
   key.ts100%100%100%100%
   observe.ts99.03%93.33%100%100%73
src/lib/components/Link
   Link.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/Search
   Search.svelte91.30%33.33%100%96.77%37–39, 44, 44, 48
   index.ts100%100%100%100%
   options.ts100%100%100%100%
src/lib/components/SideNav
   SideNav.svelte100%100%100%100%
   SideNavItem.svelte100%100%100%100%
src/lib/components/VideoCard
   VideoCard.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/components/YoutubeSubscribeLink
   YoutubeSubscribeLink.svelte100%100%100%100%
   index.ts100%100%100%100%
src/lib/constants
   images.ts100%100%100%100%
   support.ts43.75%0%100%50%12–14, 4–9
src/lib/context
   pageMetadataMap.ts100%100%100%100%
src/lib/imageServices
   contentful.ts90.53%65%100%97.26%27, 31, 31–32, 37, 60, 60–61, 70
src/lib/services/contentful
   graphqlClient.ts90.11%66.67%100%91.46%65–72, 74
src/lib/services/youtube
   getYoutubeVideoData.ts100%100%100%100%
   index.ts100%100%100%100%
src/lib/util
   classNames.ts100%100%100%100%
   getErrorMessageFromResponse.ts11.84%100%0%12.68%12–19, 2, 20, 23–29, 3, 30–45, 48–59, 6, 60–69, 7, 70–71, 8–9
   warn.ts100%100%100%100%
src/stories
   AccordionView.svelte100%100%100%100%
   CardView.svelte99.10%50%100%100%75

@github-actions
Copy link

@@ -1,3 +1,4 @@
.top-tier-page-hero-image {
height: 33vh;
height: 14rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is definitely much cleaner, but the images can look overly-cropped at larger screen sizes. If we increase this value based on screen size (with static values, not %, vh, etc.) would that mess up any of the optimizations? I'm thinking maybe we increase it to 16rem on tablet and then 18rem on desktop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll look into this!

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

Successfully merging this pull request may close these issues.

2 participants