image_url フィルター（画像リサイズ URL 生成）

{
  "category": "media",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "You can use the `image_url` filter on the following objects, as well as their `src` property:\n\n- [`article`](/docs/api/liquid/objects/article)\n- [`collection`](/docs/api/liquid/objects/collection)\n- [`image`](/docs/api/liquid/objects/image)\n- [`line_item`](/docs/api/liquid/objects/line_item)\n- [`product`](/docs/api/liquid/objects/product)\n- [`variant`](/docs/api/liquid/objects/variant)\n- [`country`](/docs/api/liquid/objects/country)\n\n> Caution:\n> You need to specify either a [`width`](/docs/api/liquid/filters/image_url#image_url-width) or\n> [`height`](/docs/api/liquid/filters/image_url#image_url-height) parameter. If neither are specified, then an error is returned.\n\n> Note:\n> Regardless of the specified dimensions, an image can never be resized to be larger than its original dimensions.",
  "parameters": [
    {
      "description": "How the image should be cropped to match the desired dimensions.",
      "name": "crop",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    },
    {
      "description": "The file format for the image.",
      "name": "format",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    },
    {
      "description": "The padding color, if the provided image is smaller than the requested dimensions.",
      "name": "pad_color",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    },
    {
      "description": "The desired image width, in pixels.",
      "name": "width",
      "positional": false,
      "required": true,
      "types": [
        "number"
      ]
    },
    {
      "description": "The desired image height, in pixels.",
      "name": "height",
      "positional": false,
      "required": true,
      "types": [
        "number"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: width: 450 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "width",
      "description": "Specify the width of the image up to a maximum of `5760px`. If only the width is specified, then the height is automatically calculated based on the image's dimensions.\n",
      "syntax": "variable | image_url: width: number",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: width: 450 }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "height",
      "description": "Specify the height of the image up to a maximum of `5760px`. If only the height is specified, then the width is automatically calculated based on the image's dimensions.\n",
      "syntax": "variable | image_url: height: number",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: height: 450 }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "crop",
      "description": "Specify which part of the image to show if the specified dimensions result in an aspect ratio that differs from the original. You can use the following values:\n\n- `top`\n- `center`\n- `bottom`\n- `left`\n- `right`\n- `region`\n\nThe default value is `center`.\n\nWhen using the `region` crop mode, the starting point for the crop is defined by `crop_left` and `crop_top` and extends to the `crop_width` and `crop_height`.\nOptionally, to resize the region extracted by the crop, use the `width` and `height` parameters.\n\n> Note:\n> Country flags are SVG images and can only be cropped if a value for `format`\n> is also provided.\n",
      "syntax": "variable | image_url: crop: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: width: 400, height: 400, crop: 'bottom' }}\n\n{{ product | image_url: crop: 'region', crop_left: 32, crop_top: 32, crop_width: 512, crop_height: 512 }}\n\n{{ product | image_url: crop: 'region', width: 100, height: 100, crop_left: 32, crop_top: 32, crop_width: 512, crop_height: 512 }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "format",
      "description": "Specify which file format to use for the image. The valid formats are `pjpg` and `jpg`.\n\nIt's not practical to convert a lossy image format, like `jpg`, to a lossless image format, like `png`, so Shopify can do\nonly the following conversions:\n\n- `png` to `jpg`\n- `png` to `pjpg`\n- `jpg` to `pjpg`\n\n> Note:\n> Shopify automatically detects which image formats are supported by the client (e.g. `WebP`, `AVIF`, etc.) and\n> selects a file format for optimal quality and file size. When a format is specified, Shopify takes into account\n> the features (e.g. progressive, alpha channel) of the specified file format when making the final automatic format selection.\n> To learn more, visit https://cdn.shopify.com/.\n",
      "syntax": "variable | image_url: format: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: width: 450, format: 'pjpg' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "pad_color",
      "description": "Specify a color to pad the image if the specified dimensions result in an aspect ratio that differs from the original. The color must be in hexadecimal format (`hex3` or `hex6`).\n",
      "syntax": "variable | image_url: pad_color: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | image_url: width: 400, height: 400, pad_color: '000' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Returns the [CDN URL](/themes/best-practices/performance/platform#shopify-cdn) for an image.",
  "syntax": "variable | image_url: width: number, height: number",
  "name": "image_url"
}