Skip to main content

Images

Images of almost any type can be added to Slides.

Usage#

// Image from remote URLslide.addImage({ path: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" });
// Image by local URLslide.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

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]:

Examples#

Image Types#

Image Types

From URL#

Image Sizing Examples

Sizing Options#

Image Sizing Examples

Samples#

Sample code: demos/modules/demo_image.mjs