Retake the README preview screenshots without palette artifacts (#3277)

.github/workflows/calibreapp-image-actions.yml

@@ -30,5 +30,7 @@ jobs:
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # docs images go through astro:assets, which makes the webp files at build
-          # time; lossy PNG compression here only degrades the source
-          ignorePaths: 'node_modules/**,docs/images/**'
+          # time; lossy PNG compression here only degrades the source.
+          # The README preview screenshots stay lossless: the palette quantization
+          # left visible shapes on the light cards (see #3186)
+          ignorePaths: 'node_modules/**,docs/images/**,shared/static/tabler-preview*.png'

README.md

@@ -46,8 +46,8 @@ Tabler is a set of ready-made layouts, components and demo pages for admin panel
 <p align="center">
 <a href="https://preview.tabler.io" target="_blank">
 <picture>
-<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark.png">
-<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler preview">
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark@2x.png">
+<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview@2x.png" alt="Tabler preview">
 </picture>
 </a>
 </p>

core/README.md

@@ -21,8 +21,8 @@ Free and open source HTML dashboard UI kit built on Bootstrap 5.
 <p align="center">
 <a href="https://preview.tabler.io" target="_blank">
 <picture>
-<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark.png">
-<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler preview">
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark@2x.png">
+<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview@2x.png" alt="Tabler preview">
 </picture>
 </a>
 </p>

docs/content/ui/getting-started/index.mdx

@@ -13,5 +13,5 @@ Tabler is a UI kit for admin panels and dashboards, built on Bootstrap 5. It giv
 
 You don't have to build the common parts of an app interface from scratch. Cards, tables, forms, navigation and the page layouts are ready, and each of them has a dark mode and an RTL version. Tabler is open source under the MIT license and is developed on GitHub, so you can report a bug, send a fix or read the source of any component.
 
-<img src="/static/tabler-preview.png" class="hide-theme-dark" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
-<img src="/static/tabler-preview-dark.png" class="hide-theme-light" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
+<img src="/static/tabler-preview.png" srcset="/static/tabler-preview.png 1x, /static/tabler-preview@2x.png 2x" class="hide-theme-dark" alt="Screencap of tabler site showing global traffic and statistics" width="1440" height="1044" />
+<img src="/static/tabler-preview-dark.png" srcset="/static/tabler-preview-dark.png 1x, /static/tabler-preview-dark@2x.png 2x" class="hide-theme-light" alt="Screencap of tabler site showing global traffic and statistics" width="1440" height="1044" />