Skip to main content


Images of almost any type can be added to Slides.


// Image from remote URL
slide.addImage({ path: "" });

// Image by local URL
slide.addImage({ path: "images/chart_world_peace_near.png" });

// Image by data (pre-encoded base64)
slide.addImage({ data: "image/png;base64,iVtDafDrBF[...]=" });

Usage Notes

Either provide a URL location or base64 data to create an image.

  • path - URL: relative or full
  • data - base64: string representing an encoded image

Supported Formats and Notes

  • Standard image types: png, jpg, gif, et al.
  • Animated gifs: only shown animated on Microsoft 365/Office365 and the newest desktop versions, older versions will animate them in presentation mode only
  • SVG images: supported in the newest version of desktop PowerPoint or Microsoft 365/Office365

Performance Considerations

It takes CPU time to read and encode images! The more images you include and the larger they are, the more time will be consumed.

  • The time needed to read/encode images can be completely eliminated by pre-encoding any images
  • Pre-encode images into a base64 strings and use the data option value instead
  • This will both reduce dependencies (who needs another image asset to keep track of?) and provide a performance boost (no time will need to be consumed reading and encoding the image)

Base Properties

Position/Size Props (PositionProps)

OptionTypeDefaultDescriptionPossible Values
xnumber1.0hor location (inches)0-n
xstringhor location (percent)'n%'. (Ex: {x:'50%'} middle of the Slide)
ynumber1.0ver location (inches)0-n
ystringver location (percent)'n%'. (Ex: {y:'50%'} middle of the Slide)
wnumber1.0width (inches)0-n
wstringwidth (percent)'n%'. (Ex: {w:'50%'} 50% the Slide width)
hnumber1.0height (inches)0-n
hstringheight (percent)'n%'. (Ex: {h:'50%'} 50% the Slide height)

Data/Path Props (DataOrPathProps)

OptionTypeDefaultDescriptionPossible Values
datastringimage data (base64)base64-encoded image string. (either data or path is required)
pathstringimage pathSame as used in an (img src="") tag. (either data or path is required)

Image Props (ImageProps)

OptionTypeDefaultDescriptionPossible Values
altTextstringalt text valuedescription of what image shows
flipHbooleanfalseFlip horizontally?true, false
flipVbooleanfalseFlip vertical?true, false
hyperlinkHyperlinkPropsadd hyperlinkobject with url or slide
placeholderstringimage placeholderPlaceholder location: title, body
rotateinteger0rotation (degrees)Rotation degress: 0-359
roundingbooleanfalseimage roundingShapes an image into a circle
sizingobjecttransforms imageSee Image Sizing
transparencynumber0changes opacity of an image0-100 where 0 means image is completely visible

Sizing Properties

The sizing option provides cropping and scaling an image to a specified area. The property expects an object with the following structure:

PropertyTypeUnitDefaultDescriptionPossible Values
typestringsizing algorithm'crop', 'contain' or 'cover'
wnumberinchesw of the imagearea width0-n
hnumberinchesh of the imagearea height0-n
xnumberinches0area horizontal position related to the image0-n (effective for crop only)
ynumberinches0area vertical position related to the image0-n (effective for crop only)

Sizing Types

  • contain works as CSS property background-size — shrinks the image (ratio preserved) to the area given by w and h so that the image is completely visible. If the area's ratio differs from the image ratio, an empty space will surround the image.
  • cover works as CSS property background-size — shrinks the image (ratio preserved) to the area given by w and h so that the area is completely filled. If the area's ratio differs from the image ratio, the image is centered to the area and cropped.
  • crop cuts off a part specified by image-related coordinates x, y and size w, h.

Sizing Notes

  • If you specify an area size larger than the image for the contain and cover type, then the image will be stretched, not shrunken.
  • In case of the crop option, if the specified area reaches out of the image, then the covered empty space will be a part of the image.
  • When the sizing property is used, its w and h values represent the effective image size. For example, in the following snippet, width and height of the image will both equal to 2 inches and its top-left corner will be located at [1 inch, 1 inch]:

Shadow Properties (ShadowProps)

The ShadowProps property adds a shadow to an image.


Image Types Examples

Image Types Examples

Data/Path Examples

Image Paths Examples

Rotate Examples

Image Rotate Examples

Shadow Examples

Image Shadow Examples

Sizing Examples

Image Sizing Examples

All Image Samples

All sample javascript code: demos/modules/demo_image.mjs