Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Get the Original Height/Width Pixel Size of an Image by its URL

10 replies
Last updated: Apr 2, 2021
One for
user B
’s tweet tips, get the original height/width pixel size off an image by its URL (as in, without querying for that information)

// <https://cdn.sanity.io/images/>&lt;project&gt;/&lt;dataset&gt;/&lt;uuid&gt;-442x255.png?params=whatever

  const [originalWidth, originalHeight] = new URL(url).pathname
    .split('/')
    .filter((p) =&gt; p)
    .pop()
    .split('.')
    .slice(0, 1)
    .join('')
    .split('-')
    .pop()
    .split('x')
    .map((px) =&gt; parseInt(px))

// Returns 442, 255

😅
Apr 2, 2021, 12:02 PM
Great tip!
To make this easier, lean on
@sanity/asset-utils :
import {getImageDimensions} from '@sanity/asset-utils'

const { aspectRatio, height, width } = getImageDimensions({
  url: "<https://cdn.sanity.io/images/>&lt;project&gt;/&lt;dataset&gt;/&lt;uuid&gt;-442x255.png?params=whatever"
})
Apr 2, 2021, 12:09 PM
Boooo
Apr 2, 2021, 12:20 PM
No fun allowed, I love writing my own absurd one-liners
Apr 2, 2021, 12:21 PM
😂
Apr 2, 2021, 12:22 PM
I'm a fan, too! It's my 6-months-from-now self that hates it 😂
Apr 2, 2021, 12:30 PM
Yes, well I’ve installed that library now and my code is 20 lines lighter 😄
Apr 2, 2021, 12:30 PM
Why not use regex?
const [w, h] = image_url.match(/(\d{1,})(?=\.|\x)/g);
(though it may match part of the hash so the url has to be split first)
Apr 2, 2021, 2:14 PM
Now we’re talking
Apr 2, 2021, 2:20 PM
I want to start an “obtuse and ill advised sanity tips” Twitter thread.
Apr 2, 2021, 2:21 PM
aka diwhy
Apr 2, 2021, 9:27 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing