diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index b2ab520ad3d..49157860fbb 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -476,6 +476,7 @@ class Longhand(Property):
                 "FontWeight",
                 "GreaterThanOrEqualToOneNumber",
                 "GridAutoFlow",
+                "ImageRendering",
                 "InitialLetter",
                 "Integer",
                 "JustifyContent",
diff --git a/components/style/properties/longhands/inherited_box.mako.rs b/components/style/properties/longhands/inherited_box.mako.rs
index cea3fde021a..294f36bd96f 100644
--- a/components/style/properties/longhands/inherited_box.mako.rs
+++ b/components/style/properties/longhands/inherited_box.mako.rs
@@ -69,17 +69,13 @@ ${helpers.single_keyword(
 
 // According to to CSS-IMAGES-3, `optimizespeed` and `optimizequality` are synonyms for `auto`
 // And, firefox doesn't support `pixelated` yet (https://bugzilla.mozilla.org/show_bug.cgi?id=856337)
-${helpers.single_keyword(
+${helpers.predefined_type(
     "image-rendering",
-    "auto crisp-edges",
+    "ImageRendering",
+    "computed::ImageRendering::Auto",
     engines="gecko servo-2013 servo-2020",
-    extra_gecko_values="optimizespeed optimizequality",
-    extra_servo_2013_values="pixelated",
-    extra_servo_2020_values="pixelated",
-    gecko_aliases="-moz-crisp-edges=crisp-edges",
-    gecko_enum_prefix="StyleImageRendering",
-    animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-images/#propdef-image-rendering",
+    animation_value_type="discrete",
 )}
 
 ${helpers.single_keyword(
diff --git a/components/style/values/computed/image.rs b/components/style/values/computed/image.rs
index 6290ac68a5d..a0cb8f3fe45 100644
--- a/components/style/values/computed/image.rs
+++ b/components/style/values/computed/image.rs
@@ -24,6 +24,8 @@ use std::f32::consts::PI;
 use std::fmt::{self, Write};
 use style_traits::{CssWriter, ToCss};
 
+pub use specified::ImageRendering;
+
 /// Computed values for an image according to CSS-IMAGES.
 /// <https://drafts.csswg.org/css-images/#image-values>
 pub type Image =
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index c87142ac1b5..49fc7b8bd33 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -62,7 +62,7 @@ pub use self::font::{FontSize, FontSizeAdjust, FontStretch, FontSynthesis};
 pub use self::font::{FontVariantAlternates, FontWeight};
 pub use self::font::{FontVariantEastAsian, FontVariationSettings};
 pub use self::font::{MathDepth, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
-pub use self::image::{Gradient, Image, LineDirection, MozImageRect};
+pub use self::image::{Gradient, Image, LineDirection, MozImageRect, ImageRendering};
 pub use self::length::{CSSPixelLength, NonNegativeLength};
 pub use self::length::{Length, LengthOrNumber, LengthPercentage, NonNegativeLengthOrNumber};
 pub use self::length::{LengthOrAuto, LengthPercentageOrAuto, MaxSize, Size};
diff --git a/components/style/values/specified/image.rs b/components/style/values/specified/image.rs
index f2167e52800..db30fc460f7 100644
--- a/components/style/values/specified/image.rs
+++ b/components/style/values/specified/image.rs
@@ -1226,3 +1226,38 @@ impl MozImageRect {
         })
     }
 }
+
+/// https://drafts.csswg.org/css-images/#propdef-image-rendering
+#[allow(missing_docs)]
+#[derive(
+    Clone,
+    Copy,
+    Debug,
+    Eq,
+    Hash,
+    MallocSizeOf,
+    Parse,
+    PartialEq,
+    SpecifiedValueInfo,
+    ToCss,
+    ToComputedValue,
+    ToResolvedValue,
+    ToShmem,
+)]
+#[repr(u8)]
+pub enum ImageRendering {
+    Auto,
+    #[parse(aliases = "-moz-crisp-edges")]
+    CrispEdges,
+    // From the spec:
+    //
+    //     This property previously accepted the values optimizeSpeed and
+    //     optimizeQuality. These are now deprecated; a user agent must accept
+    //     them as valid values but must treat them as having the same behavior
+    //     as crisp-edges and smooth respectively, and authors must not use
+    //     them.
+    Optimizespeed,
+    Optimizequality,
+    #[cfg(feature = "servo")]
+    Pixelated,
+}
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 6cd952cd82f..d5ea7f8d9cc 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -55,7 +55,7 @@ pub use self::font::{FontVariantAlternates, FontWeight};
 pub use self::font::{FontVariantEastAsian, FontVariationSettings};
 pub use self::font::{MathDepth, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
 pub use self::image::{EndingShape as GradientEndingShape, Gradient};
-pub use self::image::{Image, MozImageRect};
+pub use self::image::{Image, MozImageRect, ImageRendering};
 pub use self::length::{AbsoluteLength, CalcLengthPercentage, CharacterWidth};
 pub use self::length::{FontRelativeLength, Length, LengthOrNumber, NonNegativeLengthOrNumber};
 pub use self::length::{LengthOrAuto, LengthPercentage, LengthPercentageOrAuto};