Introduction

OpenSeadragon

Basic Viewer

Take a look at two modes that help you arrange multiple images

Sequence and Collection Modes

Some exercises to help you practice what you have learned

Module 2 Exercises

Viewer Basics

Look at what to do when your image is huge

Tiled Images

Loading the DZI file into your OpenSeadragon viewer

Loading Your DZI

Automation

Build a pipeline that generates DZI files for you, as well as a data file containing information about all of those files

Pipeline

Module 3 Exercises

Loading the Images

Arrange the images in a trim and proper way

Arranging the Images

Add another arrangement and a toggle button to switch between both

Multiple Arrangements

Module 4 Exercises

Multi-Image

Make clicking in the viewer zoom you directly to whatever image you clicked on

Clicking on Images

Write a custom animation that moves smoothly from one image to another, zooming out in the middle for a nice overview

Custom Animation

Module 5 Exercises

Navigation

Add text overlays to the images to show additional information

HTML Overlays

Track the mouse movement to hide and show the text overlays on hover

Hover

Module 6 Exercises

Conclusion

Overlays

High-resolution imagery is all around us. Once the domain of high-end photography, now even our phones have many megapixels. OpenSeadragon is the premier tool for displaying these images on the web. Other tools exist, but they are either focused on geographic data, or they lack versatility and polish. OpenSeadragon has a lively community and is used throughout the world by artists, libraries, museums, medical/scientific institutions, etc.

With OpenSeadragon, you can display images too big to view on the screen, or even too big to send all at once, and seamlessly transition from low resolution to high resolution with no extra coding. OpenSeadragon works across devices, from tiny phone screens to giant wall displays.

By its very nature (allowing the user to zoom into ultra-high resolution images), OpenSeadragon has a number of very powerful concepts that may not be intuitive at first (tile pyramids, multiple coordinate systems, etc.). This course will give you a solid working understanding of those concepts. We will then dive further into many of the advanced techniques possible with OpenSeadragon to take your app to the next level. Throughout, we will work with real, functioning apps that you will build from start to finish.
  
This course is taught by Ian Gilman, the creator and maintainer of OpenSeadragon.

Transform huge images into immersive experiences

In this course, you'll learn how to prepare huge images for immersive viewing on the web using OpenSeadragon zooming technology.

OpenSeadragon Deep Dive

The key concepts behind OpenSeadragon, including tile pyramids and viewport coordinates.

How to collect huge images and convert them into a format suitable for efficient display,using the VIPS command line tool.

How to build a pipeline for converting large numbers of images, using Node.js.

How to display all of the images together in the same viewer.

How to arrange the images however you want, and how to animate between arrangements.

User interaction with the images, including custom animated movement between images, using Tween.js.

Adding overlays with additional information and links, using the OpenSeadragon HTML Overlay plugin.

This course is designed for JavaScript developers like you who want to display extremely high-resolution images on the web. OpenSeadragon enables you to share such huge images across the globe smoothly.

The focus will be on building a single web app with all of these features, which you'll do directly in vanilla JavaScript plus OpenSeadragon.

OpenSeadragon is a client-side web technology, so you'll be using JavaScript as well as a bit of HTML and CSS. This course assumes you are familiar with the basics of these technologies.

For some client-side animation, you'll use 

. You're not expected to know how to use it already, but don't worry; you'll be guided through it.

---
title: Introduction
description: Introduction to This Course
role: 'INTRODUCTION'
isPublicLesson: true
---

## Introduction

### About the Course

This course is designed for JavaScript developers like you who want to display extremely high-resolution images on the web. OpenSeadragon enables you to share such huge images across the globe smoothly.

### What You'll Learn

-   The key concepts behind OpenSeadragon, including tile pyramids and viewport coordinates.
-   How to collect huge images and convert them into a format suitable for efficient display, using the VIPS command line tool.
-   How to build a pipeline to convert a large number of images using Node.js.
-   How to display all of the images together in the same viewer.
-   How to arrange the images however you want, and how to animate between arrangements.
-   User interaction with the images, including custom animated movement between images, using Tween.js.
-   Adding overlays with additional information and links using the OpenSeadragon HTML Overlay plugin.

The focus will be on building a single web app with all of these features, which you'll do directly in vanilla JavaScript plus OpenSeadragon.

![Screenshot of viewer with masonry layout](https://d2uusema5elisf.cloudfront.net/courses/openseadragon-deep-dive/module_01/lesson_01.01/public/masonry-layout.jpg)

### Prerequisites

OpenSeadragon is a client-side web technology, so you'll be using JavaScript as well as a bit of HTML and CSS. This course assumes you are familiar with the basics of these technologies.

For some client-side animation, you'll use [Tween.js](https://tweenjs.github.io/tween.js/). You're not expected to know how to use it already, but don't worry; you'll be guided through it.

OpenSeadragon doesn't require any server intelligence; you can use it on a static site. For this reason, server-side code won't be covered. However, you will use JavaScript to prepare some data using Node.js. You'll need to have Node installed (you can get it at [nodejs.org](https://nodejs.org/)), but you'll be guided on how to use it.