### Source Peer feedback, collected in #167. Quotes (translated): the images on the detail page are stretched far beyond their real size and become blurry (the drawings are 400 px wide but are shown up to 1260 px wide); a maximum width, or image and info in two columns as in the mockup, would look sharper and use a wide screen better. The images are 7 MB in total, so a consideration of sizes per screen width would fit. ### Problem `ElementDiagram.tsx` shows the drawing with `w-full`, so a 400 px drawing is stretched on a wide screen. The images are about 7.4 MB in total (`data/images`), and every page gets the same file. ### What to do - [ ] Put a maximum width on the drawing on the element page, or use two columns (image and information) on a wide screen, as in the mockup in `docs/design`. - [ ] Check **every page that shows a drawing**, not only the element page: the Elements list (table and cards), the element page, the variants list, and the Gymnast page. Write down in the issue which pages show one and the size each one shows. - [ ] Decide whether sizes per screen width are needed (`srcset`/`sizes`, or a smaller file for the list). Only the existing images are available, so measure first what a page transfers and what is shown, and do not make new drawings. - [ ] Give the `<img>` a `width` and `height` so the page does not jump while it loads. ### Done when - [ ] No page shows a drawing larger than its real size, and the transferred size of the images per page is written down in `docs/SUSTAINABILITY.md` (see #157). _Comment made with Claude Code in discussion with Ronja_