Images#

Images of most common types can be added to Slides.

#Usage

// Image from remote URL
slide.addImage({ path: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" });

// 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

Reading and encoding images consumes CPU time. The more images a presentation includes and the larger they are, the longer generation takes.

• Eliminate the read/encode time entirely by pre-encoding images
• Pre-encode images into base64 strings and use the data option value instead of path
• This removes the dependency on external image assets and improves performance, since no time is spent reading and encoding the image at generation time

#Base Properties

#Position/Size Props (PositionProps)

#Data/Path Props (DataOrPathProps)

#Image Props (ImageProps)

#Sizing Properties

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

#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.

#Examples

#Image Types Examples

#Data/Path Examples

#Rotate Examples

#Shadow Examples

#Sizing Examples