Resizing Airtable Images with Air CDN

Optimizing image loading times is crucial for improving web performance and user experience. Here's how you can optimize your Airtable images using Air CDN.

One effective way to achieve this is by using Air CDN, which supports modern image formats like AVIF and WebP. By default, Air CDN serves images in AVIF format, and falls back to WebP if the browser does not support AVIF. This ensures that images are delivered in the most efficient format for each user.

Setting Explicit Dimensions

To further optimize the delivery, you can explicitly set the width and height parameters in the image URL. This helps Air CDN to serve the exact dimensions needed, reducing unnecessary data transfer and speeding up the loading process. For example, adding &w=1472 to the URL requests the image at a specific width, tailored to your layout requirements.

URL Parameters for Image Configuration

When requesting images, you can use the following URL parameters to customize the delivery and format of the images:

1. fit:

   • Description: Specifies the fitting mode for resizing the image.
   • Type: String
   • Examples:
     • ?fit=cover - The image is resized to cover the entire area without distorting the aspect ratio.
     • ?fit=contain - The image is resized to fit within the given dimensions, maintaining the aspect ratio.
     • ?fit=scale-down - The image is resized to be as small as possible while still covering either the width or height entirely.
     • ?fit=crop - The image is cropped to fill the specified dimensions, potentially removing some parts of the image.
     • ?fit=pad - The image is resized to fit within the given dimensions and padded with a background color to fill the space.

2. w (width):

   • Description: Sets the width of the image in pixels.
   • Type: Integer
   • Examples:
     • ?w=500 - Requests the image with a width of 500 pixels.
     • ?w=1024 - Requests the image with a width of 1024 pixels.

3. h (height):

   • Description: Sets the height of the image in pixels.
   • Type: Integer
   • Examples:
     • ?h=300 - Requests the image with a height of 300 pixels.
     • ?h=768 - Requests the image with a height of 768 pixels.

4. quality:

   • Description: Adjusts the compression quality of the image when applicable.
   • Type: Integer (typically ranging from 1 to 100)
   • Examples:
     • ?quality=85 - Requests the image with a quality setting of 85.
     • ?quality=60 - Requests the image with a quality setting of 60, which might result in smaller file size but lower image quality.

5. format:

   • Description: Specifies the image format to be served, overriding automatic format selection.
   • Type: String
   • Valid Values: "avif", "webp", "jpeg", "auto"
   • Examples:
     • ?format=webp - Forces the image to be served in WebP format.
     • ?format=avif - Forces the image to be served in AVIF format.

Format Selection

The image service automatically selects the most appropriate image format based on the capabilities of your browser unless the format parameter is used to specify a particular format.