feat: add data-nuxt-img and data-nuxt-pic attrs

[kara]

This commit adds data attributes to usages of nuxt/image and nuxt/picture. This will allow us to compare performance results (in aggregate) for apps that use the components against apps that use normal <img> or <picture> tags. Currently, it isn't possible because there isn't a good way to distinguish the two in HTTP Archive.

Doing such a perf comparison allows us to:

• ensure that these components actually improve performance
• catch and fix performance regressions quickly

[netlify]

✅ Deploy Preview for nuxt-image-v1 canceled.

Name	Link
🔨 Latest commit	eff96f3
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-image-v1/deploys/64020a91b60d64000868d726

[pi0]

Thanks for pull request @kara! Since last time we discussed, adding data- attrs to all image components per page will add to the SSR HTML size for analyzes only. Do you think we can either:

• Set a single flag to the HTML when image component is used
• Only render it on client-side

Would be happy to discuss if you think still are merits to always include attrs to all components.

[kara]

@pi0 After the last meeting, I did some digging in HTTPArchive and saw that the average number of images per page is ~20 images. Given that 13 chars * 20 is only ~260 bytes, it seemed like a reasonable trade-off for being friendlier to integration with dev tooling for users.

That said, we can do analysis on DOM properties as well, it's just a bit more work for us in HTTPArchive, so if you prefer client-side only, happy to update the PR.

[kara]

@pi0 Thought about it more and realized that we can always switch to "data-" attributes if/when we decide to integrate with dev tooling, so we might as well do the slimmer, client-side option now. Just updated the PR to make it client-side only.

[pi0]

Thanks. LGTM. We can change strategy to more explicit dom if needed in next iterations.