Sanity will cache the result in the global CDN, and if we see the same URLs again we serve the exact same data directly from the edge cache closest the the user. ShortPixel is an online image optimization service that smart-compresses images, CSS and JS. This will extract a rectangle from the image starting at 70 pixels from the left and 20 pixels from the top at a width of 120 pixels and a height of 150 pixels, scale it to 200 pixels tall and blur it:Įven though the Sanity image backend is fast, you get a tremendous performance boost if your frontend limits the number of sizes and crops you ask for. You can specify any number of parameters. by appending ?h=200 to the base URLs you instruct Sanity to scale the image to be 200 pixels tall: The Sanity image pipeline therefore scales, crops and processes images on the fly for you based on the URL-parameters your provide. However, if you’d like fast CDN image delivery, WebP conversion, automatic resizing, the ability to optimize (or optimise) images up to 32MB, bulk smush optimization for all your images in just one-click, auto-convert PNG to JPEG, the ability to Smush and make a copy of your full-sized images (to restore them at any point), you can always. This wastes a lot of bandwidth as content managers should upload full resolution assets. If you fetch this you will be served the original asset. Given the project id and dataset name you have every piece you need to assemble the URLs without fetching the asset document: As you can see it provides the name, dimensions, and format. The asset id corresponding the URLs above looks like this: "image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg". The image URLs can always be found in the asset-document referred to by an image, but you don't actually have to fetch this document as the asset document id contains all the information (and represents a stable, documented interface you can trust). It is followed by the project id ( zp7mbokg in this instance), the dataset ( production) and then the asset id which is comprised of a name ( G3i4emG6B8JnTmGoN0UjgAp8) a dash then the width and height of the original image ( 300x450) and the file format of the original image ( jpg). is the common base for all Sanity image URLs. Let's start by dissecting this Sanity image-url: You can find a general introduction to our image pipeline and tools here. ![]() This article is a detailed rundown of all the options for transforming images with Sanity.
0 Comments
Leave a Reply. |