Obtaining low quality "preview" image from /process

Data Sources
1

Hi,

I am doing some updates to some old code that was using this approach which did as expected and for the most part returned a small image to use as a preview

https://services.sentinel-hub.com/ogc/wms/magicID?service=WMS&request=GetMap&layers=TRUE_COLOR_PREVIEW&format=image%2Fpng&transparent=true&version=1.1.1&showlogo=false&name=Sentinel-2%20L1C&width=100&height=100&maxcc=100&time=2025-01-05/2025-01-05%2F2025-01-05/2025-01-05&bbox=12868178.901896872,-3758919.889394531,12845038.753082205,-3773990.5386686213&crs=EPSG:3857

Using the /process it works for a smaller aoi but as the aoi gets larger the image disappears with an ok response and I am left with a black preview, so think I am missing something (thought adjust size sent in based on aoi but has so far been unreliable with a result)

this is what I am using

  const bbox = convertLatLngToNumberArray(bounds);
  const crs = 'http://www.opengis.net/def/crs/EPSG/0/3857';
  const sourceURL = 'https://services.sentinel-hub.com/api/v1/process';
  const sentinel2Type = 'S2L1C'; // Sentinel-2 L1C data type
    
const requestPayload = {
    input: {
        bounds: {
            properties: {
                crs: crs,
            },
            bbox: bbox,
        },
        data: [
            {
                dataFilter: {
                    timeRange: {
                        from: `${date}`, // TODO should not need a range?
                        to: `${date}`,
                    },
                    // mosaickingOrder: 'mostRecent', // mostRecent selected by default
                    previewMode: 'EXTENDED_PREVIEW',
                    maxCloudCoverage: 100,
                },
                type: type,
            },
        ],
    },
    output: {
        width: size,
        height: size,
        responses: [
            {
                identifier: 'default',
                format: {
                    type: 'image/png',
                },
            },
        ],
    },
    evalscript: evalScript, // True color default
};

Any thoughts would be appreciated

2

Hi,

It is difficult to replicate your code due to the number of dependencies within it. However, from the way you described your issue it sounds like you are hitting the image size limitations of Processing API. A Processing API request is restricted by 2500 x 2500 pixels. If this number is exceeded on either the x or y axis, your request will not be successful. Alternatively, you can investigate, Async Processing API, but this API will require you to setup S3 storage.

3

Thanks @william.ray,

I did have a look at the async processing api so may potentially revisit.

I am just unsure why I was able to retrieve an aoi up to a few thousand km without having to do anything fancy with the width and height before, have dealt with the pixel issue before so will work around that.

Many thanks,
David

4

This restriction (2500x2500 px) is in place for many years. It might be that you previously received data at lower resolution.

5

Thanks @gmilcinski,

This is essentially what I am trying to do, my wording may have given the wrong impression of what I am trying to achieve.

I want to show a lower res image so it loads in faster and is smaller in size so when it is selected a full res image loads in.

I am toying with the idea of using the thumbnail and cutting the aoi out of it, assume that will be horrible to view but still worth trying

6

can’t you simply put i.e. “512” for the “size” parameter in your script?

7

Did try initially but was getting the same image response.

Will retry and see what happens, many thanks for the help.

8

Thankyou for the help!

Think when initially trying something was off.

Added some logic based on area and it is working as expected.