fix(image-size-runtime.html): exclude SVG images from Perf: properly …

[williamsdyyz]

…size image warnings

SVG is a vector format. Attributes like width, height & viewbox are not relevant to the size in bytes of the image, so the Perf: properly size image warning is incorrect.

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Use cases and why

• 1. One use case
• 2. Another use case

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	c0b5e78

[thejackshelton]

Hey @williamsdyyz! Is there an example SVG you can give so that I can confirm whether the warning went away after this PR?

I tried reproducing, but was unsuccessful.

[williamsdyyz]

This is one of the files I used

[thejackshelton]

@williamsdyyz sorry to bug you, but how do I reproduce the perf: size too big warning?

I have tried using it as an svg and add the svg as an image with a large, also trying to add large width and height attributes. Even adding massive images from unsplash, no luck there.

And this is with 1.5.4, not with your current PR version. I can't seem to get the warning.

Maybe you have a reproduction I could view?

need repro

[williamsdyyz]

@thejackshelton no problem. I created a new Qwik project with pnpm creater qwik@latest and... couldn't reproduce it.

Did some digging. I had added Tailwind to my original project. Did more digging. Turns out it's one of Tailwind's default styles.

Try this code. The img with height:auto has the problem, the other doesn't.

import { component$ } from "@builder.io/qwik";
import flag from "./flagen-US.svg";

export default component$(() => {
  return (
    <>
      <img src={flag} width={24} height={24} style={{ height: "auto" }} />
      <br />
      <br />
      <img src={flag} width={24} height={24} />
    </>
  );
});

[thejackshelton]

Appreciate the patience here! Tested and everything looks good 👍 .

Merging.