Hi Ahmed,
That's a great question. You really want to upload the highest resolution image you'll want to render on the site on the biggest screen (view port) size.
There is an image resizing service that will serve up the best size for each view port and the defaults can be changes using the SDK in your theme in the theme.settings.json file. See this doc for more information if you want to change the settings: Configure theme settings.
Each module and their layouts can be configured to an appropriate resolution for each view port size, the below is an example of the "content-block" module "Hero" layout taken from the fabrikam.theme.settings.json file:
...
"content-block": {
"properties": {
"full-width": {
"friendlyName": "Hero",
"description": "Image on background with text overlay",
"type": "layout",
"properties": {
"image": {
"friendlyName": "Hero Image Settings",
"description": "Image settings for the hero",
"type": "imageSizes",
"properties": {
"xs": {
"width": 800,
"height": 600
},
"sm": {
"width": 1200,
"height": 900
},
"md": {
"width": 1600,
"height": 900
},
"lg": {
"width": 1600,
"height": 700
},
"xl": {
"width": 1600,
"height": 700
}
}
}
}
},
So for a Hero image, you'll want to upload the highest resolution set above and the images will be scaled down to appropriate sizes at rendering time. In site builder there is a global setting and module settings to change the quality of the image in percentage, this is useful to serve up more compressed images if you need to achieve faster download performance for any of the images. In site builder you can also change the focal point of each image per module so as the size changes different parts of the image can be set as the main focal point to ensure they show up in a smaller resolution of the image.
Hope that helps,
Sam
