# How do I open an image? ```{admonition} What will I learn? * How to open an image, quickly * How to pan & zoom * How to check the image properties ``` **Images** are composed of **pixels** (*pic*ture *el*ements), and pixels have **numeric values**. That's really the starting point for digital image analysis. The most important insight is that it's the numbers that are important, and _**not**_ the **colour** that is used for their display. If you want to find out more, there are details [in the QuPath docs](https://qupath.readthedocs.io/en/stable/docs/concepts/images.html) or [Pete's Introduction to Bioimage Analysis](https://bioimagebook.github.io/chapters/1-concepts/1-images_and_pixels/images_and_pixels.html). Our priority for now is to be able to view our images in QuPath as quickly as possible. We'll be seeing colours, but remember: the real data are the numbers. ## How to open an image ```{admonition} What to do 1. Find the `CMU-1.svs` image downloaded in the setup page 2. Drag the file onto the main QuPath window ``` You should see the following window: ```{figure} ../../images/view_image/cmu_image_type.png The image type display ``` The image type doesn't *really* matter if you *only* want to look at an image, but it will become important later when we want to do analysis. `CMU-1.svs` is a brightfield image of tissue stained with haematoxylin and eosin, so select {guilabel}`Brightfield H & E`. ```{admonition} What to do 3. Select {guilabel}`Brightfield H & E` 4. Click {guilabel}`Apply` ``` The image is now open in QuPath! ```{figure} ../../images/view_image/cmu_without_project.png `CMU-1.svs` image opened in QuPath ``` ```{tip} You can also open an image in QuPath with {menuselection}`File --> Open...` but drag & drop is usually faster. {menuselection}`File --> Open URI...` can be used if your image *isn't* a local file. For example, if it's accessed via [OMERO](https://qupath.readthedocs.io/en/stable/docs/advanced/omero.html). ``` ## How to pan and zoom ```{admonition} What to do 1. Make sure that the {{ icon_move }} button is selected in the toolbar: this is the **Move** tool 2. Click on the image and drag the mouse to **pan** 3. Use the scroll wheel of your mouse --- or equivalent scrolling motion on a trackpad --- to **zoom** in or out of the image ``` ```{figure} ../../images/view_image/cmu_top_corner.png :alt: Image zoomed to the top left :figclass: margin Image zoomed to the top left ``` The best way to become used to QuPath's various ways to pan and zoom around an image is to experiment. For example, try clicking and dragging on the image, or pressing arrow keys. We hope you find the behaviour quite intuitive. ````{admonition} Question Navigate so that you are zoomed in to view the top left corner of the image. Can you figure out three different ways to navigate to look at the bottom right corner, *without* using 'click and drag'? 1. Using a single click 2. *Only* scrolling (not clicking anywhere) 3. *Only* using the keyboard (not clicking or scrolling) ```` ```{admonition} Question Zoom-in and hover the cursor over different areas of `CMU-1.svs`. How do the numbers in the bottom-right corner of the viewer relate to what is shown on screen? ``` ## How to check image properties ```{admonition} What to do 1. On the left panel, click on the {guilabel}`Image` tab. 2. Look at what information is available in the image properties 3. Hover your mouse over different rows of the table to see more information ``` Images don't *only* contain pixel values. They usually have some extra properties associated with them. ```{figure} ../../images/view_image/cmu_details.png `CMU-1.svs` image properties panel ``` QuPath can open images using three popular open-source libraries: 1. [OpenSlide](https://openslide.org) 2. [Bio-Formats](https://www.openmicroscopy.org/bio-formats/) 3. [ImageJ](https://imagej.net/software/imagej/) These support different file types from different microscopes or whole slide scanners. There are ways to [tell QuPath which to use](https://qupath.readthedocs.io/en/stable/docs/tutorials/projects.html#add-images), but usually you don't have to -- QuPath's automatic choice should work. ```{admonition} Question Which library do you think was used to open `CMU-1.svs`? ``` ```{admonition} Question Note the {guilabel}`Pixel width` and {guilabel}`Pixel height` values under the {guilabel}`Image` tab. How can you change them if they are missing or wrong? ``` ### Setting the image type (again) ```{admonition} What to do 1. Make sure an image is open, then select the {guilabel}`Image` tab 2. Double-click the {guilabel}`Image type` value and change it if necessary ``` By default, QuPath prompts you to set the type of an image when it is opened. You can also set this value later under the {guilabel}`Image` tab. ```{tip} If you find being prompted for the image type annoying every time you open an image, look at the dialog box closely. There is an option to {guilabel}`Auto-estimate image type`. Then QuPath will make its best guess, and not prompt you. But QuPath won't always get it right. So if you select this option, it is *especially* important to know how to check the type and fix it. ``` ```{admonition} How QuPath handles big images Whole slide images can be **gigabytes** in size. It usually isn't possible to read all the pixels in one go: it would take too much time and memory. QuPath uses the fact that the images are usually stored as **pyramids** (i.e., with multiple zoom levels in the same file). It only reads the pixels that are required at the time, based upon what is currently being processed or shown in the viewer. :::{figure} ../../images/view_image/pyramid.webp A pyramidal image contains multiple zoom levels within the same file ::: ``` ```{seealso} * [First steps](https://qupath.readthedocs.io/en/stable/docs/starting/index.html) * [Supported image formats](https://qupath.readthedocs.io/en/stable/docs/intro/formats.html) * [Viewing images](https://qupath.readthedocs.io/en/stable/docs/starting/viewing.html) * [From pixels to microns](https://qupath.readthedocs.io/en/stable/docs/concepts/images.html#from-pixels-to-microns) ```