mozilla / bedrock

Making mozilla.org awesome, one pebble at a time
https://www.mozilla.org
Mozilla Public License 2.0
1.18k stars 920 forks source link

Optimise bedrock's largest images #12734

Open alexgibson opened 1 year ago

alexgibson commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Hi @alexgibson , should I take it?