From 2289911ecc9330c598e4b1f3f7aa2046d13acf44 Mon Sep 17 00:00:00 2001
From: Nick Sollecito <nsollecito@users.noreply.github.com>
Date: Fri, 10 Apr 2026 16:29:44 -0400
Subject: [PATCH 1/3] Update img.html

---
 layouts/shortcodes/img.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index cde622c1c13..bd3a6a9d8c3 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -20,11 +20,11 @@
 {{- $image_type_arr := split (.Get "src") "." -}}
 {{- $image_ext := index $image_type_arr 1 -}}
 {{- if $wide -}}
-    {{- $.Scratch.Set "imgix_w" "1170" -}}
+    {{- $.Scratch.Set "img_w" "1170" -}}
 {{- else -}}
-    {{- $.Scratch.Set "imgix_w" "850" -}}
+    {{- $.Scratch.Set "img_w" "850" -}}
 {{- end -}}
-{{- $imgix_w := $.Scratch.Get "imgix_w" -}}
+{{- $img_w := $.Scratch.Get "img_w" -}}
 {{- if .Get "img_param" | len -}}
   {{- .Get "img_param" | $.Scratch.Add "img_param" -}}
 {{- else -}}
@@ -42,7 +42,7 @@
 {{- $img_param := $.Scratch.Get "img_param" -}}
 {{- $pop_param := $.Scratch.Get "pop_param" -}}
 {{- $figure_class :=  .Get "figure_class" -}}
