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

Optimise bedrock's largest images #12734

Open
alexgibson opened this issue Feb 10, 2023 · 2 comments
Open

Optimise bedrock's largest images #12734

alexgibson opened this issue Feb 10, 2023 · 2 comments
Labels
Bug 🐛 Something's not working the way it should Performance ⚡️ Improve page performance

Comments

@alexgibson
Copy link
Member

Description

Webpack gives a useful list of the largest images (in filesize) contained in the site. Some of these may just be naturally large, but could some of them be made smaller than the 244 KiB threshold?

[1] WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
[1] This can impact web performance.
[1] Assets: 
[1]   img/careers/diversity-video-thumbnail.png (767 KiB)
[1]   img/careers/hero-bg-jobs-high-res.jpg (279 KiB)
[1]   img/careers/portland-large-high-res.jpg (336 KiB)
[1]   img/careers/portland-large.jpg (274 KiB)
[1]   img/careers/whistler.png (257 KiB)
[1]   img/contribute/contribute-hero-composition.jpg (264 KiB)
[1]   img/newsletter/intro-mozsummit-2000.jpg (393 KiB)
[1]   img/newsletter/intro-mozsummit-3000.jpg (702 KiB)
[1]   img/newsletter/intro-mozsummit-4000.jpg (1.18 MiB)
[1]   img/stories/joy-of-color-colorways-high-res.png (307 KiB)
[1]   img/structured-data/browser-android-1.jpg (256 KiB)
[1]   img/structured-data/browser-beta-1.png (1.06 MiB)
[1]   img/structured-data/browser-nightly-3.gif (342 KiB)
[1]   img/structured-data/browser-tv-2.png (278 KiB)
[1]   img/structured-data/browser-tv-3.png (362 KiB)
[1]   fonts/l10n/ur/NotoNastaliqUrdu-Bold.woff (254 KiB)
[1]   fonts/l10n/ur/NotoNastaliqUrdu-Regular.woff (256 KiB)
[1]   img/careers/internships/important-projects-high-res.jpg (357 KiB)
[1]   img/careers/internships/internships-hero-high-res.jpg (437 KiB)
[1]   img/careers/internships/mentor-high-res.jpg (711 KiB)
[1]   img/careers/internships/team-high-res.jpg (442 KiB)
[1]   img/firefox/developer/hero-background.svg (264 KiB)
[1]   img/firefox/developer/hero-clip-ani.gif (340 KiB)
[1]   img/firefox/developer/hero-fonts.gif (367 KiB)
[1]   img/firefox/firstrun/deviceSwoosh.gif (850 KiB)
[1]   img/firefox/pocket/pocket-discover-high-res.png (322 KiB)
[1]   img/firefox/pocket/pocket-hero-high-res.png (665 KiB)
[1]   img/firefox/pocket/pocket-illo-mobile-high-res.png (344 KiB)
[1]   img/firefox/products/hero-high-res.jpg (341 KiB)
[1]   img/firefox/welcome/trackers-shield.svg (1.35 MiB)
[1]   img/mozorg/about/about-hero-illustration.jpg (1.25 MiB)
[1]   img/mozorg/about/about-hero-sm-high-res.jpg (601 KiB)
[1]   img/mozorg/about/about-hero-xs-high-res.jpg (511 KiB)
[1]   img/mozorg/about/about-hero-xxs-high-res.jpg (438 KiB)
[1]   img/pocket/jobs/jobs-chat-high-res.jpg (376 KiB)
[1]   img/pocket/jobs/jobs-planning-high-res.jpg (384 KiB)
[1]   img/pocket/jobs/jobs-team-high-res.jpg (1.36 MiB)
[1]   img/pocket/jobs/jobs-team.jpg (459 KiB)
[1]   img/pocket/new-tab/grass-footer-left.png (399 KiB)
[1]   img/pocket/new-tab/pocket-list.png (372 KiB)
[1]   img/contact/osm/spaces/beijing-large-high-res.jpg (259 KiB)
[1]   img/contact/osm/spaces/berlin-large-high-res.jpg (307 KiB)
[1]   img/contact/osm/spaces/berlin-large.jpg (270 KiB)
[1]   img/contact/osm/spaces/paris-large-high-res.jpg (294 KiB)
[1]   img/firefox/browsers/mobile/about-hero-1100.png (316 KiB)
[1]   img/firefox/browsers/quantum/browser-high-res.jpg (348 KiB)
[1]   img/firefox/features/fingerprinting/fingerprint-high-res.png (332 KiB)
[1]   img/firefox/features/index/features-hero-high-res.png (497 KiB)
[1]   img/firefox/features/translate/translate-high-res.png (308 KiB)
[1]   img/firefox/home/master/respect-high-res.jpg (251 KiB)
[1]   img/firefox/mobile/protocol/hero-high-res-rtl.jpg (327 KiB)
[1]   img/firefox/mobile/protocol/hero-high-res.jpg (329 KiB)
[1]   img/firefox/privacy/book/privacy-book-arrow-on-face.jpg (365 KiB)
[1]   img/firefox/privacy/book/privacy-digital-life-growing.jpg (248 KiB)
[1]   img/firefox/privacy/book/privacy-healthy-internet.jpg (269 KiB)
[1]   img/firefox/privacy/book/privacy-identities.jpg (402 KiB)
[1]   img/firefox/privacy/book/privacy-keys.jpg (256 KiB)
[1]   img/firefox/privacy/book/privacy-social-face.jpg (247 KiB)
[1]   img/firefox/privacy/book/privacy-troll.jpg (562 KiB)
[1]   img/firefox/privacy/passwords/passwords-high-res.png (448 KiB)
[1]   img/firefox/privacy/products/pocket-high-res.png (501 KiB)
[1]   img/firefox/privacy/promise/privacy-hero-1100.png (316 KiB)
[1]   img/firefox/releasenotes/note-images/106_colorways.gif (462 KiB)
[1]   img/firefox/releasenotes/note-images/106_text_recognition.png (344 KiB)
[1]   img/firefox/releasenotes/note-images/ColorThemeMotion_v3_800.gif (1.02 MiB)
[1]   img/firefox/releasenotes/note-images/proton_inspired_tab_design.png (289 KiB)
[1]   img/firefox/whatsnew/whatsnew110-eu/pocket-de.gif (291 KiB)
[1]   img/firefox/whatsnew/whatsnew110-eu/pocket-en.gif (282 KiB)
[1]   img/firefox/whatsnew/whatsnew110-eu/pocket-fr.gif (259 KiB)
[1]   img/foundation/annualreport/2009/Infographic.png (319 KiB)
[1]   img/foundation/annualreport/2014/bg-banner-desktop.jpg (492 KiB)
[1]   img/foundation/annualreport/2015/bg-banner-desktop-high-res.jpg (927 KiB)
[1]   img/foundation/annualreport/2015/bg-banner-desktop.jpg (350 KiB)
[1]   img/foundation/annualreport/2016/som-2016-desktop-high-res.jpg (429 KiB)
[1]   img/foundation/annualreport/2016/som-2016-mobile-high-res.jpg (250 KiB)
[1]   img/foundation/annualreport/2017/som-2017-large-high-res.jpg (496 KiB)
[1]   img/foundation/annualreport/2017/som-2017-small-high-res.jpg (313 KiB)
[1]   img/foundation/annualreport/2018/som-2018-large-high-res.jpg (665 KiB)
[1]   img/foundation/annualreport/2018/som-2018-small-high-res.jpg (434 KiB)
[1]   img/foundation/annualreport/2019/comcast-partner-high-res.jpg (393 KiB)
[1]   img/foundation/annualreport/2019/privacy-apple-high-res.jpg (304 KiB)
[1]   img/foundation/annualreport/2019/racial-justice-commitments-high-res.jpg (261 KiB)
[1]   img/foundation/annualreport/2019/restructuring-high-res.jpg (253 KiB)
[1]   img/foundation/annualreport/2020/ad-transparency.jpg (264 KiB)
[1]   img/foundation/annualreport/2020/doh-canada-rollout.png (586 KiB)
[1]   img/foundation/annualreport/2020/nyt-op-ed.jpg (285 KiB)
[1]   img/foundation/annualreport/2020/why-mozilla-video-placeholder.png (310 KiB)
[1]   img/l10n/en/pocket/pocket-home-articles.png (635 KiB)
[1]   img/foundation/annualreport/2021/split/tcp-1600.jpg (270 KiB)
@alexgibson alexgibson added Bug 🐛 Something's not working the way it should Performance ⚡️ Improve page performance labels Feb 10, 2023
@alexgibson
Copy link
Member Author

I can spot a number of 1Mb+ images in the list (that aren't animated GIFs), plus quite a few that are > 500kb and can likely be optimized

@itachi9604
Copy link
Contributor

Hi @alexgibson , should I take it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug 🐛 Something's not working the way it should Performance ⚡️ Improve page performance
Projects
None yet
Development

No branches or pull requests

2 participants