What is the best approach for someone with thousands of images?

[jasonbiondo]

Summary

I have a shopify store with over 10,000 images and when I try to use gatsby-image the query takes too long to run. In this situation should people be using gatsby-image or should they be using another lazyloading library? What is the best approach for someone with thousands of images on a CDN like shopify? I didn't see this outlined in the docs so I want to ask.

[KyleAMathews]

You can use image processing tools like Cloudinary to offload image process e.g. https://cloudinary.com/blog/how_to_improve_your_shopify_s_store_loading_times_using_cloudinary

You can still use gatsby-image with Cloudinary as you can create a component which generates the cloudinary URLs for all the different URLs that gatsby-image expects as props e.g.

<CloudinaryImage
  src="some-product-image"
  fluid
  maxWidth={800}
/>

[jasonbiondo]

@KyleAMathews Does this CloudinaryImage component already exist? Also, regardless of cloudinary for optimization, shopify already has the images on a CDN, why can't I just use those URLs?

[KyleAMathews]

There's this — https://cloudinary.com/blog/introducing_cloudinary_s_gatsby_plugins

You absolutely can use the images directly from Shopify — the only issue I believe is that Shopify doesn't optimize the images for you so if e.g. you upload a very large image for a product, it'll load very slowly. Image processing + gatsby-image solves that problem for you.

[jasonbiondo]

Cool, but my main issue is not the image optimization itself, but that fact that the query is heavy and seems to try and store the files locally via

query MyQuery { allShopifyProduct(sort: {fields: [title]}) { edges { node { metafields { key value } title shopifyId description handle priceRange { minVariantPrice { amount } } images { localFile { childImageSharp { fluid(maxWidth: 500, jpegQuality: 100) { ...GatsbyImageSharpFluid_withWebp_tracedSVG } } } } } } } }

Is there a way to just use gatsby-image with just the CDN url instead of how I have it in the query above? I didn't see this in the documentation and I sure would love it so that I can use it with my prismic image urls as well.

[KyleAMathews]

I'm not very familiar with the Shopify API or the source plugin. You could explore in graphiql if the CDN file is available. It does look like we don't query it —

gatsby/packages/gatsby-source-shopify/src/queries.js

Lines 130 to 132 in 510370d

	id
	altText
	originalSrc

— I assume the Shopify API has the link to the original URL so you could PR adding it to the source plugin so it's available to query instead of localFile.

[jasonbiondo]

It is already available in the Shopify API. I can get the CD and URL but I am not sure how to pass that to Gatsby images. In the Gatsby image documentation it says to use the source set and pass that. There is no documentation on how to pass just one image URL. Any ideas? Jason Biondo

…

On Sep 22, 2020, at 9:29 PM, Kyle Mathews ***@***.***> wrote:  I'm not very familiar with the Shopify API or the source plugin. You could explore in graphiql if the CDN file is available. It does look like we don't query it — https://github.com/gatsbyjs/gatsby/blob/510370d0cd71e1d2c3e88f89f29317659310e961/packages/gatsby-source-shopify/src/queries.js#L130-L132 — I assume the Shopify API has the link to the original URL so you could PR adding it to the source plugin so it's available to query instead of localFile. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[KyleAMathews]

These are the proptypes —

gatsby/packages/gatsby-image/src/index.js

Lines 718 to 742 in d8ed76c

	const fixedObject = PropTypes.shape({
	width: PropTypes.number.isRequired,
	height: PropTypes.number.isRequired,
	src: PropTypes.string.isRequired,
	srcSet: PropTypes.string.isRequired,
	base64: PropTypes.string,
	tracedSVG: PropTypes.string,
	srcWebp: PropTypes.string,
	srcSetWebp: PropTypes.string,
	media: PropTypes.string,
	})
	const fluidObject = PropTypes.shape({
	aspectRatio: PropTypes.number.isRequired,
	src: PropTypes.string.isRequired,
	srcSet: PropTypes.string.isRequired,
	sizes: PropTypes.string.isRequired,
	base64: PropTypes.string,
	tracedSVG: PropTypes.string,
	srcWebp: PropTypes.string,
	srcSetWebp: PropTypes.string,
	media: PropTypes.string,
	maxWidth: PropTypes.number,
	maxHeight: PropTypes.number,
	})

Both the fixed & fluid prop take a src key.

[LekoArts]

I think the initial question was answered, for a better CDN story you can follow: #23724

If it's about the general performance I merged this to: #26726

[mrhut10]

hay everyone here I'm the co-author PR #23840 which address issue #23724 we've had no luck getting it merged.
anyone that wants to see that feature though could you please express your desire/problems on that merge request or its related issue.

and as its been a while next week I will bring it back up to current with master and retest it locally with a demo project.