Remove astro-imagetools

astro.config.mjs

@@ -3,10 +3,10 @@ import tailwind from '@astrojs/tailwind'
 import node from '@astrojs/node'
 import paraglide from '@inlang/paraglide-astro'
 import auth from 'auth-astro'
-import { languageTags } from './project.inlang/settings.json'
-import { astroImageTools } from 'astro-imagetools'
 import icon from 'astro-icon'
 
+import { languageTags } from './project.inlang/settings.json'
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://beta.sittingonclouds.net',
@@ -26,8 +26,7 @@ export default defineConfig({
       project: './project.inlang',
       outdir: './src/paraglide' //where your files should be
     }),
-    icon({ iconDir: 'src/img/icons' }),
-    astroImageTools
+    icon({ iconDir: 'src/img/icons' })
   ],
   output: 'server',
   adapter: node({

package.json

@@ -31,11 +31,10 @@
     "@sequelize/mysql": "^7.0.0-alpha.41",
     "astro": "^4.13.1",
     "astro-icon": "^1.1.1",
-    "astro-imagetools": "^0.9.0",
     "auth-astro": "^4.1.2",
     "bcrypt": "^5.1.1",
     "graphql-scalars": "^1.23.0",
-    "sharp": "^0.33.5",
+    "sharp": "0.32.6",
     "tailwindcss": "^3.4.8"
   },
   "devDependencies": {
@@ -55,4 +54,4 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.9.5"
   }
-}
+}

src/components/Header.astro

@@ -1,9 +1,7 @@
 ---
 import { gql } from '@/graphql/__generated__/client'
 import { getApolloClient } from '@/graphql/apolloClient.mjs'
-import { Image } from 'astro:assets'
-// @ts-ignore
-import { Picture } from 'astro-imagetools/components'
+import { Image, Picture } from 'astro:assets'
 import { getSession } from 'auth-astro/server'
 import * as m from '../paraglide/messages.js'
 
@@ -38,14 +36,11 @@ const session = await getSession(Astro.request)
   <div class='relative h-[150px] bg-top bg-no-repeat bg-cover'>
     <div class='absolute size-full'>
       <Picture
-        attributes={{
-          picture: { class: '!size-full' },
-          img: {
-            class: `!size-full !object-cover !object-${bannerPosition?.value || 'top'} !z-0`
-          }
-        }}
+        class={`size-full object-cover object-${bannerPosition?.value || 'top'}`}
         src={`https://cdn.sittingonclouds.net/live/${banner?.value}.png`}
         alt=''
+        width={2560}
+        height={150}
       />
     </div>
     <div class='relative px-20 size-full'>