# Calculation rules for Visual Views, and how can I find them？

**URL:** <https://forum.builder.io/t/calculation-rules-for-visual-views-and-how-can-i-find-them/6808>\
**Category:** General\
**Tags:** api, nextjs\
**Created:** [November 22, 2024, 5:48am UTC](https://forum.builder.io/t/calculation-rules-for-visual-views-and-how-can-i-find-them/6808 "2024-11-22T05:48:53Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![radis](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@radis](https://forum.builder.io/u/radis)\
**Post date:** [November 22, 2024, 9:57am UTC](https://forum.builder.io/t/calculation-rules-for-visual-views-and-how-can-i-find-them/6808/2 "2024-11-22T09:57:36Z")

</div>

```auto
import { ImageProps } from 'next/image'
import { Image } from '@builder.io/sdk-react'
import { useMemo } from 'react'
import { parseUrl, stringify } from 'query-string'
import { omitEmptyValues } from '@/utils/index'

export default function BuilderImage(props: ImageProps & Iprops) {
  const { src, quality = 85, format = 'webp', imgWidth, imgHeight, fit, position, alt, ...rest } = props

  const imgUrl = useMemo(() => {
    if (typeof src === 'string' && src?.includes('cdn.builder.io')) {
      const { url } = parseUrl(src)
      const params = { quality, height: imgHeight, width: imgWidth, format, fit, position }
      const queryString = stringify(omitEmptyValues(params))
      return `${url}${queryString ? `?${queryString}` : ''}`
    }
    return src
  }, [src, quality, imgHeight, imgWidth, format, fit, position])

  return <Image {...rest} className="w-100" altText={alt || 'builder-image'} image={imgUrl} />
}

```

If I use the image component from Builder, will it cause an increase in Visual Views? If I use the image component from Next.js, will it not cause this issue?

---

_[View the full topic](https://forum.builder.io/t/calculation-rules-for-visual-views-and-how-can-i-find-them/6808)._