Зачем указывать ширину и высоту картинок на странице?

Ширина и высота изображений: почему это важно

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

Основные причины

1. Предотвращение Cumulative Layout Shift (CLS)

Это один из Core Web Vitals метрик Google, влияющих на ранжирование. Если не указать размеры, браузер не знает, сколько места займёт изображение, и контент начинает "прыгать":

<!-- ❌ Плохо: без размеров изображение прыгает при загрузке -->
<img src="photo.jpg" alt="Фото" />

<!-- ✅ Хорошо: браузер зарезервирует место -->
<img src="photo.jpg" alt="Фото" width="800" height="600" />

Когда изображение загружается, браузер "знает", сколько места нужно, и не сдвигает остальной контент.

2. Оптимизация производительности (Largest Contentful Paint)

Указание размеров помогает браузеру:

• Планировать layout до загрузки изображения
• Избежать переразметки при загрузке
• Быстрее рендерить страницу

<!-- Браузер знает размеры и может начать рендер без ожидания -->
<img 
  src="large-image.jpg" 
  alt="Большое изображение"
  width="1200" 
  height="800"
/>

3. Адаптивные изображения с правильным aspect ratio

Можно использовать width и height для сохранения aspect ratio при отзывчивом дизайне:

/* CSS сохранит пропорции изображения */
img {
  width: 100%;
  height: auto; /* Высота вычислится автоматически */
}

<!-- HTML указывает исходные пропорции -->
<img 
  src="image.jpg" 
  alt="Отзывчивое изображение"
  width="800"
  height="600"
/>

Браузер вычислит: 800 / 600 = 1.33 соотношение и будет его сохранять.

4. Работа с Next.js Image component

В Next.js указание размеров обязательно для оптимизации:

import Image from 'next/image';

export default function Gallery() {
  return (
    <Image
      src="/images/photo.jpg"
      alt="Фото галереи"
      width={800}   // Обязательно!
      height={600}  // Обязательно!
      priority     // Загрузить в первую очередь
    />
  );
}

Next.js использует эти размеры для:

• Генерации оптимизированных версий
• Расчёта aspect ratio
• Отложенной загрузки (lazy loading)

5. Предотвращение FOUC (Flash of Unstyled Content)

Без размеров может появиться эффект "мерцания":

<!-- ❌ Первый рендер: неизвестная высота -->
<div class="image-wrapper">
  <img src="slow-image.jpg" />
</div>
<!-- Потом картинка загрузилась и контент сдвинулся -->

<!-- ✅ Первый рендер: место зарезервировано -->
<div class="image-wrapper" style="aspect-ratio: 16 / 9;">
  <img src="slow-image.jpg" width="1200" height="675" />
</div>

Практические примеры

1. Галерея с правильными размерами

import Image from 'next/image';

export function Gallery() {
  const images = [
    { src: '/img1.jpg', width: 400, height: 300 },
    { src: '/img2.jpg', width: 600, height: 400 },
    { src: '/img3.jpg', width: 500, height: 500 },
  ];

  return (
    <div className="grid grid-cols-3 gap-4">
      {images.map(({ src, width, height }) => (
        <Image
          key={src}
          src={src}
          alt="Изображение галереи"
          width={width}
          height={height}
          className="w-full h-auto object-cover rounded-lg"
        />
      ))}
    </div>
  );
}

2. Responsive изображение с правильным aspect ratio

// Контейнер с зарезервированным местом
const ResponsiveImage = ({ src, alt, width, height }) => {
  const aspectRatio = (height / width) * 100;

  return (
    <div 
      style={{
        position: 'relative',
        paddingBottom: `${aspectRatio}%`,
        height: 0,
        overflow: 'hidden',
      }}
    >
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />
    </div>
  );
};

// Использование
<ResponsiveImage 
  src="/image.jpg" 
  alt="Отзывчивое изображение"
  width={1200}
  height={800}
/>

3. Современный подход с CSS aspect-ratio

.image-container {
  /* aspect-ratio вычисляется браузером на основе width/height */
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="image-container">
  <img 
    src="video-cover.jpg" 
    alt="Обложка видео"
    width="1920"
    height="1080"
  />
</div>

4. Лучшая практика: srcset для разных разрешений

<!-- Браузер выберет оптимальное разрешение -->
<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  alt="Адаптивное изображение"
  width="800"
  height="600"
  sizes="(max-width: 600px) 100vw, 50vw"
/>

Метрики и влияние на SEO

Core Web Vitals (Google):

1. CLS (Cumulative Layout Shift) - желтельная метрика

   • Без размеров изображения: CLS > 0.1 (плохо)
   • С размерами: CLS < 0.1 (хорошо)

2. LCP (Largest Contentful Paint) - время загрузки

   • Изображения с размерами загружаются быстрее
   • Google штрафует сайты с плохой LCP

3. Поисковая оптимизация (SEO)

   • Google предпочитает сайты с хорошими Web Vitals
   • Изображения с размерами улучшают ранжирование

Проверка в DevTools

В Chrome DevTools можно увидеть CLS:

// Performance вкладка -> Layout Shifts
// Проверить: есть ли сдвиги при загрузке изображений?

// Также можно использовать
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout Shift:', entry);
    }
  }
});

observer.observe({ entryTypes: ['layout-shift'] });

Вывод

Указание width и height для изображений:

• Критично для SEO — Google штрафует за CLS
• Улучшает UX — контент не прыгает при загрузке
• Оптимизирует производительность — браузер может распланировать layout
• Требуется в Next.js — обязательный параметр Image компонента
• Стандартная практика — используется везде в профессиональном коде

Это не опция, а требование современной веб-разработки.