Picture dimensions in file name

[AntoshJkeee]

Hello

Thank you for developing your product. I started using it to implement my projects.

I have the following question

I am using your Picture component from Minista

<Picture
    className="news__img-two"
    breakpoints={[1920]}
    src="/src/assets/images/check-desktop.jpg"
    artDirectives={[
    	{
          	media: `(min-width: 1920px)`,
          	src: "/src/assets/images/check-desktop.jpg",
          	formats: ['webp'],
          	breakpoints: [1920]
    	},
    	{
    		media: `(min-width: 1440px)`,
    		src: "/src/assets/images/check-laptop.jpg",
    		formats: ['webp'],
    		breakpoints: [1440]
    	},
    	{
    		media: `(min-width: 375px)`,
    		src: "/src/assets/images/check-mobile.jpg",
    		formats: ['webp'],
    		breakpoints: [375]
    	}
    ]}
    alt="check" />

In the build I get names with their sizes, for example check-desktop-1920x595.webp,

Is there any way to not add their sizes to the file name?

I tried to do this through the settings, but it didn't help me

export default defineConfig({
  assets: {
  outDir: 'assets',
  outName: '[name]',
  images: {
  	outDir: 'assets/images',
  	outName: '[name][extname]', `this`
  	...

I also tried to do it inside the Vite configuration, but still not working

vite: {
	resolve: {
	  extensions: ['.js', '.ts', '.tsx', '.jsx'],
	},
	build: {
	  rollupOptions: {
	    output: {
              assetFileNames: `assets/images/[name][ext]`, `this`
              chunkFileNames: `assets/[name].js`,
			},
		},
	},

},

Is there any way to not add the image size to the name?

[qrac]

Thank you for letting us know!
It's true that in that use case, size notation is unnecessary.

Just... In v3, image processing is performed outside of Vite, so it cannot be omitted from the file name.

We will remake v4 #131 and address the issue.

[qrac]

v4 WIP (outName)

• https://github.com/qrac/minista/blob/v4-2025/playground/image/src/pages/index.tsx#L66C9-L90C11

import { Picture } from "minista/client"

export default function () {
  return (
    <>
      <div>
        <Picture
          src="/src/assets/check-desktop.png"
          outName="[name]"
          breakpoints={[1920]}
          artDirectives={[
            {
              media: `(min-width: 1920px)`,
              src: "/src/assets/check-desktop.png",
              formats: ["webp"],
              breakpoints: [1920],
            },
            {
              media: `(min-width: 1440px)`,
              src: "/src/assets/check-laptop.png",
              formats: ["webp"],
              breakpoints: [1440],
            },
            {
              media: `(min-width: 375px)`,
              src: "/src/assets/check-mobile.png",
              formats: ["webp"],
              breakpoints: [375],
            },
          ]}
        />
      </div>
    </>
  )
}

[AntoshJkeee]

When do you plan to release version 4 ?

--

I really like your framework!

[qrac]

@AntoshJkeee
Thank you!
I plan to release v4 this summer. There are still some tweaks, migration documentation, and landing page creation left.