Оптимизация изображений для SEO: WebP, AVIF, lazy loading и компрессия

document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = document.querySelectorAll('img[loading="lazy"], source[loading="lazy"]');
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          if (img.dataset.src) img.src = img.dataset.src;
          if (img.dataset.srcset) img.srcset = img.dataset.srcset;
          obs.unobserve(img);
        }
      });
    }, { rootMargin: '200px', threshold: 0 });
    lazyImages.forEach(img => observer.observe(img));
  } else {
    // Fallback: load all immediately
    lazyImages.forEach(img => {
      if (img.dataset.src) img.src = img.dataset.src;
      if (img.dataset.srcset) img.srcset = img.dataset.srcset;
    });
  }
});

// webpack.config.js
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'sharp-loader',
            options: {
              quality: 80,
              webp: true,
              avif: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      pngquant: { quality: [0.7, 0.85] },
      mozjpeg: { quality: 80 },
      gifsicle: { optimizationLevel: 2 }
    })
  ]
};

// vite.config.js
import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 5 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.7, 0.85] },
      svgo: {},
      webp: { quality: 80 },
      avif: { quality: 80 }
    })
  ]
});

// scripts/optimize-tinypng.js
const tinify = require('tinify');
tinify.key = process.env.TINYPNG_KEY;

const fs = require('fs');
const path = require('path');

const srcDir = path.join(__dirname, '..', 'dist');
const files = fs.readdirSync(srcDir).filter(f => /\.(jpe?g|png)$/i.test(f));

files.forEach(file => {
  const src = path.join(srcDir, file);
  const dest = src;
  tinify.fromFile(src).toFile(dest);
});

// scripts/check-sizes.js
const fs = require('fs');
const path = require('path');

const dir = path.join(__dirname, '..', 'dist');
const maxSize = 200 * 1024; // 200KB

fs.readdirSync(dir).forEach(file => {
  const stats = fs.statSync(path.join(dir, file));
  if (stats.size > maxSize) {
    console.warn(\`\${file} is \${stats.size} bytes – exceeds \${maxSize}\`);
  }
});