# Image optimization with Next.js **URL:** \ **Category:** Developing with Prismic\ **Tags:** nextjs\ **Created:** [June 26, 2020, 7:16am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002 "2020-06-26T07:16:44Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![christian](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@christian](https://community.prismic.io/u/christian)\ **Post date:** [June 26, 2020, 7:16am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/1 "2020-06-26T07:16:44Z")
Hey Prismic Community, currently using Prismic the first time in combination with Next.js and curious on what's the best way to deal with images / image optimization (as there is no equivalent to the amazing `gatsby-image`). I don't have SSG pages, everything is SSR so I can't optimize on build time with various plugins. Is the only way to have various image sizes defined inside Prismic? Curious on your opinions. Thank you ---
**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\ **Post date:** [June 26, 2020, 7:33am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/2 "2020-06-26T07:33:47Z")
Check out how to use `sizes`/`srcset` on [CSS tricks](https://css-tricks.com/responsive-images-css/). You can use the original image size (no parameters), and add on width and height attributes as necessary: For example, here's an image URL: > https://images.prismic.io/\?auto=compress,format And you can add parameters: > https://images.prismic.io/\?auto=compress,format&w=1500&h=1000 ---
**Author:** ![christian](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@christian](https://community.prismic.io/u/christian)\ **Post date:** [June 26, 2020, 7:49am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/3 "2020-06-26T07:49:23Z")
Haha oh damn, I was not aware that Prismic is supporting “dynamic” size queries (if you can call it like them). (Or shame on me if this is a native browser api 🙄 😲) Thanks a ton @marcellothearcane ---
**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\ **Post date:** [June 26, 2020, 8:15am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/4 "2020-06-26T08:15:41Z")
[Prismic uses Imgix](https://prismic.io/blog/prismic-image-optimization-imgix) - so everything [here](https://docs.imgix.com/apis/url) should work. The srcset/sizes is a native browser thing, yes - see support here: [https://caniuse.com/#feat=srcset](https://caniuse.com/#feat=srcset) ---
**Author:** ![christian](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@christian](https://community.prismic.io/u/christian)\ **Post date:** [June 26, 2020, 8:22am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/5 "2020-06-26T08:22:11Z")
yeah i am aware of srcset and — of course — I am using it, but was not aware of the image format api. Once read that Prismic has switched to Imgix on their blog but thought that’s more a way of handling stuff in between and less about the output on the client / frontend. thanks again ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 15, 2020, 4:46pm UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/6 "2020-09-15T16:46:15Z")
---
**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\ **Post date:** [December 9, 2021, 5:34pm UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/7 "2021-12-09T17:34:24Z")
---
**Author:** ![ali](https://avatars.discourse-cdn.com/v4/letter/a/8c91f0/32.png) [@ali](https://community.prismic.io/u/ali)\ **Post date:** [March 9, 2022, 10:28am UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/8 "2022-03-09T10:28:00Z")
How about next/image It seem not working. Some one use it ? ---
**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\ **Post date:** [March 9, 2022, 12:40pm UTC](https://community.prismic.io/t/image-optimization-with-next-js/1002/10 "2022-03-09T12:40:23Z")
Hello @ali We have discussed `next/image` in the following thread: > [@Next/image placeholder base64 hash](https://community.prismic.io/t/next-image-placeholder-base64-hash/7552): > > I would like to make use of the placeholder feature of next/image to show a blurred version of the image during it's being loaded, but unless Prismic supports this directly, it's practically not possible. Each version (different aspect ratio) of each photo would require a base64 hash. In an ideal case scenario, when i upload a photo in Prismic and manipulate it for each resolution, it generates this base64 hash and adds it to the api export. see details: [Next/images placeholder docu](https://nextjs.org/docs/api-reference/next/image#placeholder)[NextJS de…](https://image-component.nextjs.gallery/placeholder) Please check the above link and let me know if you have any other questions. Thanks, Priyanka