diff --git a/api/resolvers/image.js b/api/resolvers/image.js
index b0ae805a..a3c4e403 100644
--- a/api/resolvers/image.js
+++ b/api/resolvers/image.js
@@ -4,8 +4,10 @@ import { datePivot } from '../../lib/time'
 export default {
   Query: {
     imageFees: async (parent, { s3Keys }, { models, me }) => {
-      const { fees, unpaid, size24h, sizeNow } = await imageFees(s3Keys, { models, me })
-      return { fees, unpaid, size24h, sizeNow }
+      const imgFees = await imageFees(s3Keys, { models, me })
+      delete imgFees.queries
+      // add defaults so we can be sure these properties always exist in the frontend
+      return Object.assign({ fees: 0, unpaid: 0, feesPerImage: 0, size24h: 0, sizeNow: 0 }, imgFees)
     }
   }
 }
@@ -43,8 +45,9 @@ export async function imageFees (s3Keys, { models, me }) {
 
   if (!me) {
     // anons pay for every new image 100 sats
-    const fees = unpaid * 100
-    return { queries: queries(ANON_USER_ID, unpaidS3Keys, fees), fees, unpaid }
+    const feesPerImage = 100
+    const fees = feesPerImage * unpaid
+    return { queries: queries(ANON_USER_ID, unpaidS3Keys, fees), fees, feesPerImage, unpaid }
   }
 
   // check how much stacker uploaded in last 24 hours
@@ -69,17 +72,18 @@ export async function imageFees (s3Keys, { models, me }) {
   const MB = 1024 * 1024 // factor for bytes -> megabytes
 
   // 10 MB per 24 hours are free. fee is also 0 if there are no incoming images (obviously)
-  let fees
+  let feesPerImage
   if (!sizeNow || size <= 10 * MB) {
-    fees = 0
+    feesPerImage = 0
   } else if (size <= 25 * MB) {
-    fees = 10 * unpaid
+    feesPerImage = 10
   } else if (size <= 50 * MB) {
-    fees = 100 * unpaid
+    feesPerImage = 100
   } else if (size <= 100 * MB) {
-    fees = 1000 * unpaid
+    feesPerImage = 1000
   } else {
-    fees = 10000 * unpaid
+    feesPerImage = 10000
   }
-  return { queries: queries(me.id, unpaidS3Keys, fees), fees, unpaid, size24h, sizeNow }
+  const fees = feesPerImage * unpaid
+  return { queries: queries(me.id, unpaidS3Keys, fees * unpaid), fees, feesPerImage, unpaid, size24h, sizeNow }
 }
diff --git a/api/typeDefs/image.js b/api/typeDefs/image.js
index 172a3dbb..cb897fa3 100644
--- a/api/typeDefs/image.js
+++ b/api/typeDefs/image.js
@@ -3,9 +3,10 @@ import { gql } from 'graphql-tag'
 export default gql`
   type ImageFees {
     fees: Int!
-    unpaid: Int
-    sizeNow: Int
-    size24h: Int
+    unpaid: Int!
+    feesPerImage: Int!
+    sizeNow: Int!
+    size24h: Int!
   }
   extend type Query {
     imageFees(s3Keys: [Int]!): ImageFees!
diff --git a/components/fee-button.js b/components/fee-button.js
index e2a7a6eb..40158b4f 100644
--- a/components/fee-button.js
+++ b/components/fee-button.js
@@ -27,7 +27,7 @@ function Receipt ({ cost, repetition, imageFees, baseFee, parentId, boost }) {
           </tr>}
         {imageFees.fees > 0 &&
           <tr>
-            <td>+ {imageFees.unpaid} x {numWithUnits(imageFees.fees, { abbreviate: false })}</td>
+            <td>+ {imageFees.unpaid} x {numWithUnits(imageFees.feesPerImage, { abbreviate: false })}</td>
             <td align='right' className='font-weight-light'>image fee</td>
           </tr>}
         {boost > 0 &&
@@ -113,7 +113,7 @@ function EditReceipt ({ cost, paidSats, imageFees, boost, parentId }) {
         </tr>
         {imageFees.fees > 0 &&
           <tr>
-            <td>+ {imageFees.unpaid} x {numWithUnits(imageFees.fees, { abbreviate: false })}</td>
+            <td>+ {imageFees.unpaid} x {numWithUnits(imageFees.feesPerImage, { abbreviate: false })}</td>
             <td align='right' className='font-weight-light'>image fee</td>
           </tr>}
         {boost > 0 &&
diff --git a/components/form.js b/components/form.js
index 832b13bc..02ec6e21 100644
--- a/components/form.js
+++ b/components/form.js
@@ -109,6 +109,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
     imageFees(s3Keys: $s3Keys) {
       fees
       unpaid
+      feesPerImage
       size24h
       sizeNow
     }