Introducing Edgio Applications v7Find out what's new.
Edgio
Edgio

Image Optimization

Edgio can dynamically transform your images to tailor them to your site’s:
  • Design. You can apply multiple transformations (e.g., resize, blur, crop, and rotate) to a single source image according to how it should be displayed within your site’s design.
  • Experience. For example, if your site has a paywall, you can effortlessly apply a blur effect to requests for images once a site visitor has met or exceeded their allotment of free access.
  • Performance. Balance image quality against performance in order to provide the optimal experience for your users. For example, you can deliver large, high-quality images for desktop users and smaller lower-quality images for mobile users from the same source image.
Edgio caches your transformed images at the edge of our network. This improves performance by reducing image processing and by bringing your optimized images closer to your users.

Quick Start

Optimize images through the following steps:
  1. Analyze your site to identify the images that require optimization.
  2. Enable the Optimize Images feature (optimize_images) for all of the images identified in the previous step.
  3. Disable query string caching through the Cache Key feature to maintain performance by preventing cache key fragmentation.
  4. Define the set of optimizations that will be applied to your images by:
    • Including query string parameters within the request URL.
      Rule-Based Optimizations: One method for dynamically determining the set of optimizations that will be applied to an image is through a rule.
      For example, you may create a rule that resizes all JPG images whose URL path contains /images/.
      Sample rule that resizes images
    • Requesting data from the client through client hints.

How Does It Work?

A client’s request URL determines the set of transformations that will be applied to an image. For example, the following request URL will resize the source image to 500 x 500 and then apply a blur effect to the resized image:
https://docs.edg.io/images/demo.jpg?blur=50&width=500&height=500
The order in which parameters are defined in the request does not affect the order in which they will be applied to the image. Rather, Edgio always uses a predefined order to determine how images are processed.
Upon receiving a request for an optimized image, our CDN will check whether an image with the requested set of optimizations has been cached. If the optimized image has been cached, then it will be delivered immediately to the client. Otherwise, our CDN will apply the requested set of optimizations to the source image, deliver it to the client, and then cache both the source and optimized image. This workflow is illustrated below.
How does it work?

Image Requirements

Restrictions vary according to whether Edgio Image Optimization will process or generate an image.

Source Image Requirements

Images that meet the following requirements are eligible for processing:
  • File Formats: jpg | jpeg | pjpg | pjpeg | png | ppng | webp | tiff | tif
  • Compression: Standard image compression as determined by the image’s file format.
    All other types of data compression (e.g., gzip or brotli) are unsupported. Additionally, Edgio removes the Accept-Encoding header from all transformed images.
  • Maximum File Size: 10 MB
  • Maximum Resolution: 4096 x 4096
  • Color Space: RGB
Our CDN service delivers the source image to the client when it does not satisfy the above requirements.

Optimized Image Limits

An optimized image must comply with the following limits:
  • File Formats: jpg | jpeg | pjpg | pjpeg | png | ppng | webp | tiff | tif
  • Maximum Resolution: 8192 x 8192
Edgio returns an error when an attempting to generate an image that exceeds the above limits.

Enabling Image Optimization

Edgio transforms images when the following conditions are met:
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your edgio.config.js. Learn more about system-defined origins.
To enable image optimization
  1. Customize the cache key to exclude image optimization query string parameters for images that will be processed by Edgio.
    • Rules: Create or modify a rule that includes the Cache Key feature. Configure this feature’s Query Parameters option to either exclude all query string parameters or to only include specific parameters.
      Cache Key feature set to exclude all query string parameters
    • CDN-as-Code:
      JavaScript./routes.js
      1export default new Router().if(
      2 {
      3 edgeControlCriteria: {
      4 in: [{ "request.path": "extension" }, ["jpg", "jpeg", "png", "webp"]],
      5 },
      6 },
      7 { caching: { cache_key: { exclude_all_query_params: true } } }
      8);
    Key information:
    • If you must add query string parameters to the cache key, we recommend that you restrict it to the parameters that are critical to your business needs. This recommendation ensures optimal performance by allowing our CDN to serve more requests from cache. Additionally, it reduces or eliminates unnecessary image processing due to a cache miss.
    • If you are unsure as to whether you have already defined a custom cache key, then you should review your rules for features that modify the cache key.
  2. Enable the Optimize Images feature (optimize_images) for the desired images.
    Edgio removes the Accept-Encoding header from all requests that it processes. If you use this header to compress content, then it is critical that you configure this rule to only apply to images that will be processed by Edgio.
    • Rules: For example, you can create a rule that targets images through the Extension match condition (extension).
      Image Optimization enablement
    • CDN-as-Code:
      JavaScript./routes.js
      1export default new Router().if(
      2 {
      3 edgeControlCriteria: {
      4 in: [{ "request.path": "extension" }, ["jpg", "jpeg", "png", "webp"]],
      5 },
      6 },
      7 {
      8 caching: { cache_key: { exclude_all_query_params: true } },
      9 response: { optimize_images: true },
      10 }
      11);
    If your images do not have file extensions, then consider using the Request Header match condition (request.header) to target images through the Content-Type header.
  3. Deploy your changes.

