Picture Examples

This page demonstrates how to include images in JSPlots pages.

• File-based images: Load JPEG, PNG, SVG, and other formats
• Custom save functions: Generate images dynamically
• Embedded vs External: Choose between embedded (default) and external storage
• Integration: Combine images with interactive plots and text

Mixed Content Example

Below you can see how to combine static images with interactive charts.

Embedded vs External Image Storage

Embedded Format (default)

Images are base64-encoded and embedded directly in the HTML file.

Pros: Single file, easy to share, no external dependencies

Cons: Larger file size (especially for PNG/JPEG)

External Format

Images are saved to a pictures/ subdirectory and referenced by the HTML.

Pros: Smaller HTML file, easier to update images separately

Cons: Multiple files to manage

Summary

This page demonstrated all key Picture features:

• Loading images from file paths (JPEG, SVG)
• Using custom save functions to generate images dynamically
• Combining images with interactive charts
• Understanding embedded vs external storage options

Tip: For external format examples, use the provided open.sh or open.bat scripts to avoid CORS errors when viewing locally.