diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx
index ed69a9e..8ce566c 100644
--- a/client/src/components/new-recipe/RecipeStep1.tsx
+++ b/client/src/components/new-recipe/RecipeStep1.tsx
@@ -2,12 +2,13 @@
 import { useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import Rating from '@mui/material/Rating'
+
 import { Button } from '../ui/Button'
 import { Field } from '../ui/Field'
 import { Input, Textarea } from '../ui/Input'
 import { Tag } from '../ui/Tag'
-import { ImageUpload } from '../ui/ImageUpload'
 import TagDialog from './TagDialog'
+
 import type { RecipeFormData } from '../../routes/NewRecipePage'
 
 // Sånn at informasjonen blir lagret mellom stegene
@@ -49,7 +50,10 @@ export default function RecipeStep1({
     key: K,
     value: RecipeFormData[K],
   ) => {
-    setData((prev) => ({ ...prev, [key]: value }))
+    setData((prev) => ({
+      ...prev,
+      [key]: value,
+    }))
   }
 
   // Legger til eller fjerner en tag (maks 6 totalt)
@@ -69,6 +73,35 @@ export default function RecipeStep1({
     (tag) => !dietaryTags.includes(tag),
   )
 
+  // Når brukeren velger et bilde
+  const handleImageChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0]
+
+    if (!file) return
+
+    const allowedTypes = [
+      'image/jpeg',
+      'image/png',
+      'image/webp',
+    ]
+
+    if (!allowedTypes.includes(file.type)) {
+      alert('Du kan bare laste opp JPG, PNG eller WebP.')
+      event.target.value = ''
+      return
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      alert('Bildet kan ikke være større enn 5 MB.')
+      event.target.value = ''
+      return
+    }
+
+    update('imageFile', file)
+  }
+
   return (
     <div className="w-full">
       <p className="mb-3 text-sm text-olive">
@@ -78,13 +111,50 @@ export default function RecipeStep1({
       <div className="grid gap-4 md:grid-cols-2">
         {/* VENSTRE SIDE */}
         <div className="space-y-2">
+          {/* BILDEOPPLASTING */}
           <Field label="Bilde">
-            <ImageUpload
-              value={data.imageFile}
-              onChange={(file) => update('imageFile', file)}
-            />
+            <div className="space-y-2">
+              <label className="upload-button flex cursor-pointer flex-col items-center justify-center">
+                <span className="text-sm font-semibold text-primary">
+                  {data.imageFile
+                    ? 'Bytt bilde'
+                    : 'Last opp bilde'}
+                </span>
+
+                <span className="mt-1 text-xs text-olive">
+                  PNG, JPG eller WebP (maks 5 MB)
+                </span>
+
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp"
+                  onChange={handleImageChange}
+                  className="sr-only"
+                />
+              </label>
+
+              {/* Viser valgt bilde */}
+              {data.imageFile && (
+                <div className="relative overflow-hidden rounded-medium border border-peach">
+                  <img
+                    src={URL.createObjectURL(data.imageFile)}
+                    alt="Forhåndsvisning av oppskriftsbilde"
+                    className="h-40 w-full object-cover"
+                  />
+
+                  <button
+                    type="button"
+                    onClick={() => update('imageFile', null)}
+                    className="absolute right-2 top-2 cursor-pointer rounded-full bg-background px-3 py-1 text-xs font-semibold text-primary shadow-sm"
+                  >
+                    Fjern bilde ×
+                  </button>
+                </div>
+              )}
+            </div>
           </Field>
 
+          {/* BESKRIVELSE */}
           <Field
             label="Kort beskrivelse"
             htmlFor="description"
@@ -101,17 +171,20 @@ export default function RecipeStep1({
             />
           </Field>
 
+          {/* VURDERING */}
           <Field label="Vurdering" required>
             <Rating
               name="recipe-rating"
               value={data.rating}
               precision={1}
               sx={{ color: '#9A2A47' }}
-              onChange={(_, value) => update('rating', value)}
+              onChange={(_, value) =>
+                update('rating', value)
+              }
             />
           </Field>
 
-          {/* Lenke til Instagram Reel eller TikTok */}
+          {/* VIDEO */}
           <Field
             label="Instagram Reel / TikTok (valgfritt)"
             htmlFor="video-url"
@@ -130,6 +203,7 @@ export default function RecipeStep1({
 
         {/* HØYRE SIDE */}
         <div className="space-y-3">
+          {/* OPPSKRIFTSTITTEL */}
           <Field
             label="Navn på oppskrift"
             htmlFor="recipe-title"
@@ -145,7 +219,7 @@ export default function RecipeStep1({
             />
           </Field>
 
-          {/* Tid og porsjoner */}
+          {/* TID OG PORSJONER */}
           <div className="grid grid-cols-2 gap-4">
             <Field
               label="Tilberedningstid"
@@ -159,9 +233,13 @@ export default function RecipeStep1({
                   min={1}
                   value={data.prepTime}
                   onChange={(e) =>
-                    update('prepTime', Number(e.target.value))
+                    update(
+                      'prepTime',
+                      Number(e.target.value),
+                    )
                   }
                 />
+
                 <span className="text-sm text-olive">
                   min
                 </span>
@@ -193,7 +271,10 @@ export default function RecipeStep1({
                   className="stepper-button"
                   aria-label="Øk antall porsjoner"
                   onClick={() =>
-                    update('servings', data.servings + 1)
+                    update(
+                      'servings',
+                      data.servings + 1,
+                    )
                   }
                 >
                   +
@@ -202,6 +283,7 @@ export default function RecipeStep1({
             </Field>
           </div>
 
+          {/* KATEGORI */}
           <Field label="Kategori" required>
             <div className="flex flex-wrap gap-2">
               {categories.map((category) => (
@@ -235,7 +317,9 @@ export default function RecipeStep1({
               {/* Åpner dialogen med flere tags */}
               <Tag
                 selected={false}
-                onClick={() => setTagDialogOpen(true)}
+                onClick={() =>
+                  setTagDialogOpen(true)
+                }
               >
                 Annet +
               </Tag>
@@ -256,7 +340,7 @@ export default function RecipeStep1({
               </div>
             )}
 
-            {/* Viser hvor mange tags som er valgt */}
+            {/* Antall valgte tags */}
             <p className="mt-2 text-xs text-olive">
               {data.tags.length} av {MAX_TAGS} tags valgt
             </p>
@@ -266,7 +350,10 @@ export default function RecipeStep1({
 
       {/* KNAPPER */}
       <div className="mt-3 flex items-center justify-end gap-5 border-t border-peach pt-3">
-        <Button variant="ghost" size="small">
+        <Button
+          variant="ghost"
+          size="small"
+        >
           Lagre utkast
         </Button>
 
@@ -283,8 +370,12 @@ export default function RecipeStep1({
       <TagDialog
         open={tagDialogOpen}
         selectedTags={data.tags}
-        onChange={(tags) => update('tags', tags)}
-        onClose={() => setTagDialogOpen(false)}
+        onChange={(tags) =>
+          update('tags', tags)
+        }
+        onClose={() =>
+          setTagDialogOpen(false)
+        }
       />
     </div>
   )
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index 94305f6..a9ddb1b 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -1,9 +1,8 @@
-//For at frontend og backend kobler seg 
+
 import { useState } from 'react'
 import { useMutation } from '@apollo/client/react'
 import { CREATE_RECIPE } from '../graphql/mutations'
 
-//Daten fra steps dukker opp her
 import RecipeStep1 from '../components/new-recipe/RecipeStep1'
 import RecipeStep2 from '../components/new-recipe/RecipeStep2'
 import RecipeStep3 from '../components/new-recipe/RecipeStep3'
@@ -23,7 +22,7 @@ export type Instruction = {
   text: string
 }
 
-// Definerer all informasjonen som lagres i oppskriftsskjemaet
+// All informasjon som lagres i oppskriftsskjemaet
 export type RecipeFormData = {
   // Step 1 - Generell informasjon
   title: string
@@ -47,6 +46,27 @@ export type RecipeFormData = {
   steps: { id: number; text: string; minutes: string }[]
 }
 
+// Deler samlet tekst opp i separate steg
+function parseInstructionText(text: string): string[] {
+  const trimmedText = text.trim()
+
+  if (!trimmedText) {
+    return []
+  }
+
+  // Finner nummererte steg som 1., 2., 3. osv.
+  // Fungerer både med og uten mellomrom etter punktum.
+  // Nummereringen må starte på en ny linje eller etter
+  // et mellomrom.
+  const parts = trimmedText.split(
+    /(?:^|\s)(?=\d+\.\s*[A-Za-zÆØÅæøå])/,
+  )
+
+  return parts
+    .map((step) => step.replace(/^\d+\.\s*/, '').trim())
+    .filter(Boolean)
+}
+
 // Props som styrer hvilket steg brukeren er på
 type NewRecipePageProps = {
   currentStep: number
@@ -57,7 +77,7 @@ export default function NewRecipePage({
   currentStep,
   setCurrentStep,
 }: NewRecipePageProps) {
-  // Lagrer all informasjonen brukeren fyller inn
+  // Lagrer informasjonen brukeren fyller inn
   const [recipeData, setRecipeData] = useState<RecipeFormData>({
     // Step 1
     title: '',
@@ -94,11 +114,23 @@ export default function NewRecipePage({
     ],
   })
 
-  // Kobler komponenten til GraphQL-mutasjonen CREATE_RECIPE
-  const [createRecipe, { loading, error }] = useMutation(CREATE_RECIPE)
+  // Kobler frontend til GraphQL-mutasjonen
+  const [createRecipe, { loading, error }] =
+    useMutation(CREATE_RECIPE)
+
+  // Holder styr på om bildet lastes opp
+  const [uploading, setUploading] = useState(false)
+  const [publishError, setPublishError] = useState<string | null>(
+    null,
+  )
 
-  // Funksjonen som kjøres når brukeren publiserer oppskriften
+  // Funksjonen som kjøres når man publiserer oppskriften
   const handlePublish = async () => {
+    if (loading || uploading) return
+
+    setPublishError(null)
+    setUploading(true)
+
     // Gjør ingrediensene om til formatet backend forventer
     const ingredients = recipeData.ingredients.map(
       (ingredient, index) => ({
@@ -106,25 +138,71 @@ export default function NewRecipePage({
         amount: Number(ingredient.amount),
         unit: ingredient.unit,
         order: index + 1,
-      })
+      }),
     )
 
     // Gjør fremgangsmåten om til formatet backend forventer
-    const steps =
-      recipeData.instructionMode === 'steps'
-        ? recipeData.steps.map((step, index) => ({
-            order: index + 1,
-            instruction: step.text,
-          }))
-        : [
-            {
-              order: 1,
-              instruction: recipeData.instructionText,
-            },
-          ]
+    let steps: { order: number; instruction: string }[] = []
+
+    if (recipeData.instructionMode === 'steps') {
+      // Brukeren har skrevet ett steg i hvert felt
+      steps = recipeData.steps
+        .filter((step) => step.text.trim() !== '')
+        .map((step, index) => ({
+          order: index + 1,
+          instruction: step.text.trim(),
+        }))
+    } else {
+      // Brukeren har skrevet hele fremgangsmåten i ett tekstfelt
+      const parsedSteps = parseInstructionText(
+        recipeData.instructionText,
+      )
+
+      steps = parsedSteps.map((instruction, index) => ({
+        order: index + 1,
+        instruction,
+      }))
+    }
+
+    // Sørger for at oppskriften har minst ett steg
+    if (steps.length === 0) {
+      setPublishError(
+        'Du må legge til minst ett steg i fremgangsmåten.',
+      )
+      setUploading(false)
+      return
+    }
 
     try {
-      // Sender oppskriftsinformasjonen til GraphQL
+      // 1. Laster opp bildet til backend hvis brukeren har valgt et
+      let imageUrl: string | null = null
+
+      if (recipeData.imageFile) {
+        const formData = new FormData()
+        formData.append('image', recipeData.imageFile)
+
+        const uploadResponse = await fetch(
+          'http://localhost:3001/upload',
+          {
+            method: 'POST',
+            body: formData,
+          },
+        )
+
+        if (!uploadResponse.ok) {
+          throw new Error('Kunne ikke laste opp bildet')
+        }
+
+        // Backend returnerer adressen til bildet
+        const uploadResult: { imageUrl: string } =
+          await uploadResponse.json()
+
+        imageUrl = uploadResult.imageUrl
+
+        console.log('Bilde lastet opp:', imageUrl)
+      }
+
+      // 2. Sender oppskriften og bilde-URL-en til GraphQL
       const result = await createRecipe({
         variables: {
           input: {
@@ -133,6 +211,7 @@ export default function NewRecipePage({
             prepTimeMinutes: recipeData.prepTime,
             servings: recipeData.servings,
             category: recipeData.category,
+            imageUrl,
             tagNames: recipeData.tags,
             ingredients,
             steps,
@@ -140,13 +219,20 @@ export default function NewRecipePage({
         },
       })
 
-      // Viser resultatet hvis oppskriften ble lagret
       console.log('Oppskrift publisert:', result.data)
+      console.log('Antall steg lagret:', steps.length)
 
       alert('Oppskriften ble publisert!')
     } catch (err) {
-      // Skriver ut feilen hvis publiseringen mislykkes
       console.error('Kunne ikke publisere oppskrift:', err)
+
+      setPublishError(
+        err instanceof Error
+          ? err.message
+          : 'Noe gikk galt under publiseringen.',
+      )
+    } finally {
+      setUploading(false)
     }
   }
 
@@ -190,17 +276,16 @@ export default function NewRecipePage({
             onPublish={handlePublish}
           />
 
-          {/* Viser en melding mens oppskriften lagres */}
-          {loading && (
+          {(uploading || loading) && (
             <p role="status" className="mt-3 text-olive">
               Publiserer oppskriften...
             </p>
           )}
 
-          {/* Viser en feilmelding hvis publiseringen mislykkes */}
-          {error && (
+          {(publishError || error) && (
             <p role="alert" className="mt-3 text-primary">
-              Kunne ikke publisere oppskriften: {error.message}
+              Kunne ikke publisere oppskriften:{' '}
+              {publishError || error?.message}
             </p>
           )}
         </>
diff --git a/client/src/routes/RecipeDetailPage.tsx b/client/src/routes/RecipeDetailPage.tsx
index e676eaf..2a80b15 100644
--- a/client/src/routes/RecipeDetailPage.tsx
+++ b/client/src/routes/RecipeDetailPage.tsx
@@ -1,28 +1,59 @@
-import { useParams } from 'react-router';
-import { RecipeDetail } from '../components/recipe/RecipeDetail';
-import { useQuery } from '@apollo/client/react';
-import { GET_RECIPE } from '../graphql/recipes';
 
-// Placeholder for en oppskrift. Henter id fra URL-en. som /recipes/5 gir id = 5
+import { useParams } from 'react-router'
+import { RecipeDetail } from '../components/recipe/RecipeDetail'
+import { useQuery } from '@apollo/client/react'
+import { GET_RECIPE } from '../graphql/recipes'
+
+// Gjør en relativ bilde-URL om til en fullstendig adresse
+function getImageUrl(imageUrl: string | null | undefined) {
+  if (!imageUrl) {
+    return null
+  }
+
+  // Hvis bildet allerede har en full URL, bruker vi den
+  if (
+    imageUrl.startsWith('http://') ||
+    imageUrl.startsWith('https://')
+  ) {
+    return imageUrl
+  }
+
+  // Bilder som er lastet opp til backend
+  return `http://localhost:3001/${imageUrl.replace(/^\/+/, '')}`
+}
+
+// Henter oppskriften basert på ID-en i URL-en
 export default function RecipeDetailPage() {
-  const { id } = useParams();
+  const { id } = useParams()
+
   const { data, loading, error } = useQuery(GET_RECIPE, {
     variables: { id: id ?? '' },
     skip: !id,
-  });
+  })
 
-  if(loading) {
+  if (loading) {
     return <p role="status">Laster oppskriften...</p>
   }
 
   if (error) {
-    return <p role="alert">Kunne ikke hente oppskriften. Prøv igjen senere.</p>
+    return (
+      <p role="alert">
+        Kunne ikke hente oppskriften. Prøv igjen senere.
+      </p>
+    )
   }
 
-  const recipe = data?.recipe;
+  const recipe = data?.recipe
+
   if (!recipe) {
     return <p>Fant ikke oppskriften.</p>
   }
 
-  return <RecipeDetail recipe={recipe} />;
+  // Sørger for at bildet hentes fra backend-serveren
+  const recipeWithImage = {
+    ...recipe,
+    imageUrl: getImageUrl(recipe.imageUrl),
+  }
+
+  return <RecipeDetail recipe={recipeWithImage} />
 }
diff --git a/client/src/routes/RecipeListPage.tsx b/client/src/routes/RecipeListPage.tsx
index 336d4b9..b82ea84 100644
--- a/client/src/routes/RecipeListPage.tsx
+++ b/client/src/routes/RecipeListPage.tsx
@@ -1,85 +1,148 @@
-import { useSearchParams } from 'react-router';
-import { RecipeList } from '../components/recipe/RecipeList';
-import { useQuery } from '@apollo/client/react';
-import { GET_RECIPES } from '../graphql/recipes';
-import { useState } from 'react';
 
-const PAGE_SIZE = 12;
+import { useState } from 'react'
+import { useSearchParams } from 'react-router'
+import { useQuery } from '@apollo/client/react'
 
-// Listen over alle oppskrifter eller søksresultatet
-// Selve søkefeltet ligger i headeren
+import { RecipeList } from '../components/recipe/RecipeList'
+import { GET_RECIPES } from '../graphql/recipes'
+
+const PAGE_SIZE = 12
+
+// Gjør relative bildeadresser om til fullstendige URL-er
+function getImageUrl(imageUrl: string | null | undefined) {
+  if (!imageUrl) {
+    return null
+  }
+
+  // Hvis bildet allerede har en fullstendig URL
+  if (
+    imageUrl.startsWith('http://') ||
+    imageUrl.startsWith('https://')
+  ) {
+    return imageUrl
+  }
+
+  // Bilder som er lastet opp til backend
+  return `http://localhost:3001/${imageUrl.replace(/^\/+/, '')}`
+}
+
+// Listen over alle oppskrifter eller søkeresultater
 export default function RecipeListPage() {
-  const [searchParams] = useSearchParams();
-  const query = searchParams.get('q') ?? '';
+  const [searchParams] = useSearchParams()
+  const query = searchParams.get('q') ?? ''
 
   const { data, loading, error, fetchMore } = useQuery(GET_RECIPES, {
-    variables: { search: query || undefined, page: 1, pageSize: PAGE_SIZE },
-  });
+    variables: {
+      search: query || undefined,
+      page: 1,
+      pageSize: PAGE_SIZE,
+    },
+  })
+
+  const [hasMore, setHasMore] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
 
-  const [hasMore, setHasMore] = useState(true);
+  // Nullstiller paginering når man søker på noe nytt
+  const [prevQuery, setPrevQuery] = useState(query)
 
-  // nullstiller når man søker på noe nytt
-  const [prevQuery, setPrevQuery] = useState(query);
   if (query !== prevQuery) {
-    setPrevQuery(query);
-    setHasMore(true);
+    setPrevQuery(query)
+    setHasMore(true)
   }
 
   if (loading && !data) {
-    return <p role="status">Laster oppskrifter...</p>;
+    return <p role="status">Laster oppskrifter...</p>
   }
+
   if (error) {
     return (
-      <p role="alert">Kunne ikke hente oppskriftene. Prøv igjen senere.</p>
-    );
+      <p role="alert">
+        Kunne ikke hente oppskriftene. Prøv igjen senere.
+      </p>
+    )
   }
 
-  const recipes = data?.recipes ?? [];
+  // Henter oppskriftene fra GraphQL
+  const recipes = data?.recipes ?? []
+
+  // Sørger for at bildene bruker riktig backend-adresse
+  const recipesWithImages = recipes.map((recipe) => ({
+    ...recipe,
+    imageUrl: getImageUrl(recipe.imageUrl),
+  }))
 
+  // Henter flere oppskrifter når brukeren trykker "Last flere"
   async function handleLoadMore() {
-    // Regner ut hvilke side som er neste.
-    const nextPage = Math.floor(recipes.length / PAGE_SIZE) + 1;
-
-    // Henter neste side
-    const result = await fetchMore({
-      variables: { page: nextPage },
-      // Legger de nye oppskriftene etter de gamle
-      updateQuery: (previous, { fetchMoreResult }) => ({
-        recipes: [...previous.recipes, ...fetchMoreResult.recipes],
-      }),
-    });
-
-    // Dersom det er færre enn 12 er det ikke flere oppskrifter igjen.
-    if ((result.data?.recipes.length ?? 0) < PAGE_SIZE) {
-      setHasMore(false);
+    if (loadingMore || !hasMore) return
+
+    setLoadingMore(true)
+
+    try {
+      const nextPage = Math.floor(recipes.length / PAGE_SIZE) + 1
+
+      const result = await fetchMore({
+        variables: {
+          search: query || undefined,
+          page: nextPage,
+          pageSize: PAGE_SIZE,
+        },
+
+        // Legger de nye oppskriftene etter de gamle
+        updateQuery: (previous, { fetchMoreResult }) => ({
+          recipes: [
+            ...previous.recipes,
+            ...fetchMoreResult.recipes,
+          ],
+        }),
+      })
+
+      // Hvis færre enn 12 oppskrifter ble hentet,
+      // finnes det ikke flere sider
+      if ((result.data?.recipes.length ?? 0) < PAGE_SIZE) {
+        setHasMore(false)
+      }
+    } catch (err) {
+      console.error('Kunne ikke hente flere oppskrifter:', err)
+    } finally {
+      setLoadingMore(false)
     }
   }
 
   return (
     <>
-      <h1 className="font-heading text-4xl md:text-5xl">Oppskrifter</h1>
+      <h1 className="font-heading text-4xl md:text-5xl">
+        Oppskrifter
+      </h1>
 
-      {query && recipes.length > 0 && <p className="mt-4">Alt med '{query}'</p>}
+      {query && recipes.length > 0 && (
+        <p className="mt-4">
+          Alt med «{query}»
+        </p>
+      )}
 
-      {/* melding hvis søket ikke finner noe */}
+      {/* Melding hvis søket ikke finner noe */}
       {query && recipes.length === 0 && (
-        <p className="mt-4">Fant ingen oppskrifter med '{query}'.</p>
+        <p className="mt-4">
+          Fant ingen oppskrifter med «{query}».
+        </p>
       )}
-      <RecipeList recipes={recipes} />
 
-      {/*Knappen vises bare hvis det kan finnes flere oppskrifter og første side er full*/}
+      {/* Viser oppskriftene med riktige bildeadresser */}
+      <RecipeList recipes={recipesWithImages} />
+
+      {/* Last flere-knappen */}
       {hasMore && recipes.length >= PAGE_SIZE && (
         <div className="mt-8 flex justify-center">
           <button
             type="button"
             onClick={handleLoadMore}
-            disabled={loading}
-            className="rounded-full bg-primary text-background px-6 py-3 hover:opacity-90 disabled:opacity-50"
+            disabled={loadingMore}
+            className="rounded-full bg-primary px-6 py-3 text-background hover:opacity-90 disabled:opacity-50"
           >
-            {loading ? 'Laster...' : 'Last flere'}
+            {loadingMore ? 'Laster...' : 'Last flere'}
           </button>
         </div>
       )}
     </>
-  );
+  )
 }
diff --git a/server/uploads/b81e7879-bf28-4b29-b0cd-480874d24c44.png b/server/uploads/b81e7879-bf28-4b29-b0cd-480874d24c44.png
new file mode 100644
index 0000000..e6a1747
Binary files /dev/null and b/server/uploads/b81e7879-bf28-4b29-b0cd-480874d24c44.png differ
diff --git a/server/uploads/eb01205e-c97f-428b-9f8c-1dc81e4c660e.png b/server/uploads/eb01205e-c97f-428b-9f8c-1dc81e4c660e.png
new file mode 100644
index 0000000..4a9feda
Binary files /dev/null and b/server/uploads/eb01205e-c97f-428b-9f8c-1dc81e4c660e.png differ