diff --git a/examples/iiif.js b/examples/iiif.js
index e184ca037f..845b3da75c 100644
--- a/examples/iiif.js
+++ b/examples/iiif.js
@@ -21,6 +21,7 @@ function refreshMap(imageInfoUrl) {
         return;
       }
       const extent = [0, -options.size[1], options.size[0], 0];
+      options.zDirection = -1;
       layer.setSource(new IIIF(options));
       map.setView(new View({
         resolutions: layer.getSource().getTileGrid().getResolutions(),
diff --git a/src/ol/source/IIIF.js b/src/ol/source/IIIF.js
index 63efbdf9a8..6da518cb57 100644
--- a/src/ol/source/IIIF.js
+++ b/src/ol/source/IIIF.js
@@ -39,6 +39,10 @@ import TileImage from './TileImage.js';
  * @property {string} [url] Base URL of the IIIF Image service.
  * This shoulf be the same as the IIIF Image @id.
  * @property {Versions} [version=Versions.VERSION2] Service's IIIF Image API version.
+ * @property {number} [zDirection] Indicate which resolution should be used
+ * by a renderer if the views resolution does not match any resolution of the tile source.
+ * If 0, the nearest resolution will be used. If 1, the nearest lower resolution
+ * will be used. If -1, the nearest higher resolution will be used.
  */
 
 function formatPercentage(percentage) {
@@ -242,6 +246,11 @@ class IIIF extends TileImage {
       transition: options.transition
     });
 
+    /**
+     * @inheritDoc
+     */
+    this.zDirection = options.zDirection;
+
   }
 
 }