Bug: Image resizing not working

[rubenheymans]

I use the default image resizing: 375_9999_100, 667_9999_100, 900_9999_100, 1080_9999_100, 1440_9999_100, 1920_9999_100

When i want to populate images

 {
            field: 'images',
            size: {
              width: 375,
              height: 9999,
              quality: 1
            }
          }

or get an image with the storage api

this.flamelinkService.getApp().storage.getURL({
              fileId: image.id,
              size: {
                width: 1440,
                height: 9999,
                quality: 1
              }
            });

I only get the 375 9999 1 image resize, all other paths just return the original image size.

[ribalnasr]

i'm having a similar issue. in my case i have the same sizes as above but the quality is 90 instead of 100. i'm uploading a 1798x900 image, however all the above sizes are returning an 800x400 image although the url shows that the image is in the correct folder. (ex: https://.....appspot.com/o/flamelink%2Fmedia%2F**sized**%2F**667_9999_90**%2F...)

note that the images were uploaded using the flamelink js sdk (1.0.0-alpha.30)

[ribalnasr]

@jperasmus this is a very important issue. image resizing is one of the main reasons why i'm using flamelink, any update on this?

[caweidmann]

Hi @ribalnasr

We'll try and prioritise this in one of our upcoming sprints.

[caweidmann]

Is this an urgent issue for you?

[ribalnasr]

it is, am surprised not many people brought it up.. image resizing is a huge deal when it comes to websites.. i am currently obliged to use the original images uploaded which is significantly slowing down load time and clients are not happy with that.

[dewetvdm]

@ribalnasr I found a work-around You can do the following until the new version is released

Can you please test and let me know if it works?

const imageSizes = await app.settings.getImageSizes();
const imagesWithMaxValues = imageSizes.map((size) => ({
  ...size,
  quality: parseFloat(size.quality),
  maxWidth: size.width,
  maxHeight: size.height,
}));

await app.storage.upload(formData.file, {
  overwriteSizes: true,
  sizes: imagesWithMaxValues,
});

To use the settings module you will need to import it

import flamelink from 'flamelink/app'
import "flamelink/content"  // or import "flamelink/cf/content"  or import "flamelink/rtdb/content"
import "flamelink/storage" // or import "flamelink/cf/storage"  or import "flamelink/rtdb/storage"
import "flamelink/settings" // or import "flamelink/cf/settings"  or import "flamelink/rtdb/settings"

[vkammerer]

I am also facing issues with image resizing, and have been able to debug it a bit more so I'm posting my findings here in the hope it may help the team debug and fix it.

If I set the following resizing settings:

and then upload the following image:

then the "resizing" tasks seem to take place and I end up with the following links:

when I copy the link for the 670px wide image, it is resized properly. Here is the info when I save the image:

so far, so good. But when I save the 671px wide image, it isn't resized at all. Here is the info when I save the image:

Which shows that the image has not been resized. Note any width above 671px will also not resize the image. So it seems that the issue doesn't come from the JS SDK itself, but from the image processing task itself.

@flamelink team: I would really appreciate it if you could give an approximate ETA for solving this issue.

[gitdubz]

Thanks,

This issue should be resolved within the next release, which should be this week.

[gitdubz]

Updated version of the SDK has been released, you can update the flamelink package to 1.0.0-alpha.32 This should resolve the image size creation issue.

[vkammerer]

@gitdubz I just used the Flamelink UI and tried again to upload the image, but I am still getting the same bug as described in details above. Is it because your fix hasn't been deployed yet to the Flamelink UI?

[gitdubz]

Hi @vkammerer I will investigate the issue on the Flamelink UI and let you know here. The Flamelink UI is unrelated to the SDK. I have opened a separate issue for the UI issue.

You can keep an eye out on the release updates for this within the app too.

[gitdubz]

@vkammerer I have investigated the issue for you, and can confirm the resizing is working as expected. The expected behavior for resizing is to optimize for physical file size over dimensions in order to optimize for load times.

Due to the limitation for compression when resizing in the browser, at times resizing results in a less optimal physical size than the original image. (Normally the case if the image has already been optimized using image software)

Example Original Image 1024 x 768, 75kb

Resize 670 x 999 result: 670 x 502, 74.9kb use result

Resize 671 x 999 result: 670 x 502, 75.1kb use original image

I hope this makes sense