Как обойти кэширование картинки?

Методы обхода кэширования изображений

Кэширование изображений — это важная оптимизация производительности, но иногда нужно заставить браузер загружать свежую версию. Есть несколько проверенных подходов.

1. Query String (самый простой способ)

Добавляем уникальный параметр к URL изображения:

// Вариант с timestamp
const imageUrl = `${baseUrl}/image.png?t=${Date.now()}`;

// Вариант с версией файла
const imageUrl = `/images/logo.png?v=2.1.0`;

// Использование в HTML
<img src="/images/profile.jpg?t={timestamp}" alt="Profile" />

// В React компоненте
function UserAvatar({ userId, timestamp }) {
  return <img src={`/avatars/${userId}.jpg?t=${timestamp}`} alt="User" />;
}

Плюсы: простой, работает везде. Минусы: не использует потенциал кэширования.

2. Заголовки Cache-Control (рекомендуется)

На бэкенде установи правильные заголовки для статических ресурсов:

// Express.js пример
app.use(express.static("public", {
  maxAge: "1d",           // Кэширование на 1 день
  etag: false,            // Отключить ETags для версионирования
  setHeaders: (res, path) => {
    if (path.endsWith(".jpg") || path.endsWith(".png")) {
      // Для картинок с версией в имени файла
      res.set("Cache-Control", "public, max-age=31536000, immutable");
    }
  }
}));

// Next.js пример в next.config.js
headers: async () => {
  return [
    {
      source: "/images/:path*",
      headers: [
        {
          key: "Cache-Control",
          value: "public, max-age=31536000, immutable"
        }
      ]
    }
  ];
}

3. Версионирование имён файлов (build-time)

Самый элегантный способ — менять имя файла при сборке:

// Webpack / Vite конфиг
output: {
  filename: "[name].[contenthash].js",
  assetModuleFilename: "images/[name].[hash][ext]"
}

// Результат:
// image.png -> image.a1b2c3d4.png

// В HTML это автоматически обновляется
<img src="/images/logo.a1b2c3d4.png" alt="Logo" />

4. Fetch с параметром no-cache

Для динамических картинок (аватары, профили):

// Получить свежую версию, но использовать кэш если доступен
const response = await fetch("/api/image", {
  cache: "no-cache"  // Проверит с сервером, но может использовать локальный кэш
});

// Или полностью отключить кэширование
const response = await fetch("/api/image", {
  cache: "no-store"  // Всегда загружает с сервера
});

// В React
useEffect(() => {
  fetch(`/api/avatar/${userId}?t=${Date.now()}`, {
    headers: { "Cache-Control": "no-cache" }
  })
    .then(r => r.blob())
    .then(blob => setImage(URL.createObjectURL(blob)));
}, [userId]);

5. Service Worker управление

Для полного контроля используй Service Worker:

// service-worker.js
self.addEventListener("fetch", event => {
  if (event.request.url.includes("/images/")) {
    event.respondWith(
      caches.open("images-v1").then(cache => {
        return fetch(event.request).then(response => {
          // Обновляем кэш в фоне
          cache.put(event.request, response.clone());
          return response;
        }).catch(() => {
          // Если нет интернета, берём из кэша
          return cache.match(event.request);
        });
      })
    );
  }
});

Рекомендация

Используй комбинацию: версионирование файлов в build-time + правильные Cache-Control заголовки. Это обеспечивает максимальную производительность с возможностью обновления.