Dynamic image resizing

If possible to resize image size to 64x64 px, dynamic input?

User uploads a logo 640x640 > resize to 64x64

Possibly not an ideal experience for your situation, but I believe the cropper plugin will give you a max H:W option.

2 Likes

It isn’t necessary as imgix will give you a better image reduction if you leave it large. Now if it was 3000*3000 or something, then you would want to resize it.

I’ve recently done testing on this and shrinking an image that small looks awful.

1 Like

Thanks @K.T and @troy.roberge.

Is there any other way to make an icon from a photo? (Or icon-size image from a dynamic photo, for example logo, or profile photo)

Bubble downsizes it natively. I’m not sure why you are asking. Is something not working?

1 Like

Are we on the same page here? :slight_smile:

Pixels, not size in mb, kb…? :smiley:

Yes I understand. But what is the point of downsizing it, if not to simply have smaller size files.

What I’m saying is if you drop an image by 10x, it won’t look at nice vs a larger image downsampled by imgix natively.

What is the actual reason you need a 64x64 vs a 640x640 downsampled?

You can make an image or group element (image as background) clickable.

Depending on how you do it, you can store your own static images as option sets or dynamic images (yours or other users) as data types and just enforce the max or fixed width/height.

Note the dynamic imgix option isn’t always available in a string for all of those combinations, just play around with it and see what works for ya.

If you truly want a custom icon set, then I’d read up on how to create icons outside of bubble and then use bubble’s import feature in settings.

@troy.roberge It’s about this page: Map | Conesult and if the image is larger then 64x64, it will appear to large on the map, it is due to plugin and image responsiveness. Need to have 64x64 or even 32x32, and in this case it is ok to have low quality image, as it will always be used for small purposes, as icon for example.

@K.T Not intersted in icons here, rather need to use real photos, logos, and turn them to be smaller size, for example all to be 64x64 pixels. What do you think, is this possible? To use existing value (image), and turn it into smaller image (64x64)? Thanks!

This is how you make a perfectly dynamic image. You set the HTML BOX (not image element) to whatever dimensions you want, then in the HTML you set the dimensions you want to be the H and/or W of the HTML element. This will allow you to make a perfect square zoomed in with all sorts of imgix features, or a proper aspect ratio square, or forced corner curves (sometimes it doesn’t work well with the image element).

The actual image itself is 1500x1500, downsizes to squares of 55, 65, 95, and 500.

So yes, you can do exactly what you are asking. I think I have given you everything you need. Enjoy

square images


image

perfect dimensional aspect ratio image (just set the height or width, not both)


image
image

1 Like

Oh, this one is the best yet! It was hard to imaging this good, solution would be!

Can you please share the actual html (snipped), to copy and paste, and for us to try out and mark your very message, as the solution!

Haven’t seen you before, but nice to see you here :smiley:

Lol I’m on here daily replying… you can’t really snip it because there is a bunch of searches in the way that don’t copy right, and I won’t be home for a few hours.

I’m sure you can retype in 2 minutes.

Thx

1 Like