diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index a38b40e1cafa09..98884c6b2fbd9d 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -25,7 +25,7 @@ type ImageProps = Omit<
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
 > & {
   src: string
-  quality?: string
+  quality?: number | string
   priority?: boolean
   loading?: LoadingValue
   unoptimized?: boolean
@@ -83,7 +83,7 @@ function getObserver(): IntersectionObserver | undefined {
 function computeSrc(
   src: string,
   unoptimized: boolean,
-  quality?: string
+  quality?: number
 ): string {
   if (unoptimized) {
     return src
@@ -94,7 +94,7 @@ function computeSrc(
 type CallLoaderProps = {
   src: string
   width: number
-  quality?: string
+  quality?: number
 }
 
 function callLoader(loaderProps: CallLoaderProps) {
@@ -105,7 +105,7 @@ function callLoader(loaderProps: CallLoaderProps) {
 type SrcSetData = {
   src: string
   widths: number[]
-  quality?: string
+  quality?: number
 }
 
 function generateSrcSet({ src, widths, quality }: SrcSetData): string {
@@ -121,7 +121,7 @@ type PreloadData = {
   widths: number[]
   sizes?: string
   unoptimized?: boolean
-  quality?: string
+  quality?: number
 }
 
 function generatePreload({
@@ -200,13 +200,16 @@ export default function Image({
     }
   }, [thisEl, lazy])
 
+  const parsedQuality =
+    typeof quality === 'undefined' ? undefined : parseInt(quality as string, 10)
+
   // Generate attribute values
-  const imgSrc = computeSrc(src, unoptimized, quality)
+  const imgSrc = computeSrc(src, unoptimized, parsedQuality)
   const imgSrcSet = !unoptimized
     ? generateSrcSet({
         src,
         widths: configSizes,
-        quality,
+        quality: parsedQuality,
       })
     : undefined
 
@@ -301,7 +304,7 @@ export default function Image({
               widths: configSizes,
               unoptimized,
               sizes,
-              quality,
+              quality: parsedQuality,
             })
           : ''}
         <img
@@ -391,7 +394,5 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
     }
   }
 
-  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${
-    quality || '100'
-  }`
+  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 100}`
 }
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
index e2d1934d8ef2e2..430356def669fd 100644
--- a/test/integration/image-component/typescript/pages/valid.tsx
+++ b/test/integration/image-component/typescript/pages/valid.tsx
@@ -22,6 +22,18 @@ const Page = () => {
         src="https://via.placeholder.com/100"
         unsized
       ></Image>
+      <Image
+        id="quality-num"
+        src="https://via.placeholder.com/500"
+        quality={80}
+        unsized
+      ></Image>
+      <Image
+        id="quality-str"
+        src="https://via.placeholder.com/500"
+        quality="80"
+        unsized
+      ></Image>
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )