# Image size

> On an image Smootify fills: the Shopify CDN resizes it. In a gallery, on the Slider for its slides, on the thumbnail or lightbox part itself

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/attributes/image-size  
Updated: 2026-10-13

## At a glance

Example: a Shopify image of 2000 × 1500 pixels.

| Attribute | What the page downloads | Needs |
|---|---|---|
| `max-width="800"` | the image at most 800 pixels wide: 800 × 600 | nothing else |
| `max-height="800"` | the image at most 800 pixels high: 1067 × 800 | nothing else |
| `crop="center"` | a larger image cropped to both sizes, starting from that point: 800 × 800, cut from the center | `max-width` and `max-height` |
| `pad-color="ffffff"` | a smaller image with the space around it filled with that color: 800 × 600 inside 800 × 800 of white | `max-width` and `max-height` |

More in [the guide](https://www.smootify.io/docs/build/product-gallery).

## Where it can go

- **Inside any of:** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product), [`smootify-variant`](https://www.smootify.io/docs/reference/elements/smootify-variant), [`cart-item`](https://www.smootify.io/docs/reference/elements/cart-item), [`bundle-item`](https://www.smootify.io/docs/reference/elements/bundle-item), [`box-item`](https://www.smootify.io/docs/reference/elements/box-item), [`smootify-metaobject`](https://www.smootify.io/docs/reference/elements/smootify-metaobject).
- On image.
- Only on an element that also has `[product="specific-image"]`, `[variant="image"]`, `[option-variant="image"]`, `[component="image"]`, `[cart-item="image"]`, `[cart-item="product-image"]`, `[bundle-item="image"]`, `[reference="image"]`, `[metafield]`, `[variant-metafield]`, `[option-metafield]`, `[metaobject]`, `[gallery="slider"]`, `[gallery="thumbnails"]`, `[gallery="lightboxes"]`, `[box-item="image"]`.

## Values

| Attribute and value | What it is | Notes |
|---|---|---|
| `max-width="800"` | Max width | — |
| `max-height="800"` | Max height | — |
| `crop="center"` | Crop | — |
| `pad-color="ffffff"` | Padding color | — |