diff --git a/rendering/cases/zoomify-no-zdirection/expected.png b/rendering/cases/zoomify-no-zdirection/expected.png
new file mode 100644
index 0000000000..599dd1ea74
Binary files /dev/null and b/rendering/cases/zoomify-no-zdirection/expected.png differ
diff --git a/rendering/cases/zoomify-no-zdirection/main.js b/rendering/cases/zoomify-no-zdirection/main.js
new file mode 100644
index 0000000000..50f4645a31
--- /dev/null
+++ b/rendering/cases/zoomify-no-zdirection/main.js
@@ -0,0 +1,25 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import Zoomify from '../../../src/ol/source/Zoomify.js';
+
+const layer = new TileLayer({
+  source: new Zoomify({
+    url: '/data/tiles/zoomify/',
+    size: [200, 200],
+    tileSize: 100
+  })
+});
+
+new Map({
+  layers: [layer],
+  target: 'map',
+  view: new View({
+    resolutions: [2, 1],
+    extent: [0, -200, 200, 0],
+    center: [100, -100],
+    zoom: 0.4
+  })
+});
+
+render();
diff --git a/rendering/cases/zoomify-zdirection/expected.png b/rendering/cases/zoomify-zdirection/expected.png
new file mode 100644
index 0000000000..002d91d40b
Binary files /dev/null and b/rendering/cases/zoomify-zdirection/expected.png differ
diff --git a/rendering/cases/zoomify-zdirection/main.js b/rendering/cases/zoomify-zdirection/main.js
new file mode 100644
index 0000000000..9a854dae6a
--- /dev/null
+++ b/rendering/cases/zoomify-zdirection/main.js
@@ -0,0 +1,26 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import Zoomify from '../../../src/ol/source/Zoomify.js';
+
+const layer = new TileLayer({
+  source: new Zoomify({
+    url: '/data/tiles/zoomify/',
+    size: [200, 200],
+    tileSize: 100,
+    zDirection: -1
+  })
+});
+
+new Map({
+  layers: [layer],
+  target: 'map',
+  view: new View({
+    resolutions: [2, 1],
+    extent: [0, -200, 200, 0],
+    center: [100, -100],
+    zoom: 0.4
+  })
+});
+
+render();
diff --git a/rendering/data/tiles/zoomify/TileGroup0/0-0-0.jpg b/rendering/data/tiles/zoomify/TileGroup0/0-0-0.jpg
new file mode 100644
index 0000000000..384ca04dca
Binary files /dev/null and b/rendering/data/tiles/zoomify/TileGroup0/0-0-0.jpg differ
diff --git a/rendering/data/tiles/zoomify/TileGroup0/1-0-0.jpg b/rendering/data/tiles/zoomify/TileGroup0/1-0-0.jpg
new file mode 100644
index 0000000000..70c233194a
Binary files /dev/null and b/rendering/data/tiles/zoomify/TileGroup0/1-0-0.jpg differ
diff --git a/rendering/data/tiles/zoomify/TileGroup0/1-0-1.jpg b/rendering/data/tiles/zoomify/TileGroup0/1-0-1.jpg
new file mode 100644
index 0000000000..bf9daae993
Binary files /dev/null and b/rendering/data/tiles/zoomify/TileGroup0/1-0-1.jpg differ
diff --git a/rendering/data/tiles/zoomify/TileGroup0/1-1-0.jpg b/rendering/data/tiles/zoomify/TileGroup0/1-1-0.jpg
new file mode 100644
index 0000000000..dad6e34193
Binary files /dev/null and b/rendering/data/tiles/zoomify/TileGroup0/1-1-0.jpg differ
diff --git a/rendering/data/tiles/zoomify/TileGroup0/1-1-1.jpg b/rendering/data/tiles/zoomify/TileGroup0/1-1-1.jpg
new file mode 100644
index 0000000000..948eaec38b
Binary files /dev/null and b/rendering/data/tiles/zoomify/TileGroup0/1-1-1.jpg differ
diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js
index cddca15d24..1fda4b016f 100644
--- a/src/ol/renderer/canvas/TileLayer.js
+++ b/src/ol/renderer/canvas/TileLayer.js
@@ -143,7 +143,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const tileSource = tileLayer.getSource();
     const sourceRevision = tileSource.getRevision();
     const tileGrid = tileSource.getTileGridForProjection(projection);
-    const z = tileGrid.getZForResolution(viewResolution, this.zDirection);
+    const zDirection = tileSource.zDirection === undefined ? this.zDirection : tileSource.zDirection;
+    const z = tileGrid.getZForResolution(viewResolution, zDirection);
     const tileResolution = tileGrid.getResolution(z);
     let extent = frameState.extent;
 
diff --git a/src/ol/source/Tile.js b/src/ol/source/Tile.js
index 024a94ac46..0d66af54b8 100644
--- a/src/ol/source/Tile.js
+++ b/src/ol/source/Tile.js
@@ -105,6 +105,14 @@ class TileSource extends Source {
      */
     this.tileOptions = {transition: options.transition};
 
+    /**
+     * zDirection hint, read by the renderer. Indicates 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.
+     * @type {number=}
+     */
+    this.zDirection;
   }
 
   /**
diff --git a/src/ol/source/Zoomify.js b/src/ol/source/Zoomify.js
index c4abdcc9f4..4baefa3bba 100644
--- a/src/ol/source/Zoomify.js
+++ b/src/ol/source/Zoomify.js
@@ -111,6 +111,10 @@ export class CustomTile extends ImageTile {
  * @property {number} [transition] Duration of the opacity transition for rendering.
  * To disable the opacity transition, pass `transition: 0`.
  * @property {number} [tileSize=256] Tile size. Same tile size is used for all zoom levels.
+ * @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.
  */
 
 
@@ -253,6 +257,11 @@ class Zoomify extends TileImage {
       transition: options.transition
     });
 
+    /**
+     * @inheritDoc
+     */
+    this.zDirection = options.zDirection;
+
   }
 
 }