Gatsby Lazy Loading and trace svg

Developing with Prismic
1

Hi @Phil,

Gatsby has quite an advanced api when it comes to image processing.

If I would like to do a blur up or background modification the same way as on the demo link, is it also possible through Prismic?

2

Hi Anton,

You can do a similar effect with our Imgix integration and the lazysizes plugin.

But essentially to set this up you just need to

  1. Install the plugin
  2. Use srcsets for your images
  3. Add the lazyload class

There’s also the react-imgix plugin to make this process even easier.

Although tracing the image in an svg option doesn’t seem to be available at the minute, hopefully they or a plugin will support this in the future, most likely a plugin that would extend potrace.

Let me know if you have any further questions.

Thanks.

1 Like
3

Although you could maybe also implement something similar using their Dynamic Color Quantization feature.

4

Hi Phil,

Thanks for the tip. I will play around with it. Normally I would do it gatsby-images, but this probably will work as well.

I also have found this great video:
Lazy Loading Images with Prismic and Vue.js :movie_camera:

I will probably build something similar for Gatsby.

1 Like
5

That sounds great. This video is awesome.

Please feel free to share your solution here once you’ve finished it :grin: