1. Изменение размера изображения на стороне сервера.
   Одним из распространенных подходов является изменение размера изображения на стороне сервера. Этот метод включает в себя изменение размера исходного изображения до желаемых размеров и передачу изображения с измененным размером клиенту. Вот пример использования Node.js и библиотеки Sharp:

const sharp = require('sharp');
const originalImagePath = 'path/to/original/image.jpg';
const resizedImagePath = 'path/to/resized/image.jpg';
const width = 800;
const height = 600;
sharp(originalImagePath)
  .resize(width, height)
  .toFile(resizedImagePath, (err, info) => {
    if (err) {
      console.error(err);
    } else {
      console.log('Image resized successfully!');
    }
  });

2. Изменение размера изображения на стороне клиента.
   Другой подход заключается в изменении размера изображений на стороне клиента с помощью JavaScript, позволяя веб-браузеру обрабатывать процесс изменения размера. Такой подход может снизить нагрузку на сервер и повысить производительность. Вот пример использования HTML5 Canvas API:

<input type="file" id="imageInput">
<canvas id="canvas"></canvas>
<script>
  const input = document.getElementById('imageInput');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const maxWidth = 800;
  const maxHeight = 600;
  input.addEventListener('change', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function (event) {
      const img = new Image();
      img.onload = function () {
        let width = img.width;
        let height = img.height;
        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.min(maxWidth / width, maxHeight / height);
          width *= ratio;
          height *= ratio;
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
</script>

3. Изменение размера изображения на основе CSS.
   CSS можно использовать для изменения размера изображений на стороне клиента без изменения файлов изображений. Этот метод особенно полезен при работе с адаптивным дизайном. Вот пример:

<img src="path/to/image.jpg" alt="Product Image" class="custom-image">
<style>
  .custom-image {
    max-width: 800px;
    max-height: 600px;
    width: auto;
    height: auto;
  }
</style>