Query String Parameters

Use the following query string parameters to define the set of optimizations that will be applied to your images:

Order of Operations

Edgio applies the above transformations in the following order:
Trim > Rotate > Resize (Width, Height, DPR, and Fit) > Background Color > Canvas > Pad > Blur > Image Generation (Quality, Strip, and Format)
The above order of operations is only provided to help you gain a deeper understanding of how optimizations interact with each other.

Auto

Automates image optimization. Valid values are:
  • webp: Generates a WebP image when a client indicates WebP image format support through the Accept request header.
    This setting overrides the format query string parameter when a client indicates WebP image format support. Otherwise, the format query string parameter determines the file format for the optimized image.
  • save-data: Applies additional image compression by reducing image quality by 45% when a client requests reduced data usage through the Save-Data request header.
    Unlike other client-driven optimizations, a user controls whether the Save-Data header will be included in the request. For example, Chrome requests on Android will automatically include this header once Data Saver has been enabled.
  • smallest: Delivers the image with the smallest file size, regardless of whether it is the source or the optimized image.
Use a comma to separate multiple values.
Example: ?auto=webp,smallest
Try now.

Bg-color

Sets the background color for transparent content and padding added by pad and canvas.
Syntax:
  • ?bg-color=<COLOR HEX CODE>
  • ?bg-color=<RED>,<GREEN>,<BLUE>[,<ALPHA CHANNEL>]
    <ALPHA CHANNEL> determines the opacity for the background color. Specify a decimal value from 0.0 (transparent) to 1.0 (opaque).
Default value: The default background color is white with an alpha channel of 1.0.
Example: Pass either of the following values to set the background color to dark gray:
  • ?bg-color=4C4C4C
  • ?bg-color=76,76,76
Try now.

Blur

Determines the intensity at which edges within an image will be smoothed. This transformation reduces the level of detail within the image. Valid values are from 1 to 100.
Example: ?blur=20
Try now.

Canvas

Determines the size of the image’s canvas and the position of the optimized image within the canvas.
Syntax: ?canvas=<CANVAS WIDTH>,<CANVAS HEIGHT>,x<X-COORDINATE>,y<Y-COORDINATE>
Key information:
  • You must specify <CANVAS WIDTH> and <CANVAS HEIGHT> when passing this parameter. However, you may omit offset position information.
  • Use this parameter to expand or shrink the optimized image’s canvas.
    • Expand: Specify a dimension that is larger than the source image to pad it. Padding is distributed evenly on opposite sides of the image.
      Example: Expands the height and width dimensions of a 3520 x 2347 image:
      ?canvas=4020,2847
      Try now.
    • Shrink: Specify a dimension that is shorter than the source image to trim it. Our service trims the portion of the image that exceeds the specified canvas size.
      Example: Shrinks the height and width dimensions of a 3520 x 2347 image:
      ?canvas=3020,1847
      Try now.
  • This parameter overrides the pad parameter. You may not pad an image through the pad parameter when you define canvas size.
Default value: By default, the size of the optimized image’s canvas is determined by the source image’s dimensions and the height, width, pad, and trim parameters. Additionally, a default offset is not applied to the optimized image.
Examples:
Pass the following query string to set the canvas size to 640 x 480 for a 3520 x 2347 image:
?canvas=640,480
Try now.
We will now resize the image’s width to 550 pixels:
?canvas=640,480&width=550
Try now.
We will now add a vertical offset of 113 pixels:
?canvas=640,480,y113&width=550
Try now.

