Should gatsby-remark-images "Blur Up"?

[jamesadarich]

Summary

Currently running gatsby-remark-images and I noticed that the images aren't quite loading as expected (see below) they seem to be loading top down rather than blur up, is this expected? I can see in the documentation that there are references to "blur up" but I'm not sure as to whether that means purely the preload or also that the jpegs should load progressively.

Relevant information

Environment (if relevant)

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: next => 2.0.0-rc.4
gatsby-cli: next => 2.0.0-rc.1
gatsby-image: next => 2.0.0-rc.1
gatsby-plugin-canonical-urls: next => 2.0.0-rc.1
gatsby-plugin-google-tagmanager: next => 2.0.0-rc.1
gatsby-plugin-manifest: next => 2.0.2-rc.1
gatsby-plugin-offline: next => 2.0.0-rc.1
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
gatsby-plugin-sass: next => 2.0.0-rc.1
gatsby-plugin-sharp: next => 2.0.0-rc.2
gatsby-plugin-sitemap: next => 2.0.0-rc.1
gatsby-plugin-typescript: next => 2.0.0-rc.3
gatsby-remark-copy-linked-files: next => 2.0.0-rc.1
gatsby-remark-images: next => 2.0.1-rc.1
gatsby-remark-prismjs: next => 3.0.0-rc.2
gatsby-source-filesystem: next => 2.0.1-rc.1
gatsby-transformer-remark: next => 2.1.1-rc.1
gatsby-transformer-sharp: next => 2.1.1-rc.2

File contents (if changed)

gatsby-config.js:
{plugins: [
"gatsby-plugin-react-helmet",
"gatsby-plugin-typescript",
"gatsby-plugin-sass",
"gatsby-transformer-sharp",
"gatsby-plugin-sharp",
"gatsby-plugin-offline",
{
resolve: "gatsby-plugin-manifest",
options: {
name: SITE_NAME,
short_name: SITE_NAME,
start_url: "/",
background_color: "#eee",
theme_color: "#eee",
display: "minimal-ui",
icon: "src/images/favicon.png"
}
},
// markdown plugins
{
resolve: "gatsby-source-filesystem",
options: {
path: path.resolve("./src"),
name: "markdown-pages"
}
},
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
"gatsby-remark-copy-linked-files",
{
resolve: "gatsby-remark-prismjs",
options: {
// Class prefix for

 tags containing syntax highlighting;

// defaults to 'language-' (eg 
).

// If your site loads Prism into the browser at runtime,

// (eg for use with libraries like react-live),

// you may use this to prevent Prism from re-processing syntax.

// This is an uncommon use-case though;

// If you're unsure, it's best to use the default value.

classPrefix: "line-numbers language-"

}

},

{

resolve: "gatsby-remark-images",

options: {

// It's important to specify the maxWidth (in pixels) of

// the content container as this plugin uses this as the

// base for generating different widths of each image.

maxWidth: 1000,

linkImagesToOriginal: false,

backgroundColor: 'transparent'

}

}

]

}

}

}


package.json: N/A 

gatsby-node.js: N/A 

gatsby-browser.js: N/A 

gatsby-ssr.js: N/A 

[KyleAMathews]

It is expected. To do a true blur-up, we'd need to add JS which would catch the image loading and not show loading image until it was fully loaded. This is what gatsby-image does. Happy to take a PR to gatsby-remark-image for this!

[jamesadarich]

Thanks for the clarification @KyleAMathews 👍 I'm having a peek at this, is there an easy way to run up a version of gatsby to do some integration testing in browser?

Also noticed there's not really any tests around the particular areas I'd be changing, is adding tests a must? Based on tests there at the moment and how the current implementation is I'm not sure unit tests would prove too much. Happy to give it a go though :)

[m-allanson]

Hey @jamesadarich 👋 there's some contributing docs on the website that run through how to set up a local development version of Gatsby: https://next.gatsbyjs.org/docs/how-to-contribute/#contributing-to-the-repo

Tests are preferred but not 100% essential yet - note there are some end-to-end tests (made with Cypress) in the gatsbygram example site. More end to end tests might be a useful alternative to unit tests?

[jamesadarich]

Thanks @m-allanson, I've come up with something that works - it's not perfect (but what is? :) ) but I think it's probably the most sensible considering all the other moving parts going on. I've tested by patching a local project with the updates and seems to behave itself.

Would it be best to perhaps raise a pull request to discuss the changes and / or options we could go with for testing?

[KyleAMathews]

@jamesadarich yeah, early WIP PRs are great for starting conversations.

[oorestisime]

@jamesadarich any chance you could go ahead with a PR on this one? i would like to see this implemented as well in remark images and it would be best to avoid double effort here ;)

[jamesadarich]

@oorestisime I'm done already see #7800 :) just awaiting a review from someone I think CI needs to be retriggered too due to some tests which were failing from an unrelated PR. Any chance you can help me out with this @oorestisime ?

[jamesadarich]

Just rechecked looks like it's got a conflict, I'll take a peek now