diff --git a/public/js/reader.js b/public/js/reader.js
index a5d8e6b..fa66b77 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -29,14 +29,16 @@ const readerComponent = () => {
 						return {
 							id: i + 1,
 							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
-							width: d.width,
-							height: d.height,
+							width: d.width == 0 ? "100%" : d.width,
+							height: d.height == 0 ? "100%" : d.height,
 						};
 					});
 
-					const avgRatio = this.items.reduce((acc, cur) => {
+					// Note: for image types not supported by image_size.cr, the width and height will be 0, and so `avgRatio` will be `Infinity`.
+					// TODO: support more image types in image_size.cr
+					const avgRatio = dimensions.reduce((acc, cur) => {
 						return acc + cur.height / cur.width
-					}, 0) / this.items.length;
+					}, 0) / dimensions.length;
 
 					console.log(avgRatio);
 					this.longPages = avgRatio > 2;
diff --git a/src/util/util.cr b/src/util/util.cr
index e08bd9d..68e26c7 100644
--- a/src/util/util.cr
+++ b/src/util/util.cr
@@ -11,6 +11,7 @@ SUPPORTED_IMG_TYPES      = %w(
   image/avif
   image/gif
   image/svg+xml
+  image/jxl
 )
 
 def random_str
@@ -49,6 +50,7 @@ def register_mime_types
     #   defiend by Crystal in `MIME.DEFAULT_TYPES`
     ".apng" => "image/apng",
     ".avif" => "image/avif",
+    ".jxl"  => "image/jxl",
   }.each do |k, v|
     MIME.register k, v
   end