Dpr

Device Pixel Ratio (DPR). Scales an image with the intent of matching a device’s resolution. Valid values are from 1 to 10.
Key information:
  • Images cannot be scaled beyond 8192 x 8192. Attempting to scale an image beyond 8192 x 8192 typically indicates a suboptimal configuration. Most devices will need to scale down images that meet or exceed this resolution.
  • Improve performance and save bandwidth by resizing an image and then scaling it to match the device’s resolution through DPR.
  • The DPR request header takes precedence over this parameter.
  • A value of 1 indicates a 1:1 ratio between a device’s physical and logical pixels, while a value of 3 indicates a 3:1 ratio.
    Physical pixels represent the available pixels on the device’s screen.
    Logical pixels represent the number of pixels displayed on the device. For example, if a device’s resolution is scaled by a 3:1 ratio, then the device’s logical pixels is a third of its physical pixels.
  • Edgio does not upscale images.
    Learn more.
Example: Pass the following query string to resize a 3520 x 2347 image to 320 x 213 and then set a 2:1 DPR:
?width=320&dpr=2
The response is a 640 x 427 image.
Try now.

Fit

Determines the method through which the image will be resized to the dimensions defined by the height and width parameters. Valid values are:
  • crop: Centers, resizes, and then crops the image through the following workflow:
    1. Centers the image within the specified region.
    2. Resizes the image to fit or exceed the specified region while preserving aspect ratio.
    3. Crops any portion of the image that exceeds the specified region.
  • cover: Resizes the image to cover or exceed the specified region.
    If the specified region’s aspect ratio does not match the source image, then the optimized image will extend beyond one of the specified dimensions.
  • bounds: Resizes the image to fit within the specified region.
    If the specified region’s aspect ratio doesn’t match the source image, then the optimized image will fall short of one of the specified dimensions.
  • smart: Centers with content awareness, resizes, and then crops the image through the following workflow:
    1. Identifies the image’s subject matter and centers it within the specified region.
    2. Resizes the image to fit or exceed the specified region while preserving aspect ratio.
    3. Crops any portion of the image that exceeds the specified region.
View sample implementations.

Format

Encodes the image to the specified format. Valid values are:
jpg | jpeg | pjpg | pjpeg | png | ppng | webp | tiff | tif
Use pjpg, pjpeg, or ppng to encode a progressive JPEG or PNG image.
Example: ?format=png
Try now.

Height

Sets the height, in pixels, for the optimized image. Valid values are from 1 to 4096.
Maintain the source image’s aspect ratio when resizing an image by specifying either the width or height parameter. Specifying both parameters may cause the optimized image to differ in aspect ratio.
Edgio does not upscale images.
Learn more.
Example: ?height=313
Try now.

Pad

Adds pixels between the edge of the image and its outer border. Specify pad using either of the following units:
  • Pixels
  • Percentage of an optimized image’s dimension. Specify this percentage as a decimal value (e.g., 0.2). For example, setting a value of 0.1 for the top position adds a 10% pad.
Syntax:
  • ?pad=<TOP>,<RIGHT>,<BOTTOM>,<LEFT>
  • You may implicitly apply padding by omitting one or more positions.
    • ?pad=<TOP>,<LEFT & RIGHT>,<BOTTOM>
    • ?pad=<TOP & BOTTOM>,<LEFT & RIGHT>
    • ?pad=<ALL POSITIONS>
Examples:
Pass the following query string to resize a 3520 x 2347 image to 420 x 280 and then apply a 5% pad to the optimized image:
?width=420&pad=0.05
Our service will disproportionately pad the image since its width is larger than its height. 14 pixels (280 x 0.05) will be added to the top and bottom of the image, while 21 pixels (420 x 0.05) will be added to the left and right of the image.
Try now.
Alternatively, pass the following query string to specify the same padding in pixels:
?width=420&pad=14,21
Try now.

Quality

Sets the quality level for an image that uses lossy compression. Valid values are from 1 to 100.
This setting balances an image’s file size with quality. Higher numbers improve image quality while increasing file size. Likewise, lower numbers reduce file size while reducing image quality.
Lossy compression discards image data to reduce file size. For example, jpg and webp are examples of lossy image formats.
Example: ?quality=75
Try now.
Default value: 80

