Tối ưu hình ảnh cho Astro blog sử dụng Cloudflare Image Transformation

# Kiểm tra những file nào cần xử lý
grep -r "images.balodeplao.com" ./src/content --include="*.md" -l

# Cập nhật link file
find ./src/content -name "*.md" | xargs perl -i -pe 's|https://images\.balodeplao\.com(/images/[^\")\s]+)|$1|g'Code language: Nginx (nginx)

npm install unist-util-visitCode language: Nginx (nginx)

export const R2_BASE = 'https://images.balodeplao.com';Code language: JavaScript (javascript)

import { visit } from 'unist-util-visit';
import { R2_BASE } from '../config/r2.mjs';

export function remarkR2Images() {
  return (tree) => {
    // Xử lý ảnh dạng Markdown: ![alt](path)
    visit(tree, 'image', (node) => {
      if (node.url.startsWith('/images/')) {
        node.url = `${R2_BASE}${node.url}`;
      }
    });

    // Xử lý ảnh dạng HTML inline trong Markdown: <img src="..." />
    visit(tree, 'html', (node) => {
      node.value = node.value.replace(
        /src="(\/images\/[^"]+)"/g,
        `src="${R2_BASE}$1"`
      );
    });
  };
}Code language: TypeScript (typescript)

import { R2_BASE } from '@/config/r2.mjs';

export function toR2Url(path?: string): string | undefined {
  if (!path) return undefined;
  if (path.startsWith('http')) return path;
  return `${R2_BASE}${path}`;
}Code language: TypeScript (typescript)

import { defineConfig } from 'astro/config';
import { remarkR2Images } from './src/plugins/remark-r2-images.mjs';

export default defineConfig({
  site: 'https://balodeplao.com',
  markdown: {
    remarkPlugins: [remarkR2Images],
  },
});
Code language: TypeScript (typescript)

// Thêm vào phần import
import { toR2Url } from "@/utils/r2";

// Thêm vào phần const
const coverImage = toR2Url(image);

// Cập nhật metadata
const metadata = {
  title: title,
  description: description,
  ogImage: coverImage,
};

// Hiển thị cover image
{coverImage && (
  <div class="reveal relative mb-8 h-96 w-full overflow-hidden rounded-xl shadow-lg">
    <img
      src={coverImage}
      alt={title}
      class="h-full w-full object-cover"
    />
  </div>
)}Code language: JavaScript (javascript)

// Thêm vào phần import
import { toR2Url } from "@/utils/r2";

// Thêm vào phần const
const coverImage = toR2Url(post.data.image);

// Hiển thị cover image
<div class="relative h-48 w-full overflow-hidden">
  {coverImage && (
    <img
      src={coverImage}
      alt={post.data.title}
      class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
    />
  )}
</div>Code language: JavaScript (javascript)

export default {
  async fetch(request) {
    const response = await fetch(request);

    if (!response.ok) return response;

    const url = new URL(request.url);
    const isImage = /\.(webp|jpe?g|png|gif|svg|avif)$/i.test(url.pathname);

    if (!isImage) return response;

    const headers = new Headers(response.headers);

    // Cache 1 năm tại browser + Cloudflare edge
    headers.set('Cache-Control', 'public, max-age=31536000, immutable');

    // Để Cloudflare cache riêng từng biến thể transform
    headers.set('Vary', 'Accept');

    return new Response(response.body, {
      status: response.status,
      headers,
    });
  },
};Code language: JavaScript (javascript)

import { visit } from 'unist-util-visit';
import { R2_BASE } from '../config/r2.mjs';

export function rehypePictureWebp() {
  return (tree) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName !== 'img') return;
      if (!parent || index == null) return;

      const src = node.properties?.src || '';

      if (!src.startsWith(R2_BASE)) return;
      if (!/\.(jpe?g|png)$/i.test(src)) return;

      const webpSrc = src.replace(/\.(jpe?g|png)$/i, '.webp');

      parent.children[index] = {
        type: 'element',
        tagName: 'picture',
        properties: {},
        children: [
          {
            type: 'element',
            tagName: 'source',
            properties: { type: 'image/webp', srcSet: webpSrc },
            children: [],
          },
          {
            ...node,
            properties: {
              ...node.properties,
              loading: 'lazy',
              decoding: 'async',
            },
          },
        ],
      };
    });
  };
}
Code language: JavaScript (javascript)

<picture>
  <source type="image/webp" srcset="https://image.balodeplao.com/images/.../photo.webp" />
  <img src="https://image.balodeplao.com/images/.../photo.jpg" loading="lazy" decoding="async" alt="..." />
</picture>
Code language: HTML, XML (xml)

import { visit } from 'unist-util-visit';
import { R2_BASE } from '../config/r2.mjs';

const WIDTHS = [480, 800, 1200];
const SIZES = '(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px';

function buildTransformUrl(src, width) {
  const path = src.replace(R2_BASE, '');
  return `${R2_BASE}/cdn-cgi/image/width=${width},format=auto,onerror=redirect${path}`;
}

export function rehypePictureWebp() {
  return (tree) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName !== 'img') return;
      if (!parent || index == null) return;

      const src = node.properties?.src || '';

      if (!src.startsWith(R2_BASE)) return;

      const srcset = WIDTHS
        .map(w => `${buildTransformUrl(src, w)} ${w}w`)
        .join(', ');

      const defaultSrc = buildTransformUrl(src, 800);

      parent.children[index] = {
        type: 'element',
        tagName: 'picture',
        properties: {},
        children: [
          {
            type: 'element',
            tagName: 'source',
            properties: {
              type: 'image/webp',
              srcSet: srcset,
              sizes: SIZES,
            },
            children: [],
          },
          {
            ...node,
            properties: {
              ...node.properties,
              src: defaultSrc,
              srcSet: srcset,
              sizes: SIZES,
              loading: 'lazy',
              decoding: 'async',
            },
          },
        ],
      };
    });
  };
}
Code language: JavaScript (javascript)

<picture>
  <source
    type="image/webp"
    srcset="
      https://image.balodeplao.com/cdn-cgi/image/width=480,format=auto,onerror=redirect/images/photo.jpg 480w,
      https://image.balodeplao.com/cdn-cgi/image/width=800,format=auto,onerror=redirect/images/photo.jpg 800w,
      https://image.balodeplao.com/cdn-cgi/image/width=1200,format=auto,onerror=redirect/images/photo.jpg 1200w
    "
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  />
  <img
    src="https://image.balodeplao.com/cdn-cgi/image/width=800,format=auto,onerror=redirect/images/photo.jpg"
    loading="lazy"
    decoding="async"
    alt="..."
  />
</picture>
Code language: HTML, XML (xml)

import { defineConfig } from 'astro/config';
import { remarkR2Images } from './src/plugins/remark-r2-images.mjs';
import { rehypePictureWebp } from './src/plugins/rehype-picture-webp.mjs';

export default defineConfig({
  site: 'https://balodeplao.com',
  markdown: {
    remarkPlugins: [remarkR2Images],
    rehypePlugins: [rehypePictureWebp],
  },
});

Code language: TypeScript (typescript)