3. Sharing and embedding your images

This page explains how you can share and embed your images into your own website.
The current latest version of the Micrio client is 3.1:
<script src=""></script>

3.1. Using the viewer

3.1.1. Sharing on social media

If you want to share an image, use the sharing icons in the top right corner of the viewer or copy and paste the public image URL (for instance in your message.

3.1.2. Sharing image details

If you want to share a particular part of your image, open the image (like and zoom in to the part of the image you want to share. If you look at the image address, you'll see it will look something like You can instantly share it to other people or using social media, and they will see the exact details you are currently seeing.

3.2. Embedding images on your own website

If you are a developer working with high resolution images, or if you have your own website where you would like to show your work in its full glory, Micrio supports several ways of embedding your images in your own site.

There is also a step by step tutorial on this subject!

3.2.1. Using an <iframe>

This is the most basic way to embed an image in your page, and works just like embedding any other web resource.

Copying and pasting this HTML-fragment in your HTML:
<iframe src="" width="600" height="400" allow="autoplay; fullscreen"></iframe>
Results in this:

This is a simple way to immediately have results without any custom includes in your site. However, if you have multiple images or want more control over the image or the styling, see the next section.

3.2.2. Using the <micr-io> element

For more control over the image, and to add custom CSS, you can embed Micrio images directly into your website. This is as easy as using <micr-io> tags. Include the Javascript reference to the Micrio client library in your HTML <head>:

<script src=""></script>

Then, you can simply add custom <micr-io id="[image ID]"> elements in your HTML, which will be automatically loaded:

<micr-io id="LmnFB"></micr-io>
Result (fully zoomable):

You can simply style the <micr-io> elements using CSS to set the desired width and height. Custom options for <micr-io> elements

You can specify additional options as attributes using the <micr-io> element.

Attribute Default value Description
audio true If set to false, any image audio will be hard disabled
camspeed 1 Set the speed factor for camera animations
hookScroll true Use mousewheel/trackpad scrolling for zooming
events true If set to false, no event handlers will be set up and the image will be non-interactive
dragging true Use dragging and touch events for panning
fullscreen false If set to true, a fullscreen toggle button will be shown
keys false If set to true, you can use your keyboard to navigate through the image
lazyload false Set this to true to only start loading the image when it's been scrolled into the user's view, in case it's lower in a webpage.
loaderbar true If set to false, the loaderbar at the top will not be placed
minimap false If set to true, an interactive minimap will be shown
minimap-hide true If set to false, the minimap will always be visible
minimap-height 160 Set the minimap height in pixels
minimap-width 200 Set the minimap width in pixels
musicvolume 1 If music was added to the image, play it at this volume (between 0 and 1)
muted If this attribute is present, all audio will be disabled
mutedvolume 0 If music was added to the image, fade it to this volume while other audio plays (between 0 and 1)
pinch-zoom true Use trackpad/touchscreen pinching for zooming
scroll-zoom true Use mousewheel/trackpad scrolling for zooming
static false Simulate an <img/> element. No logo, loaderbar, and no event listeners
two-finger-pan false Requires the user to use two fingers to pan the image on touch devices
view 0,0,1,1 Set the initial viewport rectangle of the image (x0, y0, x1, y1 with coordinates as fractions)
zoomlimit 1 Set this to the percentage (1=100%) of how far a user can zoom in to the image
// Show an image starting at the specified viewport using a minimap
<micr-io id="LmnFB" view=".5711,.6859,.5929,.7030" minimap></micr-io>
Results in:

3.2.3. Using Javascript

For more control over the images and for advanced use (webapps, single page interfaces), you can create and control Micrio instances using Javascript.

let image = new Micrio({

	// Image ID, required
	id: 'LmnFB',

	//// Optional settings

	// HTML element to put the image in, defaults to <body>
	container: document.getElementById('container'),

	// Listen to touch and mouse events, defaults to true
	hookEvents: true,

	// Initializes and draws image on instance creation, defaults to true
	autoInit: true,

	// Creates a fully interactive minimap, defaults to false
	minimap: false,

	// How to render the initial view, like CSS background-size
	// 'cover' or 'contain'. Defaults to 'contain'.
	initType: 'contain',

	// Opens the image at a specified view rectangle [x0, y0, x1, y1]
	startView: [.25,.25,.75,.75]


You then have an image object which you can easily place and show with, and remove using image.hide().

More uses and advanced methods are described in the next chapter.

3.2.4. IIIF

Micrio is fully IIIF (International Image Interoperability Framework) compatible, both as image server and image client viewer. You can use any IIIF-compatible image viewer (as listed here) to view images uploaded in Micrio.

For now, please refer to the IIIF details page which contains examples.

By Marcel Duin, - Last modified: 04/01/2019