Rotate

Rotates the image clockwise by the specified degrees. Valid values are from 1 to 360.
Example: ?rotate=90
Try now.

Strip

Set to 1 to remove metadata (i.e., EXIF, IPTC-IIM, and XMP) from the image.
Example: ?strip=1
Try now.

Trim

Removes the image’s outer pixels. Specify trim using either of the following units:
  • Pixels
  • Percentage of a source image’s dimension. Specify this percentage as a decimal value (e.g., 0.2). For example, setting a value of 0.1 for the top position removes 10% from the top of the optimized image.
Syntax:
  • ?trim=<TOP>,<RIGHT>,<BOTTOM>,<LEFT>
  • You may implicitly apply trim by omitting one or more positions.
    • ?trim=<TOP>,<LEFT & RIGHT>,<BOTTOM>
    • ?trim=<TOP & BOTTOM>,<LEFT & RIGHT>
    • ?trim=<ALL POSITIONS>
Examples:
Pass the following query string to resize a 3520 x 2347 image to 460 x 307 and then apply a 9% trim to the optimized image:
?width=460&trim=0.09
Our service will disproportionately trim the image since its width is larger than its height. 28 pixels (307 x 0.09) will be removed from the top and bottom of the image, while 41 pixels (460 x 0.09) will be removed from the left and right of the image.
Try now.
Alternatively, pass the following query string to specify the same trim effect in pixels:
?width=460&trim=28,41
Try now.

Width

Sets the width, in pixels, for the optimized image. Valid values are from 1 to 4096.
Data advertised by a client takes precedence over this parameter.
Edgio does not upscale images.
Learn more.
Maintain the source image’s aspect ratio when resizing an image by specifying either the width or height parameter. Specifying both parameters may cause the optimized image to differ in aspect ratio.
Example: ?width=460
Try now.

Wurfl

Set to 1 to automatically define a default width based off what your mobile device can display.
Key information:
  • An image will maintain its aspect ratio when it is resized as a result of this parameter.
  • Both the width and height parameters override this parameter.
  • This parameter is only applicable for mobile devices. It will be ignored when requesting an image from other devices.
Example: ?wurfl=1
Try now.

Client-Driven Image Optimizations (Client Hints)

Image optimizations can be tailored according to information that the client advertises about the user’s device and network conditions.

Setup

Perform the following steps to set up client-driven image optimizations:
  1. Provide client hints by including either an Accept-CH header or <meta> tag in the response sent to the client.
    Key information:
    • Client hints inform the client as to the type of client data that the server will accept.
    • Include an Accept-CH-Lifetime header or <meta> tag to indicate the length of time that the client should remember the supported set of client hints.
    • Use a rule to automatically set the Accept-CH response header through the Set Response Headers feature (set_response_headers). Set the Header Name option to Accept-CH and the Value option to the desired client hints (e.g., DPR, Width, Viewport-Width).
    Response header example:
    Accept-CH: DPR, Viewport-Width, Width, ECT, Downlink
    Accept-CH-Lifetime: 86400
    <meta> tag example:
    <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, ECT, Downlink">
    <meta http-equiv="Accept-CH-Lifetime" content="86400">
  2. Verify that your client advertises the desired data.
    Upon receiving a request for data, a client should respond with the data requested in the Accept-CH response header by including the corresponding request headers (e.g,. DPR and ECT).
  3. Optional. Define a default set of image optimizations through query string parameters.
    Edgio optimizes your images based off both client hints and query string parameters. However, client hints take precedence when conflicting instructions are provided.

Sample Scenario

In this scenario, a web browser receives a response with the following header:
Accept-CH: DPR, ECT
The web browser will interpret this as a request for its device pixel ratio and connection type. As a result, it should submit a request that contains DPR and ECT headers. Sample request headers are shown below.
DPR: 2
ECT: 2g
Edgio will then use this information to optimize the requested image. In this case, it will double the resolution of the source image and reduce image quality by 65%. Edgio will also apply any optimizations defined within the request’s query string.

Request Headers for Client Hints

