Whisk Docs
Whisk HomeHelp CenterDeveloper Tools
v2.0.0
v2.0.0
  • The Whisk Platform
  • Whisk API Overview
    • Introduction
    • Integration
    • Authentication
      • Server Token
      • User Access Token
        • Auth Flow Example
      • Client Token
      • Anonymous Access from Client Apps
    • Whisk Sandbox
    • Getting Started
  • Whisk API Reference 2.0
    • Provisioning
      • Get provisioning
    • Autocomplete
    • Community
      • Get your Communities
      • Get Communities from a Topic
      • Discover Recommended Communities
      • Search Communities
      • Get a Community
      • Get Recipes from a Community
      • Add Recipes to a Community
      • Remove a Recipe from a Community
      • Join a Community
      • Leave a Community
    • Posts and Reviews
      • Get reviews for a recipe
      • Create or edit review
      • Create a Post
      • Get Post by id
      • Delete a Post
      • Edit a Post
      • Report a Post
      • Create a Post Reply
      • Get Post Replies
      • Delete a Post reply
      • Report a Post reply
      • Like a Post or Reply
      • Users who liked a Post or Reply
    • Public profiles
      • Hide recipe in Public profile
      • Get Recipes for Public Profile
      • Get User's public profile by user_id
      • Get User's public profile by username
    • Custom Label
    • Feed
      • Obtain a Recipe Feed
    • Food DB
      • Autocomplete
      • Search
      • Get Food
    • Food List
    • Food Log
    • Foodpairing
    • Healthy meal recommendations
      • Healthy recipe only recommendations for DA
      • Recipe recommendations for SH
      • Tailored Plan API request for Samsung TV
    • Meal Plan
      • Generate a Meal Plan
      • Meal Object
        • Get Meals
        • Delete Meal
        • Add a Meal
      • Meal Plan Settings Object
        • Get Meal Plan Settings
        • Update Meal Plan Settings
      • Meal Plan Batch
    • Recipe
      • Get a Recipe
      • Search a Recipe
      • User Recipes & Collections
        • Add User Recipe
        • Create A Recipe
        • Update External Recipe
        • Get All User Recipes
        • Update User Recipe
        • Remove Recipe from Favorites
        • Create Collection
        • Get All User Collections
        • Get Collection
        • Get Recipes from a Collection
        • Remove Collection
        • Get Smart Collection
        • Get Recipes from a Smart Collection
    • Shopping List
      • Get your Shopping Lists
      • Get a Shopping List
      • Create a Shopping List
      • Delete a Shopping List
      • Update basic details of a Shopping List
      • Move Items between Shopping Lists
      • Add Items to a Shopping List
      • Delete an Item from a Shopping List
      • Update an Item in a Shopping List
      • Clear Items from a Shopping List
    • Media
    • Store Item
    • Unit Conversion
    • Users
      • Get a User
      • Update User Settings using Patch
      • Update User Settings using Post
    • Try it out!
  • Shopping List SDK
    • Overview
    • Examples
      • Shoppable Recipes
      • Shoppable Products
      • Shoppable Media
    • Basic Setup
      • Basic Setup
      • Methods
      • Event Listeners
      • Widget
      • Subscriptions
      • Global Configuration
      • UTM Parameters
      • Using With SPA
  • Shopping List Mobile API
    • Overview
    • Examples
    • Reference
  • API Resources
    • Authentication Scopes
    • Errors and Troubleshooting
    • Cursor Pagination
    • Limits
    • Nutrients
    • Recipe Labels
    • Filtering Recipes using Custom Labels
    • Health Score, Glycemic Index, Glycemic Load
    • Whisk User Data
    • Integrated Retailers
    • Optimizing Image Load
    • Meal Plan
Powered by GitBook
On this page
  • Speed
  • Secure protocol
  • Improved UX
  • Graceful image loading technique
  • Image transformation
  • resize
  • crop
  • fixed coordinates cropping
  • blur
  • Set Device Pixel Ratio (DPR)
  • tint
  • Data Structures
  • ImageContainer
  • ResponsiveImage

Was this helpful?

  1. API Resources

Optimizing Image Load

PreviousIntegrated RetailersNextMeal Plan

Last updated 5 years ago

Was this helpful?

Whisk is utilizing CDN when it comes to serving images whether they are Whisk-internal or coming from third-party sources. That provides certain benefits:

Speed

  1. By using distributed across world network, we make sure images are served from locations which are close to end-user

  2. Because of images served from the single domain, a browser doesn't need to perform DNS-resolution for many different domains

  3. Images are served over HTTP/2 protocol, which is super-optimal for loading multiple images at once (e.g. when displaying Recipe Feed)

