Filepicker.io: Pagespeed and remove query strings from static resources

Question

So after successful upload of images via Filepicker we access the images at the given URL and in most places call convert with some parameters passed in. We use Amazon S3 Cloudfront as a CDN in front of filepicker as filepicker states convert is not meant for high traffic sites - fair enough.

The problem that I'm experiencing with convert though is that it's nailing our Page speed and we are getting the message "remove query strings from static resources" for all our Filepicker files.

The reason for the warning is "Resources with a "?" in the URL are not cached by some proxy caching servers."

Is there a way to avoid using query parameters while still retaining the capability of convert function?

I would love to improve my pagespeed but can't see how to fix this particular issue while still using Filepicker.

Answer 1

Similar to REST convert there is javascript filepicker.convert method which return new file link.

var blob = {
  url: 'https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i',
  filename: 'customers.jpg',
  mimetype: 'image/jpeg',
  isWriteable: false,
  size: 629454
};

filepicker.convert(
  blob,
  {
    width: 200,
    height: 200
  },
  function(converted_Blob){
    console.log(converted_Blob.url);

    }
);

Another solution would be to store the conversion REST results.

Curl example:

curl -X POST -d url="https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i/convert?w=100" "https://www.filepicker.io/api/store/S3?key=yourApiKey&container=yourContainerName"

Sample response:

{"container": "yourContainerName", "url": "https://www.filepicker.io/api/file/383MY1piRQqTg1N9K5tw", "filename": "IMAG0038.jpg", "key": "XNeqfiMaRlm4OMAQIJ9y_IMAG0038.jpg", "type": "image/jpeg", "size": 1763}

In this way you can create a server-side conversions