Web Export
Search…
Images
Images options
The images fields allow you to specify image export options.
These options include defining a subdirectory for the images to be exported to, adding a prefix to the path of the images, embedding images inline and setting the number of colors used when embedding images and including high resolution images in the exports.
Images option fields
By default images are exported to the same directory that the page is exported to.
That is location defined in the Export Folder location.

Images Subdirectory

You can define a subdirectory for images. Type in the path where images will be placed. The directory will be created in the subdirectory of the Export Folder.
For example, if you are exporting your page to, "Documents/site/" then images will be exported to that location as well.
If you specify an image subdirectory then images will be exported to that subdirectory.
For example, if you set the subdirectory to images:
Before:
1
/Documents/site/mypage.html
2
/Documents/site/image1.png
3
/Documents/site/image2.png
4
/Documents/site/image3.png
Copied!
1
/Documents/site/mypage.html
2
/Documents/site/images/image1.png
3
/Documents/site/images/image2.png
4
/Documents/site/images/image3.png
Copied!

Path Prefix

When you use a path prefix value for images all images will have that prefix added to the image source path.
This is useful when you upload a page to a server and the page is not in the root directory of the domain.
For example, if you set the prefix to site:
Before:
1
<img src="myimage.png" />
Copied!
After:
1
<img src="site/myimage.png" />
Copied!

Embedding Images

You can embed images inline in your exported HTML page. Check the embed option to enable this.
Before:
1
<img src="myimage.png" />
Copied!
After:
1
<img src="data:image/png;base64,longstringofcharacters==" />
Copied!
This artboard level option overrides any individual images that have the embed option enabled.
The number of colors used when embedding can be set in the colors input.
This is the amount of colors each embedded image will have. This is useful to reduce the total size of the page and can lead to significant size reduction in some cases.
The default option is not to reduce colors in the image at all. You can reduce the number of colors down to 2 colors per image.
At this time, it takes slightly longer to export when embedding images. It takes longer than that when you use the option to reduce the colors. Depending on how many images you have and the speed of your computer you may or may not notice.

Image 2x

When enabled, this option creates two images when exporting. One for normal resolution screens and one for high resolution screens sometimes called retina display or hifi-DPI (Dots per inch or Points per inch).
Option enabled
Markup created:
1
<img id="Icon" src="Icon.png" srcset="Icon.png 1x, [email protected] 2x">
Copied!
Files created:
1
/Documents/site/mypage.html
2
/Documents/site/images/Icon.png
3
/Documents/site/images/[email protected]
Copied!
Option disabled
Markup created:
1
<img id="Icon" src="Icon.png">
Copied!
Files created:
1
/Documents/site/mypage.html
2
/Documents/site/images/Icon.png
Copied!
Example Project
xd-examples/web-export/examples/embedded-images at master · velara3/xd-examples
GitHub
Embedded Image
Copy link
Contents