-{{ $e := (print $img_resource "?auto=format" | safeURL) }}
+{{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
 {{- if not (eq $img_inline "true")}}
   <div class="shortcode-wrapper shortcode-img expand {{- if $wide -}}wide-parent{{- end -}}"><figure class="text-center {{- if $wide -}}wide {{- end -}}{{ $figure_class -}}" {{- if .Get "figure_style" -}}style="{{- with .Get "figure_style" -}}{{- . | safeCSS -}}{{- end -}}"{{- end -}}>
     {{- if $video -}}
@@ -66,7 +66,7 @@
       {{- if .Get "target" -}}target="{{- with .Get "target" -}}{{- . -}}{{- end -}}"{{- end -}} >
   {{- end -}}
   {{- if $wide -}}
-    {{ $e := (print $img_resource "?auto=format" safeURL) }}
+    {{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
     {{- if eq $image_ext "gif" -}}
       <img class="img-fluid" src="{{ (print $img_resource | safeURL) }}" {{ if .Get "style" }} style="{{ with .Get "style" }}{{ . | safeCSS }}{{end}}" {{ end }} {{ if .Get "alt" }} alt="{{ with .Get "alt"}}{{ . }}{{ end }}" {{ end }} />
     {{- else -}}
@@ -75,7 +75,7 @@
       </picture>
     {{- end -}}
   {{- else -}}
-      {{ $e := (print $img_resource "?auto=format" | safeURL) }}
+      {{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
       {{- if eq $image_ext "gif" -}}
           <img class="img-fluid" src="{{ (print $img_resource | safeURL) }}" {{ if .Get "style" }} style="{{- with .Get "style" -}}{{ . | safeCSS }}{{- end -}}" {{ end }} {{ if .Get "alt" }} alt="{{- with .Get "alt" -}}{{.}}{{- end -}}" {{ end }} />
       {{- else -}}

From 603c21a296140c5638b387f35aeb24666f9274bb Mon Sep 17 00:00:00 2001
From: Nick Sollecito <nsollecito@users.noreply.github.com>
Date: Fri, 10 Apr 2026 16:38:40 -0400
Subject: [PATCH 2/3] Add fit=max, retina srcset, and consolidate $e definition
 in img shortcode

- Add &fit=max to Fastly IO URL to prevent upscaling images smaller than the width cap
- Add $e2x with &dpr=2 for retina displays, applied to all srcset attributes as "1x, 2x" descriptors
- Consolidate triple $e definition into a single assignment; remove redundant inner re-assignments in wide and standard branches

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/shortcodes/img.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index bd3a6a9d8c3..91eada503eb 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -42,7 +42,8 @@
 {{- $img_param := $.Scratch.Get "img_param" -}}
 {{- $pop_param := $.Scratch.Get "pop_param" -}}
 {{- $figure_class :=  .Get "figure_class" -}}
-{{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
+{{- $e := (print $img_resource "?auto=format&fit=max&w=" $img_w | safeURL) -}}
+{{- $e2x := (print $img_resource "?auto=format&fit=max&w=" $img_w "&dpr=2" | safeURL) -}}
 {{- if not (eq $img_inline "true")}}
   <div class="shortcode-wrapper shortcode-img expand {{- if $wide -}}wide-parent{{- end -}}"><figure class="text-center {{- if $wide -}}wide {{- end -}}{{ $figure_class -}}" {{- if .Get "figure_style" -}}style="{{- with .Get "figure_style" -}}{{- . | safeCSS -}}{{- end -}}"{{- end -}}>
     {{- if $video -}}
@@ -66,23 +67,21 @@
       {{- if .Get "target" -}}target="{{- with .Get "target" -}}{{- . -}}{{- end -}}"{{- end -}} >
   {{- end -}}
   {{- if $wide -}}
-    {{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
     {{- if eq $image_ext "gif" -}}
       <img class="img-fluid" src="{{ (print $img_resource | safeURL) }}" {{ if .Get "style" }} style="{{ with .Get "style" }}{{ . | safeCSS }}{{end}}" {{ end }} {{ if .Get "alt" }} alt="{{ with .Get "alt"}}{{ . }}{{ end }}" {{ end }} />
     {{- else -}}
       <picture {{ if .Get "style" }} style="{{- with .Get "style" -}}{{- . | safeCSS -}}{{- end -}}" {{ end }}>
-        <img class="img-fluid" srcset="{{ $e }}" {{ if .Get "style" }} style="{{ with .Get "style" }}{{ . | safeCSS }}{{end}}" {{ end }} {{ if .Get "alt" }} alt="{{ with .Get "alt"}}{{ . }}{{ end }}" {{ end }} />
+        <img class="img-fluid" srcset="{{ $e }} 1x, {{ $e2x }} 2x" {{ if .Get "style" }} style="{{ with .Get "style" }}{{ . | safeCSS }}{{end}}" {{ end }} {{ if .Get "alt" }} alt="{{ with .Get "alt"}}{{ . }}{{ end }}" {{ end }} />
       </picture>
     {{- end -}}
   {{- else -}}
-      {{ $e := (print $img_resource "?auto=format&w=" $img_w | safeURL) }}
       {{- if eq $image_ext "gif" -}}
           <img class="img-fluid" src="{{ (print $img_resource | safeURL) }}" {{ if .Get "style" }} style="{{- with .Get "style" -}}{{ . | safeCSS }}{{- end -}}" {{ end }} {{ if .Get "alt" }} alt="{{- with .Get "alt" -}}{{.}}{{- end -}}" {{ end }} />
       {{- else -}}
         <picture class="" {{ if .Get "style" }} style="{{- with .Get "style" -}}{{- . | safeCSS -}}{{- end -}}" {{ end }} >
           <img 
               class="img-fluid" 
-              srcset="{{ $e }}" 
+              srcset="{{ $e }} 1x, {{ $e2x }} 2x"
               {{ if .Get "style" }}style="{{ with .Get "style" }}{{ . | safeCSS }}{{ end }}" {{ end }} 
               {{- with $img_width -}} width="{{ . }}" {{- end -}}
               {{- with $img_height -}} height="{{ . }}" {{- end -}}
@@ -104,8 +103,8 @@
     </figure>
   </div>
   {{- else -}}
-  <img 
-    srcset="{{ $e }}" 
+  <img
+    srcset="{{ $e }} 1x, {{ $e2x }} 2x"
     {{ if .Get "style" }}style="{{ with .Get "style" }}{{ . | safeCSS }}{{ end }}" {{ end }} 
     {{- with $img_width -}} width="{{ . }}" {{- end -}}
     {{- with $img_height -}} height="{{ . }}" {{- end -}} />

From a69efb219312a83f47dbe74e4d78f2ccbb9e1e1c Mon Sep 17 00:00:00 2001
From: Nick Sollecito <nsollecito@users.noreply.github.com>
Date: Fri, 10 Apr 2026 22:24:03 -0400
Subject: [PATCH 3/3] Remove legacy Imgix ch= client hint params across
 templates and config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Strip ?ch=Width,DPR and ?ch=Width,Save-Data from all Fastly IO URLs — these
were Imgix-specific client hint params not used by Fastly IO. Also rename
the imgix config key to img for CDN-agnostic naming.

Files updated: img.html shortcode, img.html partial, left-nav.html,
platforms.html, vimeo.html, tile-nav.html, config/_default/params.yaml

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/_default/params.yaml               |  8 ++++----
 layouts/partials/img.html                 |  2 +-
 layouts/partials/nav/left-nav.html        | 12 ++++++------
 layouts/partials/platforms/platforms.html |  2 +-
 layouts/shortcodes/img.html               |  2 +-
 layouts/shortcodes/tile-nav.html          | 12 ++++++------
 layouts/shortcodes/vimeo.html             |  2 +-
 7 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/config/_default/params.yaml b/config/_default/params.yaml
index 76e0ed28329..df96a3be2fb 100644
--- a/config/_default/params.yaml
+++ b/config/_default/params.yaml
@@ -2,10 +2,10 @@ environment: default
 # do not delete repo_name, used by websites-modules as context
 repo_name: "documentation"
 integrations_img_url: "https://static.datadoghq.com/static/images/logos/"
-imgix:
-  header_jpg: "?ch=Width&fit=max&fm=jpg&auto=format&lossless=true"
-  header_png: "?ch=Width&fit=max&fm=png&auto=format&lossless=1"
-  header_gif: "?ch=Width,Save-Data&fm=gif"
+img:
+  header_jpg: "?fit=max&fm=jpg&auto=format&lossless=true"
+  header_png: "?fit=max&fm=png&auto=format&lossless=1"
+  header_gif: "?fm=gif"
   jpg: "?fm=jpg&auto=format&lossless=true"
   png: "?fm=png&auto=format&lossless=1"
   gif: ""
diff --git a/layouts/partials/img.html b/layouts/partials/img.html
index 0055db8e5f5..7018bc23971 100644
--- a/layouts/partials/img.html
+++ b/layouts/partials/img.html
@@ -4,7 +4,7 @@
 {{ if .img_param }}
     {{ .root.Scratch.Set "img_param" .img_param }}
 {{ else }}
-    {{ .root.Scratch.Set "img_param" "?ch=Width,DPR&fit=max" }}
+    {{ .root.Scratch.Set "img_param" "?fit=max" }}
 {{ end }}
 {{ $img_param := .root.Scratch.Get "img_param" }}
 
diff --git a/layouts/partials/nav/left-nav.html b/layouts/partials/nav/left-nav.html
index 3b6c63f7ad7..0572fe7331c 100644
--- a/layouts/partials/nav/left-nav.html
+++ b/layouts/partials/nav/left-nav.html
@@ -47,8 +47,8 @@
                                 {{ $url_without_anchor = (index (split .URL "#") 0) }}
                                 <a href="{{ .URL | relLangURL }}" data-path="{{ trim (print $branchPath ((print $url_without_anchor) | relLangURL)) "/" }}" data-skip="{{ .Params.skip | not | not }}">
                                     {{ if .Pre }}
-                                    {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21") -}}
-                                    {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21" "disable_lazy" "true") -}}
+                                    {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21") -}}
+                                    {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21" "disable_lazy" "true") -}}
                                     {{ end }}
                                     <span>{{ .Name }}</span>
                                 </a>
@@ -60,8 +60,8 @@
                                         {{ $url_without_anchor = (index (split .URL "#") 0) }}
                                         <a href="{{ .URL | relLangURL }}" data-type="{{- with site.GetPage .URL -}}{{- .Type -}}{{- end -}}" data-path="{{ trim (print $branchPath ((print $url_without_anchor) | relLangURL)) "/" }}" data-skip="{{ .Params.skip | not | not }}">
                                             {{ if .Pre }}
-                                            {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21") -}}
-                                            {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21" "disable_lazy" "true") -}}
+                                            {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21") -}}
+                                            {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21" "disable_lazy" "true") -}}
                                             {{ end }}
                                             <span>{{ .Name }}</span>
                                         </a>
@@ -77,8 +77,8 @@
                                                     {{ $url_without_anchor = (index (split .URL "#") 0) }}
                                                     <a data-name="{{- delimit (last 1 (split (strings.TrimSuffix "/" .URL) "/")) "" -}}" href="{{ .URL | relLangURL }}" data-path="{{ trim (print $branchPath ((print $url_without_anchor) | relLangURL)) "/" }}" data-skip="{{ .Params.skip | not | not }}">
                                                         {{ if .Pre }}
-                                                        {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21") -}}
-                                                        {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?ch=Width,DPR&fit=max&auto=format&w=21" "disable_lazy" "true") -}}
+                                                        {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) ".png") "class" "static" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21") -}}
+                                                        {{- partial "img.html" (dict "root" $ctx "src" (print "icons/" (.Pre) "_p.png") "class" "hover" "alt" "icon" "width" "21" "img_param" "?fit=max&auto=format&w=21" "disable_lazy" "true") -}}
                                                         {{ end }}
                                                         <span>{{ .Name }}</span>
                                                     </a>
diff --git a/layouts/partials/platforms/platforms.html b/layouts/partials/platforms/platforms.html
index 87a81d35e56..d759951868e 100644
--- a/layouts/partials/platforms/platforms.html
+++ b/layouts/partials/platforms/platforms.html
@@ -66,7 +66,7 @@ <h3>{{ i18n "agent_started_sentence" }}</h3>
                                 <a class="card" href="{{ .link | absLangURL }}">
                                     <div class="card-body text-center">
                                         {{ $src := (print "icons/" .image)}}
-                                        {{ $url := (print ($dot.Site.Params.img_url) "images/" $src "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                                        {{ $url := (print ($dot.Site.Params.img_url) "images/" $src "?fit=max&auto=format") | safeURL }}
                                         <picture class="mx-auto">
                                             <source srcset="{{ $url }}&w=138 1x, {{ $url }}&w=138&dpr=2 2x" media="(min-width: 1200px)">
                                             <source srcset="{{ $url }}&w=108 1x, {{ $url }}&w=108&dpr=2 2x" media="(min-width: 992px)">
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 91eada503eb..62ef7357ca4 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -28,7 +28,7 @@
 {{- if .Get "img_param" | len -}}
   {{- .Get "img_param" | $.Scratch.Add "img_param" -}}
 {{- else -}}
-  {{- $.Scratch.Add "img_param" (printf "?ch=Width,DPR&fit=max") -}}
+  {{- $.Scratch.Add "img_param" (printf "?fit=max") -}}
 {{- end -}}
 {{- if .Get "pop_param" | len -}}
   {{- .Get "pop_param" | $.Scratch.Add "pop_param" -}}
diff --git a/layouts/shortcodes/tile-nav.html b/layouts/shortcodes/tile-nav.html
index 9563884a722..6bae5c5b474 100644
--- a/layouts/shortcodes/tile-nav.html
+++ b/layouts/shortcodes/tile-nav.html
@@ -3,7 +3,7 @@
     <div class="card-deck">
         <a class="card agent" href="{{ "agent/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url) "images/icons/agent.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url) "images/icons/agent.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
@@ -15,7 +15,7 @@
         </a>
         <a class="card integrations" href="{{ "integrations/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url)  "images/icons/integrations.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url)  "images/icons/integrations.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
@@ -28,7 +28,7 @@
         <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
         <a class="card graphing" href="{{ "graphing/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url) "images/icons/graphing.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url) "images/icons/graphing.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
@@ -43,7 +43,7 @@
         <div class="w-100 d-none d-xl-block"><!-- wrap every 3 on xl--></div>
         <a class="card alerting" href="{{ "monitoring/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url) "images/icons/alerting.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url) "images/icons/alerting.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
@@ -56,7 +56,7 @@
         <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
         <a class="card tracing" href="{{ "tracing/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url) "images/icons/tracing_apm.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url) "images/icons/tracing_apm.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
@@ -68,7 +68,7 @@
         </a>
         <a class="card developers" href="{{ "developers/" | absLangURL }}">
             <div class="card-body text-center">
-                {{ $url := (print (.Site.Params.img_url) "images/icons/developers.png"  "?ch=Width,DPR&fit=max&auto=format") | safeURL }}
+                {{ $url := (print (.Site.Params.img_url) "images/icons/developers.png"  "?fit=max&auto=format") | safeURL }}
                 <picture class="mx-auto">
                     <source srcset="{{ $url }}&w=80 1x, {{ $url }}&w=80&dpr=2 2x" media="(min-width: 576px)">
                     <source srcset="{{ $url }}&w=47 1x, {{ $url }}&w=47&dpr=2 2x" media="(min-width: 0px)">
diff --git a/layouts/shortcodes/vimeo.html b/layouts/shortcodes/vimeo.html
index 74241c59227..53cd5774b7d 100644
--- a/layouts/shortcodes/vimeo.html
+++ b/layouts/shortcodes/vimeo.html
@@ -1,7 +1,7 @@
 {{ $posterImg := "" }}
 
 {{- if .Get "poster" -}}
-  {{ $posterImg = (print (.Site.Params.img_url) (.Get "poster")  "?ch=Width,DPR,Save-Data&auto=format,compress&fit=clip&w=1200") | safeURL }}
+  {{ $posterImg = (print (.Site.Params.img_url) (.Get "poster")  "?auto=format,compress&fit=clip&w=1200") | safeURL }}
 {{ else }}
   {{ $posterImg = "/images/poster/tracing.png" }}
 {{ end }}