Как отобразится изображение, если не указан размер?

Отображение изображения без указанного размера

При отсутствии явно указанного размера (width и height) изображение отображается со следующими характеристиками:

В HTML/Browser

<!-- Без размеров -->
<img src="image.jpg" alt="Description">
<!-- Будет отображено в его естественном (intrinsic) размере -->

<!-- С одним измерением -->
<img src="image.jpg" alt="Description" width="200">
<!-- Высота масштабируется пропорционально (aspect ratio сохраняется) -->

Изображение отобразится в его естественном размере (native/intrinsic size) — том размере, который определён в метаданных файла (для JPG, PNG, WebP это физические пиксели изображения). Это может привести к:

• Макету shifts (Cumulative Layout Shift) — страница может "прыгать" при загрузке изображения
• Неоптимальной производительности — загружается полное разрешение вместо нужного
• Плохому UX — непредсказуемое расположение контента

В Node.js Backend

При работе с изображениями в backend:

import sharp from 'sharp';
import fs from 'fs';

// ❌ Без явной обработки размера
const image = fs.readFileSync('image.jpg');
// Отправляется оригинальный размер, может быть 4000x3000 пиксель

// ✅ С явным размером (оптимизация)
async function resizeImage(inputPath: string) {
  await sharp(inputPath)
    .resize(800, 600, {
      fit: 'cover',
      position: 'center'
    })
    .toFile('output.jpg');
}

Best Practices

Всегда указывать размеры:

<!-- ✅ Правильно -->
<img src="image.jpg" alt="Description" 
     width="800" 
     height="600"
     loading="lazy">

<!-- ✅ Modern: с aspect-ratio -->
<img src="image.jpg" alt="Description" 
     style="aspect-ratio: 16/9;"
     loading="lazy">

В Next.js используй Image компонент:

import Image from 'next/image';

// ✅ Требует width/height (или fill)
<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  priority={false}
  loading="lazy"
/>

// ✅ Или с fill для responsive
<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/image.jpg"
    alt="Description"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

Backend рекомендации

При сервировании изображений с backend:

// ✅ Включай Content-Length header
app.get('/images/:id', async (req, res) => {
  const image = await getImage(req.params.id);
  
  res.set('Content-Type', 'image/jpeg');
  res.set('Content-Length', image.buffer.length);
  res.set('Cache-Control', 'public, max-age=31536000');
  
  res.send(image.buffer);
});

// ✅ Поддерживай responsive images через query параметры
app.get('/images/:id', async (req, res) => {
  const width = parseInt(req.query.width) || 800;
  const height = parseInt(req.query.height) || 600;
  
  const image = await sharp(path)
    .resize(width, height, { fit: 'contain' })
    .toBuffer();
  
  res.type('image/jpeg').send(image);
});

Вывод: всегда указывай размеры изображений. Это критично для CLS, производительности и корректного отображения страницы.