Skip to content

feat: update image formats to WebP across documentation and templates #7230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alicanerdurmaz merged 1 commit into from
Jan 22, 2026
Merged

feat: update image formats to WebP across documentation and templates #7230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion documentation/blog/2021-12-22-base64-upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-22-base64-upload/overview.png" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-22-base64-upload/overview.webp" alt="overview" />
<br />

## Live Codesandbox Example
Expand Down
6 changes: 3 additions & 3 deletions documentation/blog/2022-03-16-internal-tool-frameworks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@ npm i @refinedev/core @refinedev/antd

[**Refine** Admin Panel Example](https://example.admin.refine.dev/?current=1&pageSize=5)

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/refine-admin-panel.png" alt="Refine Admin Panel Example" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/refine-admin-panel.webp" alt="Refine Admin Panel Example" />

<br/>

[**Refine** Headless + Tailwind CSS Client(B2C) Example](https://example.refine.dev/)

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/refine_client.png" alt="Refine Client Example" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/refine_client.webp" alt="Refine Client Example" />

## 3. RedwoodJS

Expand Down Expand Up @@ -124,7 +124,7 @@ Redwood includes deploy support for Netlify, Vercel, Render.com, AWS and more. B

[Link](https://github.com/redwoodjs/example-blog)

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/redwood.png" alt="Redwood Example" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-16-internal-tool-frameworks/redwood.webp" alt="Redwood Example" />

## 4. React Admin

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-03-29-react-hook-form-upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ Try [Refine](https://github.com/pankod/refine) to rapidly build your next **CRUD

<div>
<a href="https://github.com/pankod/refine">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/generic_banner.png" alt="refine blog logo" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/generic_banner.webp" alt="refine blog logo" />
</a>
</div>

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-05-02-high-quality-free-resources.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-05-02-high-quality-free-resources/refine.jpg" alt="refine" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-05-02-high-quality-free-resources/refine.webp" alt="refine" />

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!

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-08-04-mocking-api-calls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-09-02-sveltekit-crud-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ Check out [Refine](https://github.com/refinedev/refine), if you are interested i

<div>
<a href="https://github.com/refinedev/refine">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/refine_blog_logo_1.png" alt="refine blog logo" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/refine_blog_logo_1.webp" alt="refine blog logo" />
</a>
</div>

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-01-17-airtable-crud-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ To create a base, click **Add a base**. On creating a base, we will create a tab

<br />

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-18-airtable-crud-app/create_table.jpeg" alt="react crud app airtable" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-18-airtable-crud-app/create_table.webp" alt="react crud app airtable" />

<br />
<br />
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-04-06-finefood-admin-dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1829,7 +1829,7 @@ In the code above:
**Output:**

<div className="centered-image" >
<img style={{alignSelf:"center", width: "450px"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog%2F2023-04-04-finefoods-admin-dashboard%2Fmap.png" alt="react admin dashboard" />
<img style={{alignSelf:"center", width: "450px"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog%2F2023-04-04-finefoods-admin-dashboard%2Fmap.webp" alt="react admin dashboard" />
</div>

<br/>
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-07-11-docker-volume.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-07-26-refine-primereact-dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div className="flex justify-center">
<img alt="React admin panel" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/fresh-project.jpg" className="border border-gray-200 rounded" />
<img alt="React admin panel" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/fresh-project.webp" className="border border-gray-200 rounded" />
</div>

## What is PrimeReact?
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-09-20-next-ui-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ npm run dev
Once your project is successfully run, you will see the following page:

<div className="flex justify-center">
<img alt="React admin panel next ui" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/fresh-project.jpg" className="border border-gray-200 rounded" />
<img alt="React admin panel next ui" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/fresh-project.webp" className="border border-gray-200 rounded" />
</div>

### Tidy things up
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-10-05-docker-swarm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ Sometimes, while troubleshooting an issue, you might need to view detailed logs
**This command will return the following output:**

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-05-docker-swarm/monitoring-2.png" alt="docker swarm" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-05-docker-swarm/monitoring-2.webp" alt="docker swarm" />
</div>

<br/>
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-12-20-web-development.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2023-12-26-build-an-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2024-01-12-k8s-operators.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-01-12-k8s-operators/image2.png" alt="installing operator sdk" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-01-12-k8s-operators/image2.webp" alt="installing operator sdk" />
</div>

### **Creating a New Operator:**
Expand Down
4 changes: 2 additions & 2 deletions documentation/blog/2024-03-19-ts-shadcn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ For example, we can integrate Shadcn within a Refine app with the help of Vite a
## What is Shadcn?

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-03-19-ts-shadcn/shadcn.jpeg" alt="shadcn ui" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-03-19-ts-shadcn/shadcn.webp" alt="shadcn ui" />
</div>
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.

Expand Down Expand Up @@ -1499,7 +1499,7 @@ Notice how the Shadcn `<Button />` variants play well with Refine's resource act
With the Shadcn UI adoption, the `blog_posts` `list` page looks like this:

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-03-19-ts-shadcn/listpage-2.png" alt="shadcn ui" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-03-19-ts-shadcn/listpage-2.webp" alt="shadcn ui" />
</div>

Looking good.
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2024-09-11-pnpm-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2024-09-11-react-virtual-dom.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2024-09-16-frameworks-2024.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2024-09-17-chakra-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-19-chakra-ui/5.png" alt="chakra ui" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-12-19-chakra-ui/5.webp" alt="chakra ui" />
</div>

<br/>
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2025-02-05-bolt-new.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-05-bolt-new/first.png" alt="bolt.new" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-05-bolt-new/first.webp" alt="bolt.new" />
</div>

It’s like describing to a friend what you need and having them organize most of the work for you.
Expand Down
4 changes: 2 additions & 2 deletions documentation/blog/2025-02-12-lovable.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ For example:
Lovable will process your input and generate the foundational code for your project

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-12-lovable/define.jpg" alt="lovable.dev" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-12-lovable/define.webp" alt="lovable.dev" />
</div>

### 3. Customize the Output
Expand All @@ -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.

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-12-lovable/customize.jpg" alt="customize" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-12-lovable/customize.webp" alt="customize" />
</div>

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.
Expand Down
4 changes: 2 additions & 2 deletions documentation/blog/2025-02-17-replit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-1.png" alt="Replit ai agent" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-1.webp" alt="Replit ai agent" />
</div>

### 4. Modify and Refactor Code
Expand All @@ -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.

<div className="centered-image">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-2.png" alt="Replit ai agent" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-2.webp" alt="Replit ai agent" />
</div>

### 5. Deploy & Share Your Project
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2025-06-24-vibe-coding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2025-12-01-tanstack-vs-swr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/getting-started/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_.

<a href="https://refine.dev/templates/">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png" alt="Refine diagram" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.webp" alt="Refine diagram" />
</a>

## Key Features
Expand Down
2 changes: 1 addition & 1 deletion documentation/plugins/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion documentation/plugins/templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion documentation/versioned_docs/version-4.xx.xx/getting-started/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_.

<a href="https://refine.dev/templates/">
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png" alt="Refine diagram" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.webp" alt="Refine diagram" />
</a>

## Key Features
Expand Down