{ "version": "https://jsonfeed.org/version/1.1", "title": "Cecil - Assets", "home_page_url": "https://cecil.app/fr/documentation/assets/", "feed_url": "https://cecil.app/fr/documentation/assets/feed.json", "description": "Manipulez les assets (images, feuilles de style, scripts, etc.) avec la fonction asset() : traitement, optimisation et empreinte.", "icon": "https://cecil.app/favicon.7ff4b89eec6dad139a7d2d6561543285.png", "favicon": "https://cecil.app/thumbnails/64x/favicon.7ff4b89eec6dad139a7d2d6561543285.png", "language": "fr", "items": [ { "id": "https://cecil.app/fr/documentation/assets/images/", "url": "https://cecil.app/fr/documentation/assets/images/", "title": "Images", "summary": "Redimensionnez, recadrez et convertissez les images, générez des images responsives et des placeholders.", "date_published": "2026-05-26T00:00:00+00:00", "date_modified": "2026-10-05T00:00:00+00:00","content_text": "Images\nimage_srcset\nConstruit l'attribut HTML img srcset (responsive) d'un élément d'image.\n{{ image_srcset(asset) }}\nExemples :\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') }}\">\nimage_sizes\nRenvoie l'attribut HTML img sizes basé sur un nom de classe CSS.\nIl doit être utilisé conjointement avec la fonction image_srcset.\n{{ image_sizes('class') }}\nExemples :\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') }}\">\nimage_from_website\nConstruit l'élément HTML img à partir d'une URL de site Web en extrayant son image d'illustration.\nRetourne null si aucune image n'est trouvée.\n{{ image_from_website('url', {attributs}, {options}) }}\nL'image est recherchée dans le HTML de la page avec les fallbacks suivants, le premier candidat pouvant être téléchargé en tant qu'image est utilisé :\n\nOpen Graph : og:image:secure_url, og:image, og:image:url\nTwitter : twitter:image, twitter:image:src\n<link rel=\"image_src\">\nMicrodata : itemprop=\"image\"\nJSON-LD : propriété image\nPremière <img> de <article>, <main> ou <body>\n<link rel=\"apple-touch-icon\">\n<link rel=\"icon\">\n\nLes URL relatives sont résolues par rapport à <base href> ou à l'URL de la page.\nL'URL de l'image trouvée et l'image téléchargée sont mises en cache (voir cache.assets.remote.ttl).\nOptions :\n\nfallback : chemin (ou URL) de l'image utilisée si aucune image n'est trouvée\nautres options de image (ex. : responsive, formats)\n\nExemples :\n{{ image_from_website('https:\/\/example.com\/page-with-image.html') }}\n\n{# avec une image de fallback #}\n{{ image_from_website('https:\/\/example.com\/', {alt: 'Illustration'}, {fallback: 'images\/default.png'}) }}\nresize\nRedimensionne une image à une largeur (en pixels) ou\/et une hauteur (en pixels) spécifiée.\n\nSi seule la largeur est spécifiée, la hauteur est calculée pour conserver le rapport hauteur\/largeur\nSi seule la hauteur est spécifiée, la largeur est calculée pour conserver le rapport hauteur\/largeur\nSi la largeur et la hauteur sont spécifiées, l'image est redimensionnée pour s'adapter aux dimensions données, l'image est recadrée et centrée si nécessaire\nSi Remove_animation est vrai, toute animation dans l'image (par exemple, GIF) sera supprimée\n\n{{ asset(image_path)|resize(width: width, height: height, remove_animation: bool) }}\nLe fichier original n'est pas modifié et la version redimensionnée est enregistrée sous \/thumbnails\/<width>x<height>\/image.jpg.\nLes fichiers ICO sont supportés : la plus grande icône est redimensionnée et enregistrée dans un fichier ICO à icône unique (compressée en PNG). Les icônes stockées en BMP avec une profondeur de couleur autre que 24 ou 32 bits nécessitent l'extension PHP Imagick : à défaut, le fichier ICO original est conservé et un avertissement est journalisé.\nExemples :\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) }}\ncover\nRedimensionne une image à une largeur et une hauteur spécifiées, en la recadrant si nécessaire.\nLe filtre cover est obsolète depuis la version 8.77 et sera supprimé dans les versions futures. Utilisez plutôt le filtre resize, avec les paramètres de largeur et de hauteur.\n{{ asset(image_path)|cover(width, height) }}\nExemple:\n{{ asset(page.image)|cover(1200, 630) }}\nmaskable\nAjoute un remplissage, en pourcentages, à une image pour la rendre masquable.\n{{ asset(image_path)|maskable(padding) }}\nExemple:\n{{ asset('icon.png')|maskable }}\nwebp\nConvertit une image au format WebP.\nExemple:\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>\navif\nConvertit une image au format AVIF.\nExemple:\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>\nlqip\nRenvoie un espace réservé pour une image de faible qualité (100 x 100 px, flou à 50 %) comme URL de données.\n{{ asset(image_path)|lqip }}\ndominant_color\nRenvoie la couleur hexadécimale dominante d'une image.\n{{ asset(image_path)|dominant_color }}", "content_html": "

Images

\n

image_srcset

\n

Construit l'attribut HTML img srcset (responsive) d'un élément d'image.

\n
{{ image_srcset(asset) }}
\n

Exemples :

\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') }}\">
\n

image_sizes

\n

Renvoie l'attribut HTML img sizes basé sur un nom de classe CSS.\nIl doit être utilisé conjointement avec la fonction image_srcset.

\n
{{ image_sizes('class') }}
\n

Exemples :

\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') }}\">
\n

image_from_website

\n

Construit l'élément HTML img à partir d'une URL de site Web en extrayant son image d'illustration.\nRetourne null si aucune image n'est trouvée.

\n
{{ image_from_website('url', {attributs}, {options}) }}
\n

L'image est recherchée dans le HTML de la page avec les fallbacks suivants, le premier candidat pouvant être téléchargé en tant qu'image est utilisé :

\n
    \n
  1. Open Graph : og:image:secure_url, og:image, og:image:url
    2. \n
  2. Twitter : twitter:image, twitter:image:src
    3. \n
  3. <link rel=\"image_src\">
    4. \n
  4. Microdata : itemprop=\"image\"
    5. \n
  5. JSON-LD : propriété image
    6. \n
  6. Première <img> de <article>, <main> ou <body>
    7. \n
  7. <link rel=\"apple-touch-icon\">
    8. \n
  8. <link rel=\"icon\">
    9. \n
\n

Les URL relatives sont résolues par rapport à <base href> ou à l'URL de la page.

\n

L'URL de l'image trouvée et l'image téléchargée sont mises en cache (voir cache.assets.remote.ttl).

\n

Options :

\n\n

Exemples :

\n
{{ image_from_website('https://example.com/page-with-image.html') }}\n\n{# avec une image de fallback #}\n{{ image_from_website('https://example.com/', {alt: 'Illustration'}, {fallback: 'images/default.png'}) }}
\n

resize

\n

Redimensionne une image à une largeur (en pixels) ou/et une hauteur (en pixels) spécifiée.

\n\n
{{ asset(image_path)|resize(width: width, height: height, remove_animation: bool) }}
\n\n\n

Exemples :

\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) }}
\n

cover

\n

Redimensionne une image à une largeur et une hauteur spécifiées, en la recadrant si nécessaire.

\n\n
{{ asset(image_path)|cover(width, height) }}
\n

Exemple:

\n
{{ asset(page.image)|cover(1200, 630) }}
\n

maskable

\n

Ajoute un remplissage, en pourcentages, à une image pour la rendre masquable.

\n
{{ asset(image_path)|maskable(padding) }}
\n

Exemple:

\n
{{ asset('icon.png')|maskable }}
\n

webp

\n

Convertit une image au format WebP.

\n

Exemple:

\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>
\n

avif

\n

Convertit une image au format AVIF.

\n

Exemple:

\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>
\n

lqip

\n

Renvoie un espace réservé pour une image de faible qualité (100 x 100 px, flou à 50 %) comme URL de données.

\n
{{ asset(image_path)|lqip }}
\n

dominant_color

\n

Renvoie la couleur hexadécimale dominante d'une image.

\n
{{ asset(image_path)|dominant_color }}
", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/assets/traitements/", "url": "https://cecil.app/fr/documentation/assets/traitements/", "title": "CSS, JavaScript et traitements", "summary": "Compilez Sass, minifiez, ajoutez une empreinte, intégrez ou embarquez les assets.", "date_published": "2026-05-26T00:00:00+00:00", "date_modified": "2026-10-05T00:00:00+00:00","content_text": "CSS, JavaScript et traitements\nfingerprint\nAjoutez l'empreinte digitale du contenu du fichier au nom du fichier.\n{{ asset(path)|fingerprint }}\n{{ path|fingerprint }}\nExemples :\n{{ asset('styles.css')|fingerprint }}\nminify\nRéduire un fichier CSS ou JavaScript.\n{{ asset(path)|minify }}\nExemples :\n{{ asset('styles.css')|minify }}\n{{ asset('scripts.js')|minify }}\nminify_css\nRéduire une chaîne CSS.\n{{ variable|minify_css }}\n{% apply minify_css %}\n{# CSS here #}\n{% endapply %}\nExemples :\n{% set styles = 'some CSS here' %}\n{{ styles|minify_css }}\n<style>\n{% apply minify_css %}\n html {\n background-color: #fcfcfc;\n color: #444;\n }\n{% endapply %}\n<\/style>\nminify_js\nRéduire une chaîne JavaScript.\n{{ variable|minify_js }}\n{% apply minify_js %}\n{# JavaScript here #}\n{% endapply %}\nExemples :\n{% set script = 'some JavaScript here' %}\n{{ script|minify_js }}\n<script>\n{% apply minify_js %}\n var test = 'test';\n console.log(test);\n{% endapply %}\n<\/script>\nscss_to_css\nCompile une chaîne Sass en CSS.\n{{ variable|scss_to_css }}\n{% apply scss_to_css %}\n{# SCSS here #}\n{% endapply %}\nAlias : sass_to_css.\nExemples :\n{% set scss = 'some SCSS here' %}\n{{ scss|scss_to_css }}\n<style>\n{% apply scss_to_css %}\n $color: #fcfcfc;\n div {\n color: lighten($color, 20%);\n }\n{% endapply %}\n<\/style>\nto_css\nCompile un fichier Sass en CSS.\n{{ asset(path)|to_css }}\n{{ path|to_css }}\nExemples :\n{{ asset('styles.scss')|to_css }}\ninline\nAffiche le contenu d'un Asset.\n{{ asset(path)|inline }}\nExemple:\n{{ asset('styles.css')|inline }}\ndataurl\nRenvoie l'URL de données d'un actif.\n{{ asset(path)|dataurl }}\n{{ asset(image_path)|dataurl }}", "content_html": "

CSS, JavaScript et traitements

\n

fingerprint

\n

Ajoutez l'empreinte digitale du contenu du fichier au nom du fichier.

\n
{{ asset(path)|fingerprint }}\n{{ path|fingerprint }}
\n

Exemples :

\n
{{ asset('styles.css')|fingerprint }}
\n

minify

\n

Réduire un fichier CSS ou JavaScript.

\n
{{ asset(path)|minify }}
\n

Exemples :

\n
{{ asset('styles.css')|minify }}\n{{ asset('scripts.js')|minify }}
\n

minify_css

\n

Réduire une chaîne CSS.

\n
{{ variable|minify_css }}
\n
{% apply minify_css %}\n{# CSS here #}\n{% endapply %}
\n

Exemples :

\n
{% set styles = 'some CSS here' %}\n{{ styles|minify_css }}
\n
<style>\n{% apply minify_css %}\n  html {\n    background-color: #fcfcfc;\n    color: #444;\n  }\n{% endapply %}\n</style>
\n

minify_js

\n

Réduire une chaîne JavaScript.

\n
{{ variable|minify_js }}
\n
{% apply minify_js %}\n{# JavaScript here #}\n{% endapply %}
\n

Exemples :

\n
{% set script = 'some JavaScript here' %}\n{{ script|minify_js }}
\n
<script>\n{% apply minify_js %}\n  var test = 'test';\n  console.log(test);\n{% endapply %}\n</script>
\n

scss_to_css

\n

Compile une chaîne Sass en CSS.

\n
{{ variable|scss_to_css }}
\n
{% apply scss_to_css %}\n{# SCSS here #}\n{% endapply %}
\n

Alias : sass_to_css.

\n

Exemples :

\n
{% set scss = 'some SCSS here' %}\n{{ scss|scss_to_css }}
\n
<style>\n{% apply scss_to_css %}\n  $color: #fcfcfc;\n  div {\n    color: lighten($color, 20%);\n  }\n{% endapply %}\n</style>
\n

to_css

\n

Compile un fichier Sass en CSS.

\n
{{ asset(path)|to_css }}\n{{ path|to_css }}
\n

Exemples :

\n
{{ asset('styles.scss')|to_css }}
\n

inline

\n

Affiche le contenu d'un Asset.

\n
{{ asset(path)|inline }}
\n

Exemple:

\n
{{ asset('styles.css')|inline }}
\n

dataurl

\n

Renvoie l'URL de données d'un actif.

\n
{{ asset(path)|dataurl }}\n{{ asset(image_path)|dataurl }}
", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/assets/fournisseurs-cdn/", "url": "https://cecil.app/fr/documentation/assets/fournisseurs-cdn/", "title": "Fournisseurs de CDN", "summary": "Exemples de configuration de fournisseurs de CDN d’images (Cloudinary, Cloudimage, TwicPics, imgix, Netlify Image CDN).", "date_published": "2023-10-23T00:00:00+00:00", "date_modified": "2026-10-02T00:00:00+00:00","content_text": "Fournisseurs de CDN\nExemples de configuration de fournisseurs de CDN pour les options de configuration.\nCloudinary\nhttps:\/\/cloudinary.com\nassets:\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%'\nCloudimage\nhttps:\/\/www.cloudimage.io\nassets:\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%'\nTwicPics\nhttps:\/\/www.twicpics.com\nassets:\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%'\nSource URL : URL de base de votre site.\nimgix\nhttps:\/\/imgix.com\nassets:\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%'\nBase URL : URL de base de votre site.\nNetlify Image CDN\nhttps:\/\/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%'\nExécution en local\nInstaller Netlify CLI\nnpm install netlify-cli -g\nnetlify link\nnetlify.toml :\n[dev]\n targetPort = 8000\nDémarrer le serveur local\nphp cecil.phar serve & netlify dev\nOuvrez http:\/\/localhost:8888", "content_html": "

Fournisseurs de CDN

\n

Exemples de configuration de fournisseurs de CDN pour les options de configuration.

\n

Cloudinary

\n

https://cloudinary.com

\n
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%'
\n

Cloudimage

\n

https://www.cloudimage.io

\n
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%'
\n

TwicPics

\n

https://www.twicpics.com

\n
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%'
\n

Source URL : URL de base de votre site.

\n

imgix

\n

https://imgix.com

\n
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%'
\n

Base URL : URL de base de votre site.

\n

Netlify Image CDN

\n

https://docs.netlify.com/image-cdn/overview/

\n
assets:\n  images:\n    cdn:\n      enabled: true\n      canonical: false\n      url: '/.netlify/images?url=%image_url%&w=%width%&fm=%format%'
\n

Exécution en local

\n

Installer Netlify CLI

\n
npm install netlify-cli -g\nnetlify link
\n

netlify.toml :

\n
[dev]\n  targetPort = 8000
\n

Démarrer le serveur local

\n
php cecil.phar serve & netlify dev
\n

Ouvrez http://localhost:8888

", "language": "fr" } ] }