Automatically size images based on their aspect ratios

[davidpmccormick]

For #10865

Who is this for?

Everyone

What is it doing for them?

Making images take varying amounts of horizontal space based on their aspect ratios

Landscape images can take up a maximum of 12 columns
Square images can take up a maximum of 10 columns
Portrait images can take up a maximum of 8 columns

Note: images will continue to be constrained by their height to ensure that they always fit within the viewport, so they may not get to their maximum possible width depending on the user's browser.

[github-actions]

Size Change: +23 B (0%)

Total Size: 959 kB

Filename	Size	Change
content/webapp/.next/static/chunks/1132.c544ed54ebb139f5.js	0 B	-1.16 kB (removed)	🏆
content/webapp/.next/static/chunks/webpack-6b6a5db87450b2d9.js	0 B	-2.22 kB (removed)	🏆
content/webapp/.next/static/chunks/1132.e522e3482d672ee7.js	1.18 kB	+1.18 kB (new file)	🆕
content/webapp/.next/static/chunks/webpack-973079d7c0bc9b7a.js	2.22 kB	+2.22 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
content/webapp/.next/static/chunks/00a8a139.d1615490c6d9d990.js	59 kB
content/webapp/.next/static/chunks/1002-f40813c0339a6ab0.js	4.22 kB
content/webapp/.next/static/chunks/1064.a48c827a4ae20b32.js	1.07 kB
content/webapp/.next/static/chunks/1135-dec1d2acf9414ba1.js	3.06 kB
content/webapp/.next/static/chunks/122-a648ab5ef2752390.js	2.67 kB
content/webapp/.next/static/chunks/1383.0bcb72af9e19f0cd.js	1.06 kB
content/webapp/.next/static/chunks/1386-d4229c7c4a075f04.js	4.6 kB
content/webapp/.next/static/chunks/1651.f0ef9915c5030e2e.js	2.3 kB
content/webapp/.next/static/chunks/1712.e01ddff65e6c45ea.js	1.2 kB
content/webapp/.next/static/chunks/1747-d99e21d67b840b1a.js	6.12 kB
content/webapp/.next/static/chunks/196.45a4f946e63bc908.js	3.04 kB
content/webapp/.next/static/chunks/2059-2279f792b8ce5e5b.js	2.67 kB
content/webapp/.next/static/chunks/2200.0a772ed3962316bd.js	255 B
content/webapp/.next/static/chunks/2327.289d1399ca7ea04a.js	1.06 kB
content/webapp/.next/static/chunks/2596.919873cf96157ecf.js	1.26 kB
content/webapp/.next/static/chunks/2787-2d2b57459396060e.js	2.24 kB
content/webapp/.next/static/chunks/2889.a2ffc850cd6682c4.js	1.82 kB
content/webapp/.next/static/chunks/3026.5a8f645cb3b837d7.js	1.19 kB
content/webapp/.next/static/chunks/3138.2634e2301f61fbd8.js	1.06 kB
content/webapp/.next/static/chunks/344-4e808891c4865ae3.js	2.84 kB
content/webapp/.next/static/chunks/3615-824214f7bbcc98c2.js	6.87 kB
content/webapp/.next/static/chunks/4407.4acd482864dbc147.js	2.15 kB
content/webapp/.next/static/chunks/4479.aba1b66578441842.js	1.26 kB
content/webapp/.next/static/chunks/4494.f01044ac40d10eb2.js	1.07 kB
content/webapp/.next/static/chunks/4537-2ef42c58094653e6.js	19 kB
content/webapp/.next/static/chunks/466-ec82af66b815c291.js	2.67 kB
content/webapp/.next/static/chunks/4696.81e3adfbf875bf27.js	1.25 kB
content/webapp/.next/static/chunks/4825-0da3332c92191dfb.js	7.78 kB
content/webapp/.next/static/chunks/4962-68bb7d1d02721b2a.js	12.3 kB
content/webapp/.next/static/chunks/5521.59bdcbd94fdfb11a.js	253 B
content/webapp/.next/static/chunks/5623.9fcffe38d074546a.js	1.17 kB
content/webapp/.next/static/chunks/5637-d010b2f2cebc3449.js	20.3 kB
content/webapp/.next/static/chunks/6017-9afe7171c14b0989.js	3.53 kB
content/webapp/.next/static/chunks/6204-2ac2b6682eb1a9ba.js	3.79 kB
content/webapp/.next/static/chunks/6495.fe8778af904de667.js	1.06 kB
content/webapp/.next/static/chunks/6577-effbaab7dae5448b.js	3.51 kB
content/webapp/.next/static/chunks/6677.859ea72e9d7bdd12.js	19.9 kB
content/webapp/.next/static/chunks/7020-2c214e1a012c954e.js	2.21 kB
content/webapp/.next/static/chunks/7028.635139d307d7f52b.js	263 B
content/webapp/.next/static/chunks/7107-690d46121f0c6582.js	26.7 kB
content/webapp/.next/static/chunks/7409.e96879c85b3fbd18.js	1.39 kB
content/webapp/.next/static/chunks/7635-0322c8fb1b511131.js	3.52 kB
content/webapp/.next/static/chunks/7663.12fe4826d83dfb8f.js	1.19 kB
content/webapp/.next/static/chunks/7888-b390293f392e24f5.js	4.66 kB
content/webapp/.next/static/chunks/8540-6a7ad68b578a97d3.js	3.35 kB
content/webapp/.next/static/chunks/8651-cd800b1313c083e8.js	3.12 kB
content/webapp/.next/static/chunks/8850-152982a0bc3131dc.js	2.67 kB
content/webapp/.next/static/chunks/9065-ebbd9fb91fcbd328.js	5.15 kB
content/webapp/.next/static/chunks/9264.497a414cd446d3f2.js	901 B
content/webapp/.next/static/chunks/9519-9c09f45756b9ba86.js	8.01 kB
content/webapp/.next/static/chunks/9574-906d1fcbacfd8c3a.js	5.69 kB
content/webapp/.next/static/chunks/9685.2d1540a9006fbbd6.js	1.06 kB
content/webapp/.next/static/chunks/9704-f98e3d64b767b1d3.js	4.52 kB
content/webapp/.next/static/chunks/framework-f29e48ae95cae5a3.js	45.2 kB
content/webapp/.next/static/chunks/main-978dba4ddde48128.js	30.8 kB
content/webapp/.next/static/chunks/pages/_app-61d2ce955fc45f18.js	108 kB
content/webapp/.next/static/chunks/pages/_error-54ad671c1257cec3.js	335 B
content/webapp/.next/static/chunks/pages/404-9e69cf17ffb062d5.js	261 B
content/webapp/.next/static/chunks/pages/500-889eb9240c0e2c83.js	260 B
content/webapp/.next/static/chunks/pages/articles-7b945fef3e12000f.js	3.26 kB
content/webapp/.next/static/chunks/pages/articles/[articleId]-6c3571fbef4ee4f6.js	4.43 kB
content/webapp/.next/static/chunks/pages/books-285e3d2184d47839.js	3.28 kB
content/webapp/.next/static/chunks/pages/books/[bookId]-2cee62d704d648fd.js	2.21 kB
content/webapp/.next/static/chunks/pages/collections-0a7eda3686bffc14.js	3 kB
content/webapp/.next/static/chunks/pages/concepts/[conceptId]-93fa544530d3419e.js	4.58 kB
content/webapp/.next/static/chunks/pages/cookie-policy-1046d5bd1506b946.js	6.34 kB
content/webapp/.next/static/chunks/pages/covid-welcome-back-993259a10ee26817.js	12.2 kB
content/webapp/.next/static/chunks/pages/event-series/[eventSeriesId]-439e5881c51845a0.js	4.13 kB
content/webapp/.next/static/chunks/pages/events-ba0357d5cf6dd581.js	3.38 kB
content/webapp/.next/static/chunks/pages/events/[eventId]-4f6a60ac3409b6df.js	8.2 kB
content/webapp/.next/static/chunks/pages/events/[eventId]/visual-stories-a82a3b14667fcb2c.js	303 B
content/webapp/.next/static/chunks/pages/exhibitions-be9348c6f9e06d9e.js	3.57 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]-4cdfb003997d9a0b.js	4.05 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]/visual-stories-705f9518c97a9445.js	306 B
content/webapp/.next/static/chunks/pages/guides/[pageId]-cf161b28d290b219.js	2.9 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions-ceb2ac1edc1b65bd.js	3.34 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]-6a398860e37ba39b.js	4.4 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]-e595286e72a1fcdd.js	8.18 kB
content/webapp/.next/static/chunks/pages/index-b8ccee2929fd409b.js	2.45 kB
content/webapp/.next/static/chunks/pages/newsletter-5516f4c20808a1d8.js	2.39 kB
content/webapp/.next/static/chunks/pages/pages/[pageId]-4495bc066ac6e104.js	2.87 kB
content/webapp/.next/static/chunks/pages/projects/[pageId]-beb4da14fc11ac61.js	2.9 kB
content/webapp/.next/static/chunks/pages/search-35bfa35cf0ce5f5a.js	5.38 kB
content/webapp/.next/static/chunks/pages/search/events-5877b74d3cae53b2.js	1.33 kB
content/webapp/.next/static/chunks/pages/search/images-956068e04d0220f0.js	2.3 kB
content/webapp/.next/static/chunks/pages/search/stories-e6399776d3b343ae.js	3.22 kB
content/webapp/.next/static/chunks/pages/search/works-709d146b869c6197.js	4.4 kB
content/webapp/.next/static/chunks/pages/seasons/[seasonId]-cdebdd840d05b0b6.js	2.27 kB
content/webapp/.next/static/chunks/pages/series/[seriesId]-8638fc4f4b98fc2c.js	4.59 kB
content/webapp/.next/static/chunks/pages/slice-simulator-f3004dfd115e915b.js	8.44 kB
content/webapp/.next/static/chunks/pages/stories-9ab55bc933117e6d.js	3.64 kB
content/webapp/.next/static/chunks/pages/stories/[contentType]-9605e52f859c08f7.js	3.31 kB
content/webapp/.next/static/chunks/pages/visit-us-108cc05ba24a2c41.js	3.32 kB
content/webapp/.next/static/chunks/pages/visual-stories/[visualStoryId]-f9064ab82866375b.js	240 B
content/webapp/.next/static/chunks/pages/whats-on-93ae6a8d55dad977.js	203 B
content/webapp/.next/static/chunks/pages/whats-on/[period]-69293969c14f3c75.js	273 B
content/webapp/.next/static/chunks/pages/works/[workId]-fe13779aa5c24bcc.js	26.6 kB
content/webapp/.next/static/chunks/pages/works/[workId]/download-99048e5b193569a5.js	3.1 kB
content/webapp/.next/static/chunks/pages/works/[workId]/images-bcf149ccffc02d15.js	1.08 kB
content/webapp/.next/static/chunks/pages/works/[workId]/items-bbe5411ff9aac00f.js	2.09 kB
content/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js	31 kB
identity/webapp/.next/static/chunks/374.94537fd117195c86.js	2.48 kB
identity/webapp/.next/static/chunks/432.fa29da5acdb8e0b1.js	744 B
identity/webapp/.next/static/chunks/442-29780463d96993ea.js	8.35 kB
identity/webapp/.next/static/chunks/644-a3420a6bbc15048b.js	15.1 kB
identity/webapp/.next/static/chunks/677.a0884a27fb537187.js	19.9 kB
identity/webapp/.next/static/chunks/framework-19f3649580393c10.js	45.2 kB
identity/webapp/.next/static/chunks/main-d973a3979032d64a.js	32.2 kB
identity/webapp/.next/static/chunks/pages/_app-1ef6e5e3a9aa674f.js	99.6 kB
identity/webapp/.next/static/chunks/pages/_error-8e82953fa241027d.js	1.42 kB
identity/webapp/.next/static/chunks/pages/delete-requested-36dbb378188484a0.js	3.22 kB
identity/webapp/.next/static/chunks/pages/error-8117ccec5d62785a.js	1.7 kB
identity/webapp/.next/static/chunks/pages/index-1eae79998a41a8aa.js	11.9 kB
identity/webapp/.next/static/chunks/pages/registration-d07114234ef485c5.js	4.11 kB
identity/webapp/.next/static/chunks/pages/success-babc5c74ab7f7620.js	3.28 kB
identity/webapp/.next/static/chunks/pages/validated-2ef62657092669ba.js	3.36 kB
identity/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js	31 kB
identity/webapp/.next/static/chunks/webpack-713796e2734212eb.js	1.81 kB

_{compressed-size-action}