Post

Look, you might think frontend is fine and going well, but today I found a 1.1MB PNG (that could have been a 40K AVIF) in the critical path of an important app. Embedded in an SVG as a `data:` URL. Shipped as a React component.

6 reposts141 likes

I had to put an encoded SVG into a background-url instead of as a separate SVG payload under the footer and just use a <use> on a clip-mask, and I felt so bad about it. This at least makes me feel better.

This is likely tooling output. Unfortunately many tools do this because browsers have crippled SCG external references. Eg Excalidraw is forced to embed their entire web font as a data URI in their SVGs and I can’t fault them given the current state of the web platform.

It was tooling output, but: - This was *just* a single image - Choice of (badly compressed) PNG is not a platform issue - The generated SVG itself is a horror show (scale factors all over the shop; <use>, rather than <image>, etc.)