Forum Academy Marketplace Showcase Pricing Features

ImagePro Image Tools - New Plugin from Gimazu

Showcase
#103

Hi,

First of all, for anyone reading this post, ImagePro is a great plugin! Everything works like a charm.

I have read it but I still have not find a way to resize first without pressing a button. UX wise I cannot have extra buttons to be pressed by users. So any hint how to resize before cropping by user without pressing a let me know.

Since resizing does not seem to work I have done lots of tests with various images. I have two exact same images done with ImagePro and the other with simpleimageresizer.com. The difference is noticable. ImagePro output after cropping gives an image of less quality with 147kb filesize. While the simpleimageresizer.com file size is around 25% smaller with about 112kb. The latter with higher quality settings which you can see on the picture.

See image from ImagePro

640_ImageProCropper_75Quality
640_ImageProCropper_75Quality640×640 147 KB

See Image from Simpleimageresizer.com

Image_640x_1_optimized_1_cropped_80Quality_simpelimageresizer.com
Image_640x_1_optimized_1_cropped_80Quality_simpelimageresizer.com640×640 112 KB

Is there something extra I need to do with ImagePro to get the same quality and same smaller filesize? Our app needs lots and lots of photo’s so this is really important to us.

#104

You can’t compare a web service that uses server processing in terms of time and memory with ImagePro that processes images client side. This is its strong point: no use of resources on the server, the work is done by the user’s browser, the image is sent to server in its final version.
If you want to use Bubble this concept is of fundamental importance
It is no coincidence that every web service that exposes APIs for manipulating images that can be integrated into a web app adopts a pay-per-use model

#105

Ok good to know! Thanks for your swift response.

#106

Bubble is based on js and js is event driven. The resizing of an image starts from a user action who must first of all choose the file to be processed.
Subsequently Resizing without user action is possible using the Reducer element. Obviously in this case you can only set max*max dimension: Reducer will reduce the image within those limits.
In any case, since ImagePro performs client-side processing, an event is then needed to trigger the upload workflow on the bubble servers.
The cropping of an image instead must necessarily be done through an action of the user who must select the area of interest of the image. There are web services that perform automatic cropping according to the most relevant areas of the photo but the results are not always optimal. It depends on the type of photo and the objects it contains.
However ImagePro is the most efficient and least expensive way to process images: you just need to adapt the programming logic and interface to your needs using the right compromises

#107

Update, I have found out that doing the proces via mobile iPhone 12 mini returns a file size twice of that of doing it via a PC. So not only is the PC filesize half of that of mobile but also the image quality is much better. Is there something I can do/try to improve this proces when uploading and cropping via mobile?

#108

file size is influenced by many factors: first of all by how the user does the crop (zoom level, etc).
It’s not something you can control. You can only act on the dimensions of the image (width and height): for example using a Reducer element so that the image does not exceed some predefined reasonable dimensions and defining the dimensions of the crop.
Working predominantly on a precise file size is a non-functional approach not only in Bubble but in any app development

#109

Thanks but the points you set out are not the issue here.

I have one setup and did exactly the same with the same image.

  1. uploaded image 1 via my PC
  2. uploaded same image 1 via my mobile via my bubble app wrapped in BDK.

File size of the same image with the same proces on my PC gives a filesize that is half of the one when using mobile. Quality is also better on my PC.

Is there something I can change/test such that the mobile result is more similar to the results on my PC?

#110

I can only assume it is related to viewport size which is obviously different for desktop and mobile.
Not knowing in detail the development of the app I can not give you other information.