Secure protocol

All images are served securely through HTTPS (HTTP/2-ready), that provides guarantees that the browser will not provide any warnings about insecure content

Improved UX

  1. In addition to fast baseline speed, a client can choose which image size to load depending on its needs. For example, it is unnecessary to load a big recipe image if you only need to request a thumbnail.

  2. By knowing image parameters in advance, a client application can prepare an optimal layout for displaying a content image.

  3. It is possible to implement graceful image loading by first requesting a lower-quality image and showing it as soon as possible to the end-user. Then when a higher-res image is loaded, the previous image can be replaced.

To see how graceful image loading works in Whisk, it is best to see a demo:

Graceful image loading technique

Download temporary image: We show an image with the following transformation first:

<img alt class="ImageIsLoading" src="https://whisk-res.cloudinary.com/image/upload/c_fill,q_50,f_auto,e_blur:1000,w_200,h_200/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg">

where e_bluris a blur effect (range: 1 to 2000, Default: 500), q_50is image quality (range: 1 to 100), f_auto(optional) is the file extension of the requested delivery format for the resource.

Download full image: At the same time, we’re downloading full image. Once it has been downloaded we display it.

Image transformation

resize

https://whisk-res.cloudinary.com/image/upload/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

You can request alternative size (300x300) by modifying url to:

https://whisk-res.cloudinary.com/image/upload/w_300,h_300,c_fill/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

crop

You can extract a region of the given width and height out of the original image. The original proportions are retained and so is the size of the graphics. You can specify the gravity parameter to select which part of the image to extract, or use fixed coordinates cropping.

For example, the jpg image cropped to a width of 300 pixels, a height of 300 pixels, with west gravity:

https://whisk-res.cloudinary.com/image/upload/w_300,h_350,c_crop,g_west/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

fixed coordinates cropping

You can specify a region of the original image to crop by giving the x and y coordinates of the top left corner of the region together with the width and height of the region. You can also use percentage-based numbers instead of the exact coordinates for x, y, w, and h (e.g., 0.5 for 50%). Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.

https://whisk-res.cloudinary.com/image/upload/x_480,y_250,w_300,h_200,c_crop/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

blur

To apply a strong blurring filter (300) to the sample image:

https://whisk-res.cloudinary.com/image/upload/e_blur:300,w_300,h_300,c_fill/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

Set Device Pixel Ratio (DPR)

Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying an image, resulting in a clearer, sharper image.

Use the dprparameter to set the DPR value of the delivered image. The parameter accepts a numeric value specifying the DPR multiplier.

https://whisk-res.cloudinary.com/image/upload/dpr_2.0,w_150,h_150,c_fill/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

tint

The tint: effect enables you to blend your images with one or more colors and specify the blend strength. By default, e_tint applies a red color at 60% blend strength.

Specify the colors and blend strength amount in the format:

e_tint:[amount]:[color1]:[color2]:...:[color10],

amount is a value from 0-100, where 0 keeps the original color and 100 blends the specified colors completely.

The color can be specified as an RGB hex triplet (e.g., rgb: 3e2222), a 3-digit RGB hex (e.g., rgb: 777) or a named color (e.g., green).

For example:

https://whisk-res.cloudinary.com/image/upload/e_tint:80:white,w_300,h_300,c_fill/v1523012419/recipe/58dd7f2ce37014c67e6550352839da9b.jpg

Data Structures

ImageContainer

ImageContainer is Whisk's common wrapper around the original image

ATTRIBUTE

TYPE

DESCRIPTION

url*

string

original image url, depricated. Please use field original instead

original

OriginalImage

original image information, e.g. image url

responsive*

ResponsiveImage

Example:

{
  "url": "https://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe_images/omelette-pancakes-with-tomato-pepper-sauce.jpg",
  "responsive": {
    "url": "https://whisk-res.cloudinary.com/image/upload/v1523012138/recipe/758058656142eaae402f1781e18c527c.jpg",
    "width": 500,
    "height": 454
  }
}

ResponsiveImage

ResponsiveImage contains hosted secure URL and provides information about original image dimensions

ATTRIBUTE

TYPE

DESCRIPTION

url*

string

Hosted URL of an image

width*

integer

Image width

height*

integer

Image height

Assuming that URL has a form of:

To manipulate so that only little white cup is visible, the image is cropped to a 300x200 region starting at the coordinate x = 480 and y = 250:

base image (960x1280)
the picture
Temporary image (1.4 kb)
Full image (6.4 kb)
Alternative size (300x300)
Cropped image
Cropped image
Blurred image
image alt text
150x150 image with DPR 2.0
Image with tint effect