# Images
The grey boxes in the designs are image placeholders. You can replace them with static or dynamic images. We've applied appropriate **responsive settings** depending on the use case.
{% hint style="info" %}
If possible, use [Figma](https://figma.com) or any design tool to edit your static images to the initial size and shape of the image placeholder. Then convert your images to [WEBP](https://convertio.co/jpg-webp/) as this will improve performance and SEO. Ideally keep your image size under 250kb if you can.
{% endhint %}
### Examples
This example has a min width of 20 and a **max width of 100**. The image will not stretch any wider than its current form.
This example uses **fixed width** to maintain the round shape. If it wasn't fixed width, the round shape would become a pill shape.
This example uses **keep element proportions as the page is resized**. The image will maintain its shape as the page is expanded and contracted.
## Dynamic image processing
Bubble applies **run mode rendering** to dynamic images. Let's explore how applying different options renders different results.
####
### Run mode rendering: **Rescale**
Bubble fits the dynamic image with its original dimensions into the image element.
### Run mode rendering: **Zoom**
Bubble zooms into the image element to maintain its original shape. Results can be pixelated.
####
### Run mode rendering: Stretch + processed with imgix
Bubble uses the builtin imgix plugin to first crop the image and then we use stretch to make sure the element fills the image element. This will usually give the best results ✅
