Any way to optimize images?

[sethxd]

I'm struggling to figure out a way to optimize images. I believe I can't use gatsby-image because the images are stored remotely in Ghost. I might be able to use gatsby-image for the featured images if I use gatsby-plugin-remote-images first, because I can find those in GraphQL, but I'm not sure how to write the query for that.

Does anyone have experience doing this who could offer me some guidance?

[aileen]

This starter is using the gatsby-source-ghost plugin, which fetches the data from Ghost using its Content API. I don't believe it's possible to optimise all received images, but there's a feature request for that over here.

If you're looking on how to use the gatsby-plugin-remote-images in your queries and the examples listed in their docs are not helpful enough, I recommend going there to seek help.

You can also check out the Gatsby.js community, or - for Ghost specific questions - head over to our forum, where you'd be able to reach more people with this question.

[MarioHdpz]

@sethxd
I'm also using the gatsby-source-ghost and the gatsby-plugin-remote-images cause I have Ghost in a localserver.

After adding the gatsby-plugin-remote-images to the gatsby configuration you have to add to the new tag to the correspondent nodes in utils/fragment.js

For example, if you left the default name property in the remote plugin (localImage) your fragment should look like:

    fragment GhostTagFields on GhostTag {
        slug
        name
        visibility
        feature_image
        localImage { publicURL }
        description
        meta_title
        meta_description
    }

This also goes for all the nodes where you gonna use the images: GhostPost, GhostPage, etc

Then you can query that localImages as <img src={ post.localImage.publicURL } alt={ post.title } />

Now you have the images locally and you can focus in the task of optimizing as you do with a Gatsby local image.

[sethxd]

Thanks @MarioHdpz, I'll have to try that.