Description

I am looking to replicate the blur up effect of gatsby-image, but in the body of my markdown blog post images using gatsby-remark-images. Here are two examples, the top image is what I expect to happen, but the bottom image is what I am seeing (no blur up).

Example image with blur up using gatsby-image

Example image with no blur up using gatsby-remark-images

Steps to reproduce

Create a markdown page with an image in it. Use a similar setup to below,

package.json

  "dependencies": {
    "gatsby": "^2.0.98",
    "gatsby-image": "^2.0.28",
    "gatsby-plugin-sharp": "^2.0.18",
    "gatsby-remark-copy-linked-files": "^2.0.8",
    "gatsby-remark-images": "^3.0.1",
    "gatsby-transformer-remark": "^2.2.0",
    "gatsby-transformer-sharp": "^2.1.12",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-copy-linked-files',
          {
            resolve: 'gatsby-remark-images',
            options: {
              linkImagesToOriginal: false,
              maxWidth: 800
            }
          }
        ]
      }
    },
  ]
}

test-post.md

---
title: "Test blog post"
date: "2017-07-02"
---

![Cat](cat.jpg)

Expected result

I was expecting the markdown image to blur up.

I notice the generated HTML between gatsby-image and gatsby-remark-images differs.

gatsby-image

<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden;">
  <div style="width: 100%; padding-bottom: 100%;"></div>
  <img src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECAP/aAAwDAQACEAMQAAABt1Lg3WSE5myamFH/xAAbEAEAAwEAAwAAAAAAAAAAAAABAAIREhMhIv/aAAgBAQABBQK9sneJczyMoodEPUHZd+v/xAAWEQADAAAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BrP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABoQAAIDAQEAAAAAAAAAAAAAAAABEBEhMYH/2gAIAQEABj8CNjPBWlZ0U//EABsQAQADAQADAAAAAAAAAAAAAAEAESExQVFx/9oACAEBAAE/IVo5UDVR+RtqYocuQZg4yeykSKeAioVjX2f/2gAMAwEAAgADAAAAEITfwf/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/EKnTP//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExQWFxkbH/2gAIAQEAAT8QR2IGTTARIl0s1rUNAzsqcmuB0tX5gU3kDG4GBeOI7Omh6llJE+x96wpvtn//2Q==" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 0.5s ease 0.5s;">
  <picture>
    <source srcset="/static/e6d467e838b46fd013cf48d16a9e8947/21791/maxresdefault.jpg 200w,
/static/e6d467e838b46fd013cf48d16a9e8947/063a3/maxresdefault.jpg 400w,
/static/e6d467e838b46fd013cf48d16a9e8947/e1890/maxresdefault.jpg 720w" sizes="(max-width: 720px) 100vw, 720px">
    <img alt="" src="/static/e6d467e838b46fd013cf48d16a9e8947/e1890/maxresdefault.jpg" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 0.5s ease 0s;">
  </picture>
  <noscript>
    <picture>
      <source srcSet="/static/e6d467e838b46fd013cf48d16a9e8947/21791/maxresdefault.jpg 200w,
/static/e6d467e838b46fd013cf48d16a9e8947/063a3/maxresdefault.jpg 400w,
/static/e6d467e838b46fd013cf48d16a9e8947/e1890/maxresdefault.jpg 720w" sizes="(max-width: 720px) 100vw, 720px" />
      <img src="/static/e6d467e838b46fd013cf48d16a9e8947/e1890/maxresdefault.jpg" alt="" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/>
    </picture>
  </noscript>
</div>

gatsby-remark-images

<span class="gatsby-resp-image-wrapper" style="position: relative; display: block;  max-width: 720px; margin-left: auto; margin-right: auto;">
  <span class="gatsby-resp-image-background-image" style="padding-bottom: 100%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECAP/aAAwDAQACEAMQAAABt1Jk3XRk5uyaiCf/xAAaEAEAAwEBAQAAAAAAAAAAAAABAAIREgMi/9oACAEBAAEFArWyd41sJ2yi52Qcg6+j9f/EABYRAAMAAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwGs/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERIRAgMYH/2gAIAQEABj8CLxXgpSk7p//EABsQAQADAQADAAAAAAAAAAAAAAEAESExQVFx/9oACAEBAAE/IXQ5TA1AfktlMXOXIMYOMlPasQFeAjAvuIvZ/9oADAMBAAIAAwAAABC00P8A/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEQETH/2gAIAQMBAT8QqdM//8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxAf/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARMSFBYZGh/9oACAEBAAE/ECBiOmOQAwq++1mQSCPZUd9qqOLX2UKXYHNgcPURFdND5FltofstheTfbP/Z&quot;); background-size: cover; display: block; opacity: 0;"></span>
  <img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" alt="Cat" title="" src="/static/e6d467e838b46fd013cf48d16a9e8947/ac8b8/maxresdefault.jpg" srcset="/static/e6d467e838b46fd013cf48d16a9e8947/a84ec/maxresdefault.jpg 200w,
/static/e6d467e838b46fd013cf48d16a9e8947/77e60/maxresdefault.jpg 400w,
/static/e6d467e838b46fd013cf48d16a9e8947/ac8b8/maxresdefault.jpg 720w" sizes="(max-width: 720px) 100vw, 720px">
</span>

Actual result

I was expecting the blur up effect to work as the README describes that it should:

Using the “blur up” technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.

Environment

System:
  OS: macOS 10.14.3
  CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Shell: 5.0.2 - /usr/local/bin/bash
Binaries:
  Node: 10.15.0 - /usr/local/opt/node@10/bin/node
  Yarn: 1.13.0 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
Languages:
  Python: 2.7.15 - /Users/mitchellcash/.pyenv/shims/python
Browsers:
  Chrome: 71.0.3578.98
  Firefox: 64.0.2
  Safari: 12.0.3
npmPackages:
  gatsby: ^2.0.98 => 2.0.98 
  gatsby-image: ^2.0.28 => 2.0.28 
  gatsby-plugin-netlify: ^2.0.7 => 2.0.7 
  gatsby-plugin-sharp: ^2.0.18 => 2.0.18 
  gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8 
  gatsby-remark-images: ^3.0.1 => 3.0.1 
  gatsby-source-filesystem: ^2.0.17 => 2.0.17 
  gatsby-transformer-remark: ^2.2.0 => 2.2.0 
  gatsby-transformer-sharp: ^2.1.12 => 2.1.12 
npmGlobalPackages:
  gatsby-cli: 2.4.8