Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Export Artboard Dialog

Images

Images options

PreviousScript Page optionsNextExport Folder

Last updated 3 years ago

Was this helpful?

The images fields allow you to specify image export options.

These options include 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.

Images Subdirectory

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:

/Documents/site/mypage.html
/Documents/site/image1.png
/Documents/site/image2.png
/Documents/site/image3.png
/Documents/site/mypage.html
/Documents/site/images/image1.png
/Documents/site/images/image2.png
/Documents/site/images/image3.png

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:

<img src="myimage.png" />

After:

<img src="site/myimage.png" />

Embedding Images

You can embed images inline in your exported HTML page. Check the embed option to enable this.

Before:

<img src="myimage.png" />

After:

<img src="data:image/png;base64,longstringofcharacters==" />

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

Option enabled

Markup created:

<img id="Icon" src="Icon.png" srcset="Icon.png 1x, Icon@2x.png 2x">

Files created:

/Documents/site/mypage.html
/Documents/site/images/Icon.png
/Documents/site/images/Icon@2x.png

Option disabled

Markup created:

<img id="Icon" src="Icon.png">

Files created:

/Documents/site/mypage.html
/Documents/site/images/Icon.png

Example Project

That is location defined in the location.

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 .

When enabled, this option creates two images when exporting. One for normal resolution screens and one for high resolution screens sometimes called or hifi- (Dots per inch or Points per inch).

Export Folder
Export Folder
retina display
DPI
defining a subdirectory
xd-examples/web-export/examples/embedded-images at master · velara3/xd-examplesGitHub
Embedded Image
Logo