diff --git a/playground/providers.ts b/playground/providers.ts
index 9eaffea6e..51038911f 100644
--- a/playground/providers.ts
+++ b/playground/providers.ts
@@ -664,7 +664,7 @@ export const providers: Provider[] = [
         link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
       },
       {
-        src: 'https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz',
+        src: 'https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=500',
         width: 300,
         height: 300,
         fit: 'cover',
diff --git a/src/runtime/providers/unsplash.ts b/src/runtime/providers/unsplash.ts
index f9236c5a2..191c1a1fc 100644
--- a/src/runtime/providers/unsplash.ts
+++ b/src/runtime/providers/unsplash.ts
@@ -1,6 +1,6 @@
 // https://unsplash.com/documentation#dynamically-resizable-images
 
-import { joinURL, withBase } from 'ufo'
+import { getQuery, withBase, withQuery } from 'ufo'
 import type { ProviderGetImage } from '../../types'
 import { operationsGenerator } from './imgix'
 
@@ -8,8 +8,8 @@ const unsplashCDN = 'https://images.unsplash.com/'
 
 export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = unsplashCDN } = {}) => {
   const operations = operationsGenerator(modifiers)
-  const hasQueryParams = src.includes('?')
+  // withQuery requires query parameters as an object, so I parse the modifiers into an object with getQuery
   return {
-    url: withBase(joinURL(src + (operations ? ((hasQueryParams ? '&' : '?') + operations) : '')), baseURL)
+    url: withQuery(withBase(src, baseURL), getQuery('?' + operations))
   }
 }