Properly size images

[tabshaikh]

Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that just results in wasted bytes and slows down page load time.

Pages:

• [ ] Homepage

Evidence / Screenshot (if possible)

Home Page delay:

Proposal & Constraints

1> The main strategy for serving appropriately-sized images is called "responsive images". With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on. 2> Another strategy is to use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size. Tools like gulp-responsive or responsive-images-generator can help automate the process of converting an image into multiple formats. There are also image CDNs which let you generate multiple versions, either when you upload an image, or request it from your page. Link

Stakeholders

@tabshaikh

[BrittanyBunk]

@tabshaikh as long as people can see the full image in a new tab, I'm ok with it. Too often I see where the image when I click on it pops up larger than my screen - so smaller and time saving is a great way to go! Nice thought.

[mekarpeles]

We may be able to do something similar to #3353

[github-actions[bot]]

Assignees removed automatically after 14 days.