Responsive изображения

MDX позволяет интегрировать JSX в Markdown, что открывает возможность управлять контентом на уровне компонентов. Одной из ключевых задач современного веб-разработчика является правильная работа с изображениями, которые адаптируются под разные размеры экранов. В этой статье рассматриваются подходы к реализации responsive изображений с использованием MDX в экосистеме JavaScript.

Использование стандартного тега <img>

В MDX можно использовать стандартный HTML-тег <img>:

<img 
  src="/images/example.jpg" 
  alt="Пример изображения" 
  width="800" 
  height="600" 
  style={{ maxWidth: '100%', height: 'auto' }}
/>

Ключевые моменты:

  • style={{ maxWidth: '100%', height: 'auto' }} позволяет изображению адаптироваться под ширину контейнера.
  • Указание width и height в атрибутах помогает браузеру заранее зарезервировать пространство, снижая сдвиги контента при загрузке.
  • Атрибут alt обязателен для доступности и SEO.

Использование атрибутов srcSet и sizes

Для более гибкой адаптации под разные разрешения экрана необходимо использовать srcSet и sizes:

<img
  src="/images/example-800.jpg"
  srcSet="/images/example-400.jpg 400w,
          /images/example-800.jpg 800w,
          /images/example-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Пример responsive изображения"
/>

Объяснение:

  • srcSet содержит список изображений с указанием их ширины (w), что позволяет браузеру выбирать оптимальный вариант.
  • sizes определяет, какую часть ширины экрана изображение должно занимать. Например, 100vw означает 100% ширины окна браузера.
  • Это снижает вес загружаемых ресурсов и улучшает производительность на мобильных устройствах.

Интеграция с библиотеками для оптимизации изображений

MDX часто используется совместно с React. В таких проектах можно использовать специализированные компоненты для responsive изображений, например, next/image в Next.js или GatsbyImage в Gatsby.

Пример с next/image:

import Image from 'next/image'

<Image
  src="/images/example.jpg"
  alt="Пример изображения"
  width={800}
  height={600}
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  style={{ borderRadius: '8px' }}
/>

Преимущества использования специализированных компонентов:

  • Автоматическая генерация различных размеров изображений.
  • Ленивая загрузка (lazy loading) по умолчанию.
  • Поддержка современных форматов, таких как WebP и AVIF.
  • Улучшение показателей Core Web Vitals.

Создание собственного компонента для responsive изображений

Можно создать универсальный компонент для MDX, чтобы упростить повторное использование:

// components/ResponsiveImage.jsx
export default function ResponsiveImage({ src, alt, widths = [400, 800, 1200], ...props }) {
  const srcSet = widths.map(w => `${src.replace(/(\.\w+)$/, `-${w}$1`)} ${w}w`).join(', ')

  return (
    <img
      src={src}
      srcSet={srcSet}
      sizes="(max-width: 600px) 100vw,
             (max-width: 1200px) 50vw,
             800px"
      alt={alt}
      style={{ maxWidth: '100%', height: 'auto' }}
      {...props}
    />
  )
}

Использование в MDX:

import ResponsiveImage from './components/ResponsiveImage'

<ResponsiveImage src="/images/example.jpg" alt="Пример собственного компонента" />

Особенности подхода:

  • Позволяет стандартизировать работу с изображениями во всем проекте.
  • Легко расширяется для поддержки lazy loading, фигурных масок, фильтров и других эффектов.
  • Снижает количество повторяющегося кода в MDX-файлах.

Lazy loading и оптимизация

Для больших изображений и страниц с множеством медиа-контента важна отложенная загрузка:

<img
  src="/images/example.jpg"
  alt="Отложенная загрузка"
  loading="lazy"
  style={{ maxWidth: '100%', height: 'auto' }}
/>

Преимущества:

  • Снижение времени первичной загрузки страницы.
  • Экономия трафика для пользователей мобильных устройств.
  • Совместимо со всеми современными браузерами.

Работа с фоновыми изображениями и CSS

Responsive изображения не ограничиваются <img>. Можно использовать MDX для вставки блоков с фоновыми изображениями:

<div
  style={{
    backgroundImage: 'url(/images/bg-800.jpg)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    width: '100%',
    height: '400px'
  }}
></div>

Дополнительные техники:

  • Использование медиазапросов в CSS для подгрузки разных фоновых изображений в зависимости от размера экрана.
  • Комбинация с компонентами и inline-стилями позволяет легко интегрировать динамические данные.

Responsive изображения в MDX — это сочетание стандартных HTML-тегов, возможностей JSX и мощных инструментов для оптимизации. Использование srcSet, sizes, lazy loading и специализированных компонентов обеспечивает гибкость, производительность и улучшает опыт пользователей на всех устройствах.

Оглавление