Examples of CDN providers configuration.
assets:\n images:\n cdn:\n enabled: true\n account: 'xxxx'\n url: 'https://res.cloudinary.com/%account%/image/fetch/c_limit,w_%width%,q_%quality%,f_%format%,d_default/%image_url%'assets:\n images:\n cdn:\n enabled: true\n account: 'xxxx'\n url: 'https://%account%.cloudimg.io/%image_url%?w=%width%&q=%quality%&force_format=%format%'assets:\n images:\n cdn:\n enabled: true\n account: 'xxxx'\n canonical: false\n remote: false\n url: 'https://%account%.twic.pics/%image_url%?twic=v1/resize=%width%/quality=%quality%/output=%format%'Source URL: Your website baseurl.
assets:\n images:\n cdn:\n enabled: true\n account: 'xxxx'\n canonical: false\n remote: false\n url: 'https://%account%.imgix.net/%image_url%?w=%width%&q=%quality%&fm=%format%'Base URL: Your website baseurl.
https://docs.netlify.com/image-cdn/overview/
\nassets:\n images:\n cdn:\n enabled: true\n canonical: false\n url: '/.netlify/images?url=%image_url%&w=%width%&fm=%format%'npm install netlify-cli -g\nnetlify linknetlify.toml:
[dev]\n targetPort = 8000php cecil.phar serve & netlify devBuilds the HTML img srcset (responsive) attribute of an image Asset.
{{ image_srcset(asset) }}Examples:
\n{% set asset = asset(image_path) %}\n<img src=\"{{ url(asset) }}\" width=\"{{ asset.width }}\" height=\"{{ asset.height }}\" alt=\"\" class=\"asset\" srcset=\"{{ image_srcset(asset) }}\" sizes=\"{{ image_sizes('asset') }}\">Returns the HTML img sizes attribute based on a CSS class name.
\nIt should be use in conjunction with the image_srcset function.
{{ image_sizes('class') }}Examples:
\n{% set asset = asset(image_path) %}\n<img src=\"{{ url(asset) }}\" width=\"{{ asset.width }}\" height=\"{{ asset.height }}\" alt=\"\" class=\"asset\" srcset=\"{{ image_srcset(asset) }}\" sizes=\"{{ image_sizes('asset') }}\">Builds the HTML img element from a website URL by extracting its illustration image.\nReturns null if no image is found.
{{ image_from_website('url', {attributes}, {options}) }}The image is searched in the page HTML with the following fallbacks, the first candidate that can be downloaded as an image is used:
\nog:image:secure_url, og:image, og:image:urltwitter:image, twitter:image:src<link rel=\"image_src\">itemprop=\"image\"image property<img> of <article>, <main> or <body><link rel=\"apple-touch-icon\"><link rel=\"icon\">Relative URLs are resolved against <base href> or the page URL.
The resolved image URL and the downloaded image are cached (see cache.assets.remote.ttl).
Options:
\nfallback: image path (or URL) used if no image is foundimage options (e.g.: responsive, formats)Examples:
\n{{ image_from_website('https://example.com/page-with-image.html') }}\n\n{# with a fallback image #}\n{{ image_from_website('https://example.com/', {alt: 'Illustration'}, {fallback: 'images/default.png'}) }}Resizes an image to a specified width (in pixels) or/and height (in pixels).
\n{{ asset(image_path)|resize(width: width, height: height, remove_animation: bool) }}Examples:
\n{{ asset(page.image)|resize(300) }}\n{# equivalent to: #}\n{{ asset(page.image)|resize(width: 300) }}\n{# resizes to 300px width, height auto-calculated to preserve aspect ratio #}\n{{ asset(page.image)|resize(height: 200) }}\n{# resizes to 300px width and 200px height, and crops if necessary #}\n{{ asset(page.image)|resize(300, 200) }}\n{# removes any animation from the image #}\n{{ asset(page.image)|resize(width: 1200, height: 630, remove_animation: true) }}Resizes an image to a specified width and height, cropping it if necessary.
\n\n{{ asset(image_path)|cover(width, height) }}Example:
\n{{ asset(page.image)|cover(1200, 630) }}Adds padding, in pourcentages, to an image to make it maskable.
\n{{ asset(image_path)|maskable(padding) }}Example:
\n{{ asset('icon.png')|maskable }}Converts an image to WebP format.
\nExample:
\n<picture>\n <source type=\"image/webp\" srcset=\"{{ asset(image_path)|webp }}\">\n <img src=\"{{ url(asset(image_path)) }}\" width=\"{{ asset(image_path).width }}\" height=\"{{ asset(image_path).height }}\" alt=\"\">\n</picture>Converts an image to AVIF format.
\nExample:
\n<picture>\n <source type=\"image/avif\" srcset=\"{{ asset(image_path)|avif }}\">\n <img src=\"{{ url(asset(image_path)) }}\" width=\"{{ asset(image_path).width }}\" height=\"{{ asset(image_path).height }}\" alt=\"\">\n</picture>Returns a Low Quality Image Placeholder (100x100 px, 50% blurred) as data URL.
\n{{ asset(image_path)|lqip }}Returns the dominant hexadecimal color of an image.
\n{{ asset(image_path)|dominant_color }}Add the file content finger print to the file name.
\n{{ asset(path)|fingerprint }}\n{{ path|fingerprint }}Examples:
\n{{ asset('styles.css')|fingerprint }}Minifying a CSS or a JavaScript file.
\n{{ asset(path)|minify }}Examples:
\n{{ asset('styles.css')|minify }}\n{{ asset('scripts.js')|minify }}Minifying a CSS string.
\n{{ variable|minify_css }}{% apply minify_css %}\n{# CSS here #}\n{% endapply %}Examples:
\n{% set styles = 'some CSS here' %}\n{{ styles|minify_css }}<style>\n{% apply minify_css %}\n html {\n background-color: #fcfcfc;\n color: #444;\n }\n{% endapply %}\n</style>Minifying a JavaScript string.
\n{{ variable|minify_js }}{% apply minify_js %}\n{# JavaScript here #}\n{% endapply %}Examples:
\n{% set script = 'some JavaScript here' %}\n{{ script|minify_js }}<script>\n{% apply minify_js %}\n var test = 'test';\n console.log(test);\n{% endapply %}\n</script>Compiles a Sass string to CSS.
\n{{ variable|scss_to_css }}{% apply scss_to_css %}\n{# SCSS here #}\n{% endapply %}Alias: sass_to_css.
Examples:
\n{% set scss = 'some SCSS here' %}\n{{ scss|scss_to_css }}<style>\n{% apply scss_to_css %}\n $color: #fcfcfc;\n div {\n color: lighten($color, 20%);\n }\n{% endapply %}\n</style>Compiles a Sass file to CSS.
\n{{ asset(path)|to_css }}\n{{ path|to_css }}Examples:
\n{{ asset('styles.scss')|to_css }}Outputs the content of an Asset.
\n{{ asset(path)|inline }}Example:
\n{{ asset('styles.css')|inline }}Returns the data URL of an asset.
\n{{ asset(path)|dataurl }}\n{{ asset(image_path)|dataurl }}