diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
index 0bba09e5b3ec9..f05727a4057ae 100644
--- a/packages/gatsby-image/README.md
+++ b/packages/gatsby-image/README.md
@@ -250,11 +250,12 @@ prop. e.g. `<Img sizes={sizes} />`
 | `fadeIn`                | `bool`           | Defaults to fading in the image on load                                                                                     |
 | `title`                 | `string`         | Passed to the `img` element                                                                                                 |
 | `alt`                   | `string`         | Passed to the `img` element                                                                                                 |
-| `className`             | `string\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop                                                    |
-| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop                                              |
+| `className`             | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop                                                    |
+| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop                                              |
 | `style`                 | `object`         | Spread into the default styles in the wrapper element                                                                           |
+| `imgStyle`              | `object`         | Spread into the default styles for the actual `img` element                                                                             |
 | `position`              | `string`         | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned                                      |
-| `backgroundColor`       | `string\|bool`   | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
+| `backgroundColor`       | `string|bool`   | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
 | `onLoad`                | `func`           | A callback that is called when the full-size image has loaded.                                                              |
 | `Tag`                   | `string`         | Which HTML tag to use for wrapping elements. Defaults to `div`.                                                             |
 
diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
index 94b485d52662f..42c339646266e 100644
--- a/packages/gatsby-image/src/index.js
+++ b/packages/gatsby-image/src/index.js
@@ -99,11 +99,11 @@ const noscriptImg = props => {
     height = ``,
     transitionDelay = ``,
   } = props
-  return `<img width=${width} height=${height} src="${src}" srcset="${srcSet}" alt="${alt}" title="${title}" sizes="${sizes}" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;objectPosition:center"/>`
+  return `<img width=${width} height=${height} src="${src}" srcset="${srcSet}" alt="${alt}" title="${title}" sizes="${sizes}" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
 }
 
 const Img = props => {
-  const { opacity, onLoad, transitionDelay = ``, ...otherProps } = props
+  const { style, onLoad, ...otherProps } = props
   return (
     <img
       {...otherProps}
@@ -113,20 +113,18 @@ const Img = props => {
         top: 0,
         left: 0,
         transition: `opacity 0.5s`,
-        transitionDelay,
-        opacity,
         width: `100%`,
         height: `100%`,
         objectFit: `cover`,
         objectPosition: `center`,
+        ...style,
       }}
     />
   )
 }
 
 Img.propTypes = {
-  opacity: PropTypes.number,
-  transitionDelay: PropTypes.string,
+  style: PropTypes.object,
   onLoad: PropTypes.func,
 }
 
@@ -184,6 +182,7 @@ class Image extends React.Component {
       className,
       outerWrapperClassName,
       style = {},
+      imgStyle = {},
       sizes,
       resolutions,
       backgroundColor,
@@ -197,6 +196,17 @@ class Image extends React.Component {
       bgColor = backgroundColor
     }
 
+    const imagePlaceholderStyle = {
+      opacity: this.state.imgLoaded ? 0 : 1,
+      transitionDelay: `0.25s`,
+      ...imgStyle,
+    }
+
+    const imageStyle = {
+      opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+      ...imgStyle,
+    }
+
     if (sizes) {
       const image = sizes
 
@@ -211,7 +221,7 @@ class Image extends React.Component {
         <Tag
           className={`${
             outerWrapperClassName ? outerWrapperClassName : ``
-          } gatsby-image-outer-wrapper`}
+            } gatsby-image-outer-wrapper`}
           style={{
             zIndex: 0,
             // Let users set component to be absolutely positioned.
@@ -242,8 +252,7 @@ class Image extends React.Component {
                 alt={alt}
                 title={title}
                 src={image.base64}
-                opacity={!this.state.imgLoaded ? 1 : 0}
-                transitionDelay={`0.25s`}
+                style={imagePlaceholderStyle}
               />
             )}
 
@@ -253,8 +262,7 @@ class Image extends React.Component {
                 alt={alt}
                 title={title}
                 src={image.tracedSVG}
-                opacity={!this.state.imgLoaded ? 1 : 0}
-                transitionDelay={`0.25s`}
+                style={imagePlaceholderStyle}
               />
             )}
 
@@ -283,9 +291,7 @@ class Image extends React.Component {
                 srcSet={image.srcSet}
                 src={image.src}
                 sizes={image.sizes}
-                opacity={
-                  this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
-                }
+                style={imageStyle}
                 onLoad={() => {
                   this.state.IOSupported && this.setState({ imgLoaded: true })
                   this.props.onLoad && this.props.onLoad()
@@ -331,7 +337,7 @@ class Image extends React.Component {
         <Tag
           className={`${
             outerWrapperClassName ? outerWrapperClassName : ``
-          } gatsby-image-outer-wrapper`}
+            } gatsby-image-outer-wrapper`}
           style={{
             zIndex: 0,
             // Let users set component to be absolutely positioned.
@@ -349,8 +355,7 @@ class Image extends React.Component {
                 alt={alt}
                 title={title}
                 src={image.base64}
-                opacity={!this.state.imgLoaded ? 1 : 0}
-                transitionDelay={`0.35s`}
+                style={imagePlaceholderStyle}
               />
             )}
 
@@ -360,8 +365,7 @@ class Image extends React.Component {
                 alt={alt}
                 title={title}
                 src={image.tracedSVG}
-                opacity={!this.state.imgLoaded ? 1 : 0}
-                transitionDelay={`0.25s`}
+                style={imagePlaceholderStyle}
               />
             )}
 
@@ -388,9 +392,7 @@ class Image extends React.Component {
                 height={image.height}
                 srcSet={image.srcSet}
                 src={image.src}
-                opacity={
-                  this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
-                }
+                style={imageStyle}
                 onLoad={() => {
                   this.setState({ imgLoaded: true })
                   this.props.onLoad && this.props.onLoad()
@@ -439,6 +441,7 @@ Image.propTypes = {
     PropTypes.object,
   ]),
   style: PropTypes.object,
+  imgStyle: PropTypes.object,
   position: PropTypes.string,
   backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   onLoad: PropTypes.func,