A client advertises device information and network conditions through request headers. The manner in which Edgio will interpret this data is described below.
  • Downlink: Reduces image quality to 60% and strips metadata when the request includes a Downlink header and it is set to a value below 0.5.
    A Downlink header that meets the above requirement overrides the quality and strip query string parameters.
    The Downlink header indicates the client’s maximum downlink speed in megabits per second (Mbps).
  • DPR: Resizes an image according to the device pixel ratio defined within the DPR request header.
    The DPR request header overrides the dpr query string parameter. Images will be resized according to the dpr query string parameter when the DPR request header is missing.
    Edgio does not upscale images.
    Learn more.
    Sample DPR Request Header:
    The following DPR request header indicates that the client’s ratio of physical pixels to CSS pixels is 2:1.
    DPR: 2
    Edgio will double the resolution of the optimized image.
  • ECT: Reduces image quality to 60% and strips metadata when the request includes an ECT header and it is set to a value other than 4g or 3g. Valid values are:
    4g | 3g | 2g | slow-2g
    An ECT header that meets the above requirement overrides the quality and strip query string parameters.
    The ECT header (Effective Connection Type) describes a client’s connection by indicating the network profile that it most resembles.
  • Save-Data: Reduces quality to 45% and strips metadata when both of the following conditions are met:
    • The request includes a Save-Data header and it is set to On.
      The Save-Data header indicates that less data should be sent.
    • The auto parameter is set to save-data.
    A Save-Data header that meets the above requirement overrides the quality and strip query string parameters.
  • Viewport-Width: Edgio uses the viewport’s width to calculate an image’s dimensions, resolution, or both.
    The Viewport-Width request header overrides the width and height query string parameters.
    The viewport identifies the viewable area of the window where web content is shown.
    Edgio does not upscale images.
    Learn more.
    Example:
    In this example, a web browser advertises information through the following elements:
    • Request Headers:
      DPR: 2
      Viewport-Width: 75vw
    • <img> tag:
      <img src="img_bunny.jpg" alt="bunny hopping in a garden" width="380" height="456">
    Edgio will use this information to resize the image. Specifically, it will calculate the image’s width by doubling the device’s width and then reducing it by 75% to fit within the viewport’s width. In order to maintain aspect ratio, it will apply the same transformations to the image’s height. The dimensions for the resulting image are 570 x 684..
    0.75 * (380 * 2) = 570
    0.75 * (456 * 2) = 684
  • Width: Resizes an image to fit within the width defined within an <img> or <source> tag.
    Edgio does not upscale images.
    Learn more.
    Example:
    In this example, a web browser advertises information through the following <img> tag:
    <img src="img_bunny.jpg" alt="bunny hopping in a garden" width="500" height="600">
    Edgio will resize the image’s width to 500 pixels.

Caching

If your caching configuration allows it, our CDN caches both the source and optimized image. This improves performance for subsequent requests for that image in the same region, regardless of whether different optimizations will be applied to it.
  • Same Optimizations: It allows our CDN to serve subsequent requests for that image with the same set of optimizations from cache. This improves performance by eliminating the need to retrieve the image and then optimize it.
  • Different Optimizations: It allows Edgio to optimize an image without having to retrieve it from an origin server.
Our CDN caches each unique optimized image. Our CDN builds the optimized image’s cache key through its path and the set of transformations that were applied to it.
Key information:
  • Ensure optimal performance by ensuring that image optimization query string parameters are not explicitly added to the cache key.
    We strongly recommend that you avoid setting up query string caching to exclude all query string parameters. This mode prevents our CDN from serving images that have already been processed by Edgio.
    We recommend that you restrict query string caching to query string parameters that are critical to your business needs. This recommendation ensures optimal performance by allowing our CDN to serve more requests from cache. Additionally, it reduces or eliminates unnecessary image processing due to a cache miss.
  • For the purposes of caching an optimized image, our CDN translates the auto query string parameter to reflect the optimizations that will be applied to the image.
    Example: This example assumes that the request contains the following query string:
    ?auto=webp
    If the client indicates that it supports the WebP format, then we will convert the image and cache the WebP image with the following query string:
    ?format=webp
  • For the purposes of caching an optimized image, our CDN translates the client hints provided by a client to reflect the optimizations that will be applied to the image.
    Example: A sample request for a 640 x 480 image contains the following headers:
    DPR: 2
    Width: 320
    These headers instruct Edgio to expand the width of the image to 640 pixels and cache it with the following query string:
    ?width=640
  • In addition to the above optimizations, Edgio normalizes the cache key generated for an optimized image. This step is required to allow our CDN to serve an optimized image from cache regardless of the order in which a set of transformations are defined in the request.
    Example: Edgio will generate the same cache key for both of the following requests:
    https://cdn.example.com/image.jpg?width=640&blur=50
    https://cdn.example.com/image.jpg?blur=50&width=640
  • As a result of the above optimizations and cache key normalization, the default cache key generated by Edgio should provide optimal cache performance.

