Upsized Image on getting with request

Support
1

Hi everyone, I have a issue with getting image url. When I getting it with url like this “/api/cockpit/image?token=xxtokenxx&src=path&w=1920&h=1200&o=true”
it returns image with normal size, but when i do it with axios request like this:

 export const assetsAPI = async (path) => {
  let response = await instance.post(`/api/cockpit/image`, {
    src: path,
    m: "thumbnail",
    w: 1920,           
    h: 1200           
})
return response.data; 
}

It returns 3+mb image, but original image wich i uploaded is about 800kb, and i checked it on server and my original image still 800kb but new one in “thumbnail” folder is 3+mb

What`s the problem is?

2

Is it a png file? The inbuilt image library (SimpleImage, based on PHP GD lib) is horrible with resizing (already optimized) png files.

3

Yes it was already optimized png then i chenged it to optimized jpg file, jpg is better but still make it bigger, what i can do?

4

Set the quality to 70% instead of 100%: q: 70.

I didn’t test the ImageOptimizer addon, yet. Maybe that helps.

Besides that, I’m aware of that bug since a few months and I didn’t find a real solution, yet. Setting the qualitiy helps for jpg files, but not really for png files. So, when I have full control, I replace some png icons with svg icons and I upload png images in the needed output format. When I don’t resize them, the original file is delivered. It’s a bad workaround, but the best one, I found for png files so far.

5

Thanks for help, i tested “ImageOptimizer” it still horrible with png but such better with jpg. I realy love “Cockpit” but this problem spoils everything. I will be waiting for solution, but for now can I denide upload png file? So that the end user could not make a mistake.

6

You can restrict allowed file extensions for uploads in /config/config.yaml.

# define allowed file types for uploads (global)
assets.allowed_uploads: png, jpg, jpeg

# define allowed file types for uploads (for user groups)
groups:
    author:
        $admin: false
        $vars:
            assets.allowed_uploads: png, jpg, jpeg

It doesn’t throw an useful notification to the user, why it isn’t allowed to upload a png, but only something like “Something went wrong”. The whole assets management needs some refactoring…

7

Keep in mind that the ImageOptimizer will work only on the uploaded assets. When you are using the image API the image will be generated again using a different library, and as @raffaelj mentioned, it doesn’t handle properly PNGs.
One possible solution is to do a feature request to permit hooking into the image API request and therefore do the thumbnail with a custom addon.

8

Yes, I already realized that ImageOptimizer will not help when working with image APIs, but anyway thanks for the addon, it works great.
And how difficult and how much possible is to make the generation of thumbnail when requesting through the API go through your or some other library with normal support for PNG?
As it seems to me this is a rather serious mistake and it is surprising that it has not yet been fixed