High Quality Google Photos

I have a website that is leveraging Google’s photos API endpoint. Bubble is compressing these and the image quality is pretty mediocre. Since the image is being returned directly from Google rather than a URL, the imgix trick doesn’t do anything (and indeed just breaks the link). Is there any good way to improve image quality in this situation?

As a separate issue, the responsive engine is also making images smaller than their actual container. It might be because of the complexity of my design, but it would be nice if there were a way to force the size (or maybe this is a bug?).

Bubble wouldn’t be compressing them automatically, the endpoint you are sending the request to returns the full image in max quality?

How is the image being received, just as a standard file or image, or is it just providing a URL and leaving it up to you to fetch the actual file?

For the wrong image size, maybe it’s maintaining aspect ratio so its leaving space on the sides of the image?

After investigating further, it doesn’t seem to be an issue with imgix, as far as I can tell. It is actually a problem with the intrinsic size being returned to the front end.

The full image is returned at max quality. It is a file/image rather than a URL. Here is the API response docs: Place Photos  |  Places API  |  Google for Developers

Run mode rendering is set to zoom so that the image always fits the container (aspect ratio cannot be guaranteed) with the max image width being requested as 2x the max container width on page (to make up for possible loss in quality of different aspect ratios).
Here are some visuals to help demonstrate - I am focusing on the image in the top right as it is particularly bad:
Image Quality on Page

Image Source is Bubble CDN (see address bar)

Full source: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2F4b0d04c955b64afadc22496ed850ad44.cdn.bubble.io%2Ff1697219120825x249950020688718400%2F2022-08-17.jpg?w=512&h=257&auto=compress&dpr=1&fit=max

Here you can see that the intrinsic size is less than the rendered size, meaning that Bubble is providing an image that is smaller than the space we want to fill.

Here you can see that the image itself has a max height of 4000 and width of 3000:

Here you can see that I’m requesting a width twice the width of the container:

I just trimmed the parameters off of the URL and it gives you the full resolution: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2F4b0d04c955b64afadc22496ed850ad44.cdn.bubble.io%2Ff1697219120825x249950020688718400%2F2022-08-17.jpg

I’ll be honest I don’t work with the native storage in Bubble that often, very odd… its adding those parameters without you asking for a lower res version?

Back in my day everything was just https://s3.amazonaws.com/unique id/filename :rofl:

The challenge is that the resolution on the URL is larger than the intrinsic size, so something seems to be happening on the front end to compress it further? Additionally, the file is requested from the API, retrieved, uploaded to the CDN, and retrieved from the CDN on page load. Bubble does all of this automatically, which is required (well the request and retrieval is, at least - the CDN business isn’t) in order to show the image dynamically. I am only providing the file dynamically, with no control over the remainder. Honestly, this might be a bug resulting from the moderate complexity of my layout or use of this API.