Response

The response from our CDN varies according to results for the request to optimize an image.
ResponseHTTP Status CodeDescription
Optimized Image200 OKEdgio optimized the requested image. The response will include the following header:
x-edgeio-status: OK
Partially Optimized Image200 OKEdgio only performed some of the requested optimizations. It skipped one or more optimizations since it would have caused the image to be upscaled. The response will include the following headers:
x-edgeio-status: OK
x-edgeio-warning: Images cannot be upscaled. Requested dimensions: <WIDTH> x <HEIGHT>
Source Image200 OKEdgio was unable to optimize the requested image because the optimized image exceeds our limits. Check the request URL and try again. The response will include the following headers:
x-edgeio-status: ERROR
x-edgeio-error: Error Message

Check the x-edgeio-error response header for additional information on why the request failed.
No Image400 Bad RequestEdgio was unable to optimize the requested image due to an unsupported query string parameter or value. Check the request URL and try again. The response will include the following headers:
x-edgeio-status: ERROR
x-edgeio-error: Error Message

Check the x-edgeio-error response header for additional information on why the request failed.
No Image5xxEdgio was unable to communicate with your origin server and both the source and optimized image were not previously cached.

Bypassing Edgio Image Optimization

Prevent Edgio from transforming an image by including the following header in the request:
x-ec-edgeio-disable:1
This configuration allows our CDN to deliver the source image to the client.

Troubleshooting

Perform basic troubleshooting by examining basic properties for the source and transformed image. Include this information in the response by setting the x-ec-edgeio-debug request header to info.
Request header syntax: x-ec-edgeio-debug: info
The above request header instructs Edgio to describe the source and output image within the x-edgeio-info response header.
Sample response header: x-edgeio-info: ifsz=7998538; idim=3520x2347; ifmt=jpeg; ofsz=16980; odim=360x240; ofmt=jpeg; oq=80
The keys defined within the x-edgeio-info response header are described below.
NameDescription
ifszFile Size (Input). Indicates the source image’s file size in bytes.
idimDimensions (Input). Indicates the source image’s dimensions.
Syntax: <WIDTH>x<HEIGHT>
ifmtFile Format (Input). Indicates the source image’s file format.
ofszFile Size (Output). Indicates the output image’s file size in bytes.
odimDimensions (Output). Indicates the output image’s dimensions.
Syntax: <WIDTH>x<HEIGHT>
ofmtFile Format (Output). Indicates the output image’s file format.
oqQuality (Output). Indicates the output image’s file quality level. Valid values are from 1 to 100.
msMilliseconds. Indicates the number of milliseconds it took to transform the image.

Upscaling Images

Edgio does not upscale images. If the requested optimization results in an image that exceeds the dimensions of the source image, then Edgio will not resize it. However, it will still perform any other requested optimizations.

Image Resizing Examples

We will apply different fit modes to a source image (3520 x 2347 pixels) that has been resized to 500 x 500 using the following query string:
?width=500&height=500
Try now.

Crop

Applying crop mode will proportionately crop the width from both sides of the image. This occurs because the source image’s aspect ratio is different than the specified region.
Query string: ?width=500&height=500&fit=crop
Try now.

Cover

Applying cover mode resizes the image’s height to 500 pixels. However, the image’s width will extend beyond the width parameter in order to maintain the source image’s original aspect ratio.
Query string: ?width=500&height=500&fit=cover
Try now.

Bounds

Applying bounds mode resizes the image’s height to 500 pixels. However, the image’s width will fall short of the width parameter in order to maintain the source image’s original aspect ratio while ensuring that the image fits within the specified region.
Query string: ?width=500&height=500&fit=bounds
Try now.

Smart

Applying smart mode centers the image on its subject matter and then proportionally crops the width from both sides of the image. This occurs because the source image’s aspect ratio is different than the specified region.
Query string: ?width=500&height=500&fit=smart
Try now.