Best Practice for image display?

Questions
1

What is best practice for displaying images? We use a lot of images on our webapp, but displaying them causes some little problems.

For example:

  1. images take a long time to load (15 to 20 seconds for a 2.7mb file, 8-10 seconds for a 22kb file on a 30mb fibre optic connection)
  2. when the progress bar has completed and disappeared, there is still a confusing delay before the image appears in the input box (what’s happened to my image??)
  3. when displaying an image from a repeating group in a bigger box, if you then choose another image of a different orientation (portrait / landscape) the original image resizes to the new shape, and THEN the new image appears. Again this makes things feel odd.
  4. When displaying large numbers of images in a repeating group (Ext. vertical scrolling, but I think it happens in all types) the PREVIOUS images show, before changing to the new images. When the user scrolls through there is a lot of “jitter” (images seem to jump about and change at will - though it is in fact just the new images loading on top of old images).

What are you guys and gals doing to make images flow beautifully??

Also, as it’s related to images… Is it possible, when hovering over a repeating group, to make a PopUp appear with the image and related data?

thanks, Jonathan

2

Some of the delay might be the delay in propagating the images over the CDN.

Is it still slow with images that have been uploaded a while ?

3

by popup do you mean specifically a Popup and not a group or other container types? I don’t think popups can appear when an element is hovered (at least the last I tried). You could place a small group into the RG and have it appear on hover, near the photo or overlapping with it. :\

4

Try optimizing your images for smaller file sizes… Can be done in PS if you have it or try this ( http://optimizilla.com/ )…

1 Like
5

The issue here will be that users will be adding images. I had thought about using the Imgix plug in to make a thumbnail copy of everything, keeping the original for large display and pdf printing.

1 Like
6

Yes, it’s always been slower than I expect.

7

Ah, sorry. You can give users a tip on optimizing images before uploading them to the app :slight_smile:

For example, I am working on a new app which allows users to write stories or whatever, I have a tip PopUp when popped users get tips and links to say ( https://www.grammarly.com/ ) as an example.

8

Number 2 and 4 happens to me too.

I thought the CDN would get optimal image sizes/compression automatically in Bubble, so I just upload the higher resolution PNG I have. Is that good?

9

@ON2 I’m expecting my users to take photos with a camera phone and then just upload them, not mess about with “optimising” the images first. It seems to me that these days it’s the job of the website to do that kind of thing. I even get annoyed when I have to make a user icon the right size.

1 Like
10

@csfalcao I’d never heard of the CDN before today… so I’m not sure I know what you are talking about!

11

Bubble uses https://www.imgix.com and its site says it’ll resize, crop etc automatically to optimize image size and traffic.
CDN’s basic feature is to use several servers around the world so when you download a file it chooses automatically the nearest server to a faster experience.

1 Like
12

Sorry for bumping this, but i didn’t want to start a new thread for a basic question:

Is there a way to upload a static image, and display it at a smaller dimension than it actually is, but enable a way to “click to enlarge” it?

EDIT: solved, i just threw a link element over the image and directed that to the static link in a new tab.

3 Likes