Open intellix opened 5 years ago
Yes, this is something I always wanted to do, have Prime output URL (and metadata) for an image based a image transformation properties set via GraphQL.
However, I will not remove up-front crops as a feature. This is very important for publishers to be able to fit an image into different crop sizes for perfect display in different viewports/usage on the front-end.
So what about:
Sounds good to me. I guess I would have achieved perfectly cropped images by defining multiple images and width/height validators:
{
posts {
title
content
imageXS
imageMD
imageLG
}
}
I guess with crops up-front it looks like:
{
posts {
title
content
imageXS: image(crop: "xs")
imageMD: image(crop: "md")
imageLG: image(crop: "lg")
}
}
As long as I can transform on the fly I'm happy :)
So I was just playing with the Cloudinary integration and it's pretty good that you can define "crops" up front and edit them directly into Cloudinary. It seems like they also already support being able to do it on demand as you can edit the URL manually afterwards.
Couple of thoughts:
String
type120x100
rather than 1mb 1,200x1000 images on the homepage"Coming from GraphCMS there are AssetTransformations which allow to do them on the fly (provided by Filestack https://www.filestack.com/products/file-upload/):
Which creates a URL like:
https://media.graphcms.com/output=format:png/resize=fit:clip,height:100,width:100/y1UgaYKCQ4FfJDfnaie3
We're using AWS and plan to store stuff in S3. Having a quick google I found a blog post with a tutorial for basic resizing on the fly:
And a pre-made solution posted at the top of it:
Personally I never needed the format changing on the fly but I guess JPG -> WEBP is a nice optimisation and comes out of the box with Thumbor (used in the above solution). Thumbor usage docs: https://github.com/thumbor/thumbor/wiki/Usage
Here's a library for dynamically building Thumbor URLs in TypeScript that was recently maintained: https://github.com/MCeddy/ThumborUrlBuilderTs
The GraphCMS GQL types/inputs/enums for Assets and AssetTransformation looks something like:
Also, a general cost which can be compared to Cloudinary from here https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/overview.html:
What are your thoughts on replacing/deprecating up-front crops and doing them on the fly?