diff --git a/documentation/blog/2021-12-22-base64-upload.md b/documentation/blog/2021-12-22-base64-upload.md
index 834b798212e94..bd196bf025ba2 100644
--- a/documentation/blog/2021-12-22-base64-upload.md
+++ b/documentation/blog/2021-12-22-base64-upload.md
@@ -176,7 +176,7 @@ input.addEventListener("change", (e) => {
Here we take data in file format and encode it as Base64. Then we show this encoded image and Base64 encoding output.
-
+
## Live Codesandbox Example
diff --git a/documentation/blog/2022-03-16-internal-tool-frameworks.md b/documentation/blog/2022-03-16-internal-tool-frameworks.md
index 9943029b55bf8..1bf8581489c0e 100644
--- a/documentation/blog/2022-03-16-internal-tool-frameworks.md
+++ b/documentation/blog/2022-03-16-internal-tool-frameworks.md
@@ -90,13 +90,13 @@ npm i @refinedev/core @refinedev/antd
[**Refine** Admin Panel Example](https://example.admin.refine.dev/?current=1&pageSize=5)
-
+
[**Refine** Headless + Tailwind CSS Client(B2C) Example](https://example.refine.dev/)
-
+
## 3. RedwoodJS
@@ -124,7 +124,7 @@ Redwood includes deploy support for Netlify, Vercel, Render.com, AWS and more. B
[Link](https://github.com/redwoodjs/example-blog)
-
+
## 4. React Admin
diff --git a/documentation/blog/2022-03-29-react-hook-form-upload.md b/documentation/blog/2022-03-29-react-hook-form-upload.md
index ba32b0a33bc08..9f78f461fab2e 100644
--- a/documentation/blog/2022-03-29-react-hook-form-upload.md
+++ b/documentation/blog/2022-03-29-react-hook-form-upload.md
@@ -117,7 +117,7 @@ Try [Refine](https://github.com/pankod/refine) to rapidly build your next **CRUD
diff --git a/documentation/blog/2022-05-02-high-quality-free-resources.md b/documentation/blog/2022-05-02-high-quality-free-resources.md
index 419b7f2bab33b..64e0f9478fb10 100644
--- a/documentation/blog/2022-05-02-high-quality-free-resources.md
+++ b/documentation/blog/2022-05-02-high-quality-free-resources.md
@@ -103,7 +103,7 @@ But apart from all these, there is one last item that I want to talk to you abou
**Refine** offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.
-
+
If you're looking for a framework that will let your data- intensive application run at top speeds with extreme customizability, then look no further than refine. This React based headless system has been designed specifically for speed - allowing users to bring their own UI and update it via [Refine's](https://refine.dev/core/docs/) powerful interface!
diff --git a/documentation/blog/2022-08-04-mocking-api-calls.md b/documentation/blog/2022-08-04-mocking-api-calls.md
index eb87231bdbc57..5fb13d1b34bc0 100644
--- a/documentation/blog/2022-08-04-mocking-api-calls.md
+++ b/documentation/blog/2022-08-04-mocking-api-calls.md
@@ -4,7 +4,7 @@ description: How to test API calls in React?
slug: mocking-api-calls-in-react
authors: necati
tags: [react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-08-04-mocking-api-calls/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-08-04-mocking-api-calls/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2022-09-02-sveltekit-crud-app.md b/documentation/blog/2022-09-02-sveltekit-crud-app.md
index 68d822c08fa7c..7e339830dabdb 100644
--- a/documentation/blog/2022-09-02-sveltekit-crud-app.md
+++ b/documentation/blog/2022-09-02-sveltekit-crud-app.md
@@ -421,7 +421,7 @@ Check out [Refine](https://github.com/refinedev/refine), if you are interested i
diff --git a/documentation/blog/2023-01-17-airtable-crud-app.md b/documentation/blog/2023-01-17-airtable-crud-app.md
index 66f4a0a2401e4..8f9ee266bb848 100644
--- a/documentation/blog/2023-01-17-airtable-crud-app.md
+++ b/documentation/blog/2023-01-17-airtable-crud-app.md
@@ -68,7 +68,7 @@ To create a base, click **Add a base**. On creating a base, we will create a tab
-
+
diff --git a/documentation/blog/2023-04-06-finefood-admin-dashboard.md b/documentation/blog/2023-04-06-finefood-admin-dashboard.md
index b636353596316..c3911437ec2df 100644
--- a/documentation/blog/2023-04-06-finefood-admin-dashboard.md
+++ b/documentation/blog/2023-04-06-finefood-admin-dashboard.md
@@ -1829,7 +1829,7 @@ In the code above:
**Output:**
-
+
diff --git a/documentation/blog/2023-07-11-docker-volume.md b/documentation/blog/2023-07-11-docker-volume.md
index 79c1d8a2cfe9f..ecbcee79d6b1e 100644
--- a/documentation/blog/2023-07-11-docker-volume.md
+++ b/documentation/blog/2023-07-11-docker-volume.md
@@ -4,7 +4,7 @@ description: We'll go over the fundamentals of Docker volumes, including what th
slug: docker-volumes
authors: muhammad_khabbab
tags: [docker, dev-tools]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-11-docker-volume/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-11-docker-volume/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2023-07-26-refine-primereact-dashboard.md b/documentation/blog/2023-07-26-refine-primereact-dashboard.md
index 1df459280972a..5f120302a0105 100644
--- a/documentation/blog/2023-07-26-refine-primereact-dashboard.md
+++ b/documentation/blog/2023-07-26-refine-primereact-dashboard.md
@@ -101,7 +101,7 @@ In this blog, we won't be using the generated pages. Instead, we'll build our ad
Once your project is successfully run, you will see the following page:
-
+
## What is PrimeReact?
diff --git a/documentation/blog/2023-09-20-next-ui-panel.md b/documentation/blog/2023-09-20-next-ui-panel.md
index 9902d53960287..bdc0cd96c2a5e 100644
--- a/documentation/blog/2023-09-20-next-ui-panel.md
+++ b/documentation/blog/2023-09-20-next-ui-panel.md
@@ -80,7 +80,7 @@ npm run dev
Once your project is successfully run, you will see the following page:
-
+
### Tidy things up
diff --git a/documentation/blog/2023-10-05-docker-swarm.md b/documentation/blog/2023-10-05-docker-swarm.md
index 0d0bfb51cf59c..05fd32af32c8e 100644
--- a/documentation/blog/2023-10-05-docker-swarm.md
+++ b/documentation/blog/2023-10-05-docker-swarm.md
@@ -203,7 +203,7 @@ Sometimes, while troubleshooting an issue, you might need to view detailed logs
**This command will return the following output:**
-
+
diff --git a/documentation/blog/2023-12-20-web-development.md b/documentation/blog/2023-12-20-web-development.md
index 5389aa929ef27..0d971405bc2b8 100644
--- a/documentation/blog/2023-12-20-web-development.md
+++ b/documentation/blog/2023-12-20-web-development.md
@@ -4,7 +4,7 @@ description: This post depicts a general picture of where web development is hea
slug: web-development
authors: abdullah_numan
tags: [react, comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-20-web-development/social.jpg
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-20-web-development/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2023-12-26-build-an-app.md b/documentation/blog/2023-12-26-build-an-app.md
index 8fc0171795eaa..00d86987e8bae 100644
--- a/documentation/blog/2023-12-26-build-an-app.md
+++ b/documentation/blog/2023-12-26-build-an-app.md
@@ -4,7 +4,7 @@ description: In this article, we will explore some steps you can follow when bui
slug: how-to-build-a-web-app
authors: joseph_mawa
tags: [comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-26-build-an-app/social.jpg
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-26-build-an-app/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2024-01-12-k8s-operators.md b/documentation/blog/2024-01-12-k8s-operators.md
index 91eb581579b6a..0b33d9fb0450c 100644
--- a/documentation/blog/2024-01-12-k8s-operators.md
+++ b/documentation/blog/2024-01-12-k8s-operators.md
@@ -109,7 +109,7 @@ For Windows, the binary is not supported, you will need to use `WSL` on Windows.
See the below screenshot of all these steps that I performed on my Ubuntu:
-
+
### **Creating a New Operator:**
diff --git a/documentation/blog/2024-03-19-ts-shadcn.md b/documentation/blog/2024-03-19-ts-shadcn.md
index 606492123185f..aa37cf266775d 100644
--- a/documentation/blog/2024-03-19-ts-shadcn.md
+++ b/documentation/blog/2024-03-19-ts-shadcn.md
@@ -51,7 +51,7 @@ For example, we can integrate Shadcn within a Refine app with the help of Vite a
## What is Shadcn?
-
+
Shadcn is a React headless UI components generator that can be used for composing bespoke component libraries. It inherently decouples component logic from the JSX markup and bases its styles on top of [TailwindCSS](https://tailwindcss.com/docs/installation). Shadcn is also equipped with tools to generate variant styles necessary of a robust reusable React component library.
@@ -1499,7 +1499,7 @@ Notice how the Shadcn `` variants play well with Refine's resource act
With the Shadcn UI adoption, the `blog_posts` `list` page looks like this:
-
+
Looking good.
diff --git a/documentation/blog/2024-09-11-pnpm-guide.md b/documentation/blog/2024-09-11-pnpm-guide.md
index 0cfd131e101b3..eaf065162c6db 100644
--- a/documentation/blog/2024-09-11-pnpm-guide.md
+++ b/documentation/blog/2024-09-11-pnpm-guide.md
@@ -4,7 +4,7 @@ description: We'll explore pnpm, an efficient alternative to npm.
slug: how-to-use-pnpm
authors: joseph_mawa
tags: [javascript, dev-tools]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-27-pnpm-guide/social.jpg
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-27-pnpm-guide/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2024-09-11-react-virtual-dom.md b/documentation/blog/2024-09-11-react-virtual-dom.md
index 4fc2abfc9e54f..5e1c4b1028c93 100644
--- a/documentation/blog/2024-09-11-react-virtual-dom.md
+++ b/documentation/blog/2024-09-11-react-virtual-dom.md
@@ -4,7 +4,7 @@ description: We'll dive into the concept of a virtual DOM in the React as well a
slug: react-virtual-dom
authors: peter_osah
tags: [react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-23-react-virtual-dom/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-23-react-virtual-dom/social.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2024-09-16-frameworks-2024.md b/documentation/blog/2024-09-16-frameworks-2024.md
index f72809c5dd69c..11a0a6cd54e05 100644
--- a/documentation/blog/2024-09-16-frameworks-2024.md
+++ b/documentation/blog/2024-09-16-frameworks-2024.md
@@ -4,7 +4,7 @@ description: We'll talk about five frameworks – React, Refine, Angular, Svelte
slug: best-front-end-frameworks-in-2024
authors: necati
tags: [comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-11-frameworks-2024/social-2.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-11-frameworks-2024/social-2.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2024-09-17-chakra-ui.md b/documentation/blog/2024-09-17-chakra-ui.md
index 0f1dc8a2c96a7..d49643700e085 100644
--- a/documentation/blog/2024-09-17-chakra-ui.md
+++ b/documentation/blog/2024-09-17-chakra-ui.md
@@ -516,7 +516,7 @@ export const ThemeComp = () => {
The `console.log` in the above code displays all of the application's configurations. It provides complete access to what your application entails. Take a look at the `console.log` result below.
-
+
diff --git a/documentation/blog/2025-02-05-bolt-new.md b/documentation/blog/2025-02-05-bolt-new.md
index 308c35b6894c6..16edbf8adeace 100644
--- a/documentation/blog/2025-02-05-bolt-new.md
+++ b/documentation/blog/2025-02-05-bolt-new.md
@@ -62,7 +62,7 @@ At the heart of Bolt.new is its AI feature. All one has to do is simply enter a
The app will produce the app’s layout and code in a matter of seconds.
-
+
It’s like describing to a friend what you need and having them organize most of the work for you.
diff --git a/documentation/blog/2025-02-12-lovable.md b/documentation/blog/2025-02-12-lovable.md
index 8b0244c8bbcb4..41c51c5062fd6 100644
--- a/documentation/blog/2025-02-12-lovable.md
+++ b/documentation/blog/2025-02-12-lovable.md
@@ -81,7 +81,7 @@ For example:
Lovable will process your input and generate the foundational code for your project
-
+
### 3. Customize the Output
@@ -91,7 +91,7 @@ Your app is given a shareable link so that you can see it live in action.
After Lovable AI has generated the base of your app, you can personalize it. I normally start by modifying the components—adding or removing features as required. If the user interface doesn't feel just right, I spend some time refining it or altering the logic to suit my exact requirements.
-
+
Lovable also provides easy editing with basic tools like undo and version history. You can experiment with changes, roll back if needed, and improve your project step by step. And, if you prefer, you can directly edit code changes in GitHub or your favorite IDE, and Lovable will synchronize everything.
diff --git a/documentation/blog/2025-02-17-replit.md b/documentation/blog/2025-02-17-replit.md
index 77837a3ffe60a..76f2f4d94c540 100644
--- a/documentation/blog/2025-02-17-replit.md
+++ b/documentation/blog/2025-02-17-replit.md
@@ -76,7 +76,7 @@ Unlike other AI web app builders that generate entire applications, **Replit AI
- **Explain Code**: If you’re working with unfamiliar code, you can simply ask the AI to break it down in plain English.
-
+
### 4. Modify and Refactor Code
@@ -90,7 +90,7 @@ Once AI generates a snippet, you’re **not stuck with the first draft** you can
> The AI acts like a **real-time mentor**, guiding you to write **cleaner and more efficient code** without having to leave the editor.
-
+
### 5. Deploy & Share Your Project
diff --git a/documentation/blog/2025-06-24-vibe-coding.md b/documentation/blog/2025-06-24-vibe-coding.md
index fbe29d222addb..debc2ed0ac553 100644
--- a/documentation/blog/2025-06-24-vibe-coding.md
+++ b/documentation/blog/2025-06-24-vibe-coding.md
@@ -4,7 +4,7 @@ description: Ever had a half-formed idea that you just wanted to see in motion,
slug: vibe-coding
authors: ozgur
tags: [ai]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-06-24-vibe-coding/vibe-coding-image.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-06-24-vibe-coding/vibe-coding-image.webp
hide_table_of_contents: false
---
diff --git a/documentation/blog/2025-12-01-tanstack-vs-swr.md b/documentation/blog/2025-12-01-tanstack-vs-swr.md
index d0182459bc273..027e8b02ad34a 100644
--- a/documentation/blog/2025-12-01-tanstack-vs-swr.md
+++ b/documentation/blog/2025-12-01-tanstack-vs-swr.md
@@ -4,7 +4,7 @@ description: What's the difference between React Query, TanStack Query, and SWR?
slug: react-query-vs-tanstack-query-vs-swr-2025
authors: ozgur
tags: [react, tanstack-query, swr, data-fetching, comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-12-01-tanstack-vs-swr/tanstack-vs-swr.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-12-01-tanstack-vs-swr/tanstack-vs-swr.webp
hide_table_of_contents: false
---
diff --git a/documentation/docs/getting-started/overview.md b/documentation/docs/getting-started/overview.md
index 083526cf66451..c8312b6bbcb8a 100644
--- a/documentation/docs/getting-started/overview.md
+++ b/documentation/docs/getting-started/overview.md
@@ -58,7 +58,7 @@ import { MUISandpack } from './example/sandpack';
**Refine** shines when it comes to _data-intensive_ applications like _admin panels_, _dashboards_ and _internal tools_.
-
+
## Key Features
diff --git a/documentation/plugins/templates.js b/documentation/plugins/templates.js
index 5b37c9ac69aaa..2a00ba108e3ee 100644
--- a/documentation/plugins/templates.js
+++ b/documentation/plugins/templates.js
@@ -395,7 +395,7 @@ Since the source code of this RealWorld app is open-source, you have the freedom
slug: "multitenancy-strapi",
title: "Multitenancy App with Strapi",
images: [
- "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.png",
+ "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.webp",
],
runOnYourLocalPath: null,
edition: "Enterprise",
diff --git a/documentation/plugins/templates.ts b/documentation/plugins/templates.ts
index f31bc5d608164..d67ffd7877441 100644
--- a/documentation/plugins/templates.ts
+++ b/documentation/plugins/templates.ts
@@ -393,7 +393,7 @@ Since the source code of this RealWorld app is open-source, you have the freedom
slug: "multitenancy-strapi",
title: "Multitenancy App with Strapi",
images: [
- "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.png",
+ "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.webp",
],
runOnYourLocalPath: null,
edition: "Enterprise",
diff --git a/documentation/versioned_docs/version-4.xx.xx/getting-started/overview.md b/documentation/versioned_docs/version-4.xx.xx/getting-started/overview.md
index 62a5aa4a9ab5c..b1f35bbb31009 100644
--- a/documentation/versioned_docs/version-4.xx.xx/getting-started/overview.md
+++ b/documentation/versioned_docs/version-4.xx.xx/getting-started/overview.md
@@ -58,7 +58,7 @@ import { MUISandpack } from './example/sandpack';
**Refine** shines when it comes to _data-intensive_ applications like _admin panels_, _dashboards_ and _internal tools_.
-
+
## Key Features