# Export as Image

The export as image options exports the selected element as an image. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LorN3qlFFVeSEt4rhLA%2F-LorNmUZR2I9vXln9gBm%2Fimage.png?alt=media\&token=cf6acf71-b6df-428b-8a2b-683284e3a302)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LorN3qlFFVeSEt4rhLA%2F-LorNaYDSCGM2Sadz_bs%2Fimage.png?alt=media\&token=b853c7b6-926b-4f23-8c0b-19deee0a2baa)

Any interactions that the selected element may have is not applied because it is a snapshot of the element. 

If the element is a group none of the group items will be exported because the group is exported as an image.  

Both 1x and 2x image sizes are created.

To convert an element into an image select the element and check the Export as Image checkbox: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LoqDkD4bEu8ikw19wYp%2F-LoqGs2mHYH0okjYZos4%2Fimage.png?alt=media\&token=346dd2c4-f64f-49e5-9c43-031a93ae45d9)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LorN3qlFFVeSEt4rhLA%2F-LorNz2wLur_h_oTyMow%2Fimage.png?alt=media\&token=92cc45de-f01b-4c69-9f0b-3712312da93b)

Before: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LoqDkD4bEu8ikw19wYp%2F-LoqG3x5s35X-ayRWFF2%2Fimage.png?alt=media\&token=e8fbe119-2aea-4c0f-8517-d3aeee5e34a6)

After:

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LoqDkD4bEu8ikw19wYp%2F-LoqH8QQIukJ6nb6yRhP%2Fimage.png?alt=media\&token=bfeaedec-99a2-4572-a7f8-a4f3dffd625d)

#### Image export size and quality

Image type and image quality settings can be used to reduce the image file size. 

In the Element Options when an image is selected or an item has Export as Image option checked the new form options appear: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LwOuRyVtacvEUoDu4XJ%2F-LwOvF4ehB7AF_xB0lDU%2Fimage.png?alt=media\&token=02da6c1f-0c0c-4522-b2a2-7cd3c653641c)

You can change the image type between PNG or JPG and use the quality slider. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LwOuRyVtacvEUoDu4XJ%2F-LwOvsczslL5T_0CLor4%2Fimage.png?alt=media\&token=b95c327d-9e25-469d-9087-87b4f5fcd0ef)

{% hint style="info" %}
The quality slider only adjusts JPG image types. 
{% endhint %}

When you change the image type or the quality setting the image size is displayed for a few seconds. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LwOuRyVtacvEUoDu4XJ%2F-LwOvlv-NM3hcS3m2Azy%2Fimage.png?alt=media\&token=a47e76e9-9086-48da-a071-a65e99562845)

#### Example Project

{% embed url="<https://github.com/velara3/xd-examples/tree/master/web-export/examples/export-as-image>" %}