Оптимизация изображений для веба: полное руководство [2026]

Почему оптимизация изображений решает

Изображения — самый крупный отдельный фактор, влияющий на время загрузки сайта. По данным HTTP Archive Web Almanac 2024, изображения на мобильной главной странице весят в медиане около 900 КБ при медианном весе страницы около 2,3 МБ.

Это напрямую влияет на ваш бизнес:

• 53 процента пользователей уходят с мобильной страницы, которая грузится дольше 3 секунд (исследование Google 2016 года)
• Задержка загрузки всего в 100 миллисекунд может снизить конверсию на 7 процентов (Akamai, 2017)
• Google использует Core Web Vitals, в частности LCP (largest contentful paint), в своих системах ранжирования
• У медленных страниц выше доля отказов и меньше время на сайте

В нашей повседневной работе как агентства веб-дизайна в Вене мы постоянно видим одну и ту же картину: компании вкладывают тысячи евро в красивое оформление, а потом загружают изображения по 5 МБ прямо из фотоаппарата. В итоге получается прекрасный сайт, которого никто не видит, потому что он слишком медленный.

Числа говорят сами за себя

Если проверить сайт нашим инструментом для оценки сайта, быстро станет видно, создают ли изображения проблему. В большинстве случаев оптимизация изображений — самый быстрый путь к хорошим Core Web Vitals, часто одна только работа с картинками заметно поднимает оценку PageSpeed.

Производительность и SEO связаны

Google использует Core Web Vitals в своих системах ранжирования, хотя единого сигнала для этого нет. Это значит, что медленные изображения стоят вам не только посетителей, но и позиций в поиске. Особенно значение LCP часто определяется большим главным изображением или баннером. Если оно не оптимизировано, вся страница не проходит проверку LCP.

Подробнее в нашем большом руководстве оптимизация Core Web Vitals.

Форматы изображений в сравнении: WebP, AVIF, PNG, JPG, SVG

Выбор правильного формата — первый и самый важный шаг оптимизации. У каждого формата свои сильные и слабые стороны и своё назначение.

JPEG (JPG), классика

JPEG остаётся стандартным форматом для фотографий в сети больше 30 лет. Он использует сжатие с потерями, то есть при каждом сохранении теряются мелкие детали.

Плюсы:

• Поддержка во всех браузерах (100 процентов)
• Хорошее сжатие фотографий
• Небольшой размер файла при приемлемом качестве

Минусы:

• Нет прозрачности
• Потеря качества при многократном сохранении
• Не подходит для текста, графики и резких краёв
• Больше, чем WebP при том же качестве

Как лучше: ставьте качество JPEG на 75-85 процентов. Разницу со 100 процентами глаз почти не замечает, а размер файла заметно падает.

PNG, для прозрачности и графики

PNG использует сжатие без потерь и поддерживает прозрачность (альфа-канал). Это делает его идеальным для логотипов, значков и графики с текстом.

Плюсы:

• Качество без потерь
• Прозрачность (альфа-канал)
• Идеален для графики, снимков экрана, текста

Минусы:

• Для фотографий файлы заметно больше, чем у JPEG или WebP
• Нет анимации (для неё есть APNG)

Как лучше: использовать PNG только для графики с прозрачностью или резкими краями. Для фотографий PNG почти всегда неверный выбор.

WebP, современный стандарт

WebP разработан в Google и даёт на 25-34 процента меньшие файлы, чем JPEG, при одинаковом индексе качества SSIM (по данным Google). Он поддерживает сжатие с потерями и без потерь, а также прозрачность.

Плюсы:

• Заметно меньшие файлы, чем у JPEG и PNG
• Поддержка прозрачности
• Сжатие с потерями и без потерь
• 97 процентов поддержки в браузерах (на 2026 год)

Минусы:

• Старые версии Safari (до 16) не поддерживают WebP
• При очень низком качестве потери заметнее, чем у JPEG

Как лучше: использовать WebP как формат по умолчанию для всех фотографий и сложной графики. JPEG предлагать как запас в элементе picture.

AVIF, будущее

AVIF — самый новый формат изображений, построенный на видеокодеке AV1. Он даёт заметно лучшее сжатие, чем JPEG, и обычно опережает даже WebP.

Плюсы:

• Лучшее сжатие среди всех нынешних форматов
• Поддержка HDR и широкого цветового охвата
• Прозрачность и анимация
• 96 процентов поддержки в браузерах (на 2026 год)

Минусы:

• Долгое кодирование (нагружает процессор)
• Поддержка пока не везде
• У некоторых кодировщиков ограничен максимальный размер

Как лучше: AVIF как первый выбор в элементе picture, WebP как запас, JPEG как последний запас.

SVG, для векторной графики

SVG — векторный формат, который масштабируется бесконечно без потери качества. Идеален для логотипов, значков, иллюстраций и схем.

Плюсы:

• Бесконечное масштабирование
• Очень маленькие файлы для простой графики
• Анимируется через CSS и управляется через JavaScript
• Текстовый формат, удобен для SEO

Минусы:

• Не подходит для фотографий
• Сложные SVG могут стать очень большими
• Риски безопасности при загрузке пользователями (встроенный JavaScript)

Большая сравнительная таблица

Что советует GoldenWing: используйте элемент picture с цепочкой AVIF, WebP и JPEG. Тогда каждый пользователь автоматически получает лучший доступный вариант.

Как правильно сделать адаптивные изображения

Загружать изображение 4K на телефон — пустая трата ресурсов. Адаптивные изображения обеспечивают, что каждое устройство получает только нужный размер.

Атрибут srcset

Через srcset вы задаёте разные размеры, а браузер сам выбирает подходящий:

<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="Современный портфолио веб-дизайна на разных устройствах" loading="lazy" />

Пояснение:

• srcset перечисляет доступные ширины изображения
• sizes сообщает браузеру, насколько широким изображение будет в вёрстке
• Браузер сам считает, какой размер оптимален (с учётом плотности пикселей)

Элемент picture для запасных форматов

Элемент picture соединяет выбор формата с адаптивными размерами:

<picture> <source type="image/avif" srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 50vw" /> <source type="image/webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" /> <img src="hero-800.jpg" alt="Адаптивный проект веб-дизайна" width="1200" height="630" loading="lazy" decoding="async" /> </picture>

Эту схему мы используем во всех проектах веб-дизайна, чтобы обеспечить высокую скорость при лучшем качестве изображений. Базовое понимание адаптивной вёрстки здесь необходимо.

Какие размеры изображений готовить?

Для большинства сайтов мы советуем такие пороги:

Совет: не делайте больше четырёх-пяти вариантов на изображение. Каждый следующий занимает место и время сборки, а пользы приносит всё меньше.

Отложенная загрузка: грузить изображения только когда они нужны

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

Встроенная отложенная загрузка (простое решение)

С 2020 года все современные браузеры поддерживают встроенную отложенную загрузку через атрибут loading:

<!-- Изображения ниже области просмотра --> <img src="bild.webp" loading="lazy" alt="Описание" width="800" height="450" /> <!-- Главное изображение: НЕ откладывать --> <img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero" width="1600" height="900" />

Важные правила:

1. Изображениям на первом экране всегда ставьте loading="eager" или вообще не указывайте атрибут
2. Изображению LCP дополнительно ставьте fetchpriority="high"
3. Всегда указывайте width и height, чтобы не было смещений вёрстки (CLS)
4. Библиотеки для отложенной загрузки больше не нужны, встроенного решения достаточно

Intersection Observer (для особых случаев)

Если нужен больший контроль (например, для фоновых изображений или постеров видео), используйте Intersection Observer:

const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }, { rootMargin: '200px' }); document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Значение rootMargin в 200 px обеспечивает, что изображения загрузятся за 200 пикселей до появления в области просмотра, и пользователь никогда не увидит пустое место.

Чем занять место во время загрузки

Пока изображение грузится, пустоты быть не должно. Лучшие приёмы:

• Размытая подложка (LQIP): крошечное размытое превью (меньше 1 КБ), которое при загрузке заменяется резким изображением. Компонент Image в Next.js делает это сам.
• Основной цвет: фон в основном цвете изображения как заполнитель. Быстро считается, выглядит спокойно.
• Скелет: серые анимированные заготовки. Современно и знакомо из приложений соцсетей.

В GoldenWing мы опираемся на размытую подложку в Next.js Image, это лучшее сочетание скорости и удобства. Это важная часть нашей разработки веб-приложений.

CDN для изображений: Cloudflare, imgix, Cloudinary

Сеть доставки контента content delivery network (CDN) хранит ваши изображения на серверах по всему миру и отдаёт их из ближайшего. Для изображений есть специальные CDN, которые ещё и оптимизируют их сами.

Cloudflare Polish и изменение размера

Cloudflare у многих сайтов уже работает как CDN. Оптимизация изображений идёт как дополнительная возможность:

• Polish: автоматическое сжатие всех изображений (с потерями или без)
• Перевод в WebP: автоматически для браузеров с поддержкой
• Изменение размера: подгонка размера на лету через параметры адреса
• Цена: Polish доступен начиная с тарифа Pro (20 $ в месяц при оплате за год, на бесплатном тарифе его нет)

Плюс: менять код не нужно, Cloudflare оптимизирует все изображения сам.

Cloudinary, умеет всё

Cloudinary предлагает самый широкий набор преобразований среди всех сервисов:

• Автоматическое определение формата (f_auto отдаёт AVIF, WebP или JPEG по браузеру)
• Автоматическое качество (q_auto выбирает оптимальное)
• Адаптивные размеры создаются сами
• Обрезка с ИИ (g_auto распознаёт сюжет)

Цена: бесплатный уровень с 25 кредитами в месяц, дальше от 89 $ в месяц (тариф Plus при оплате за год).

imgix, для крупных проектов

imgix — платный сервис для сайтов, насыщенных изображениями:

• Очень быстрая обработка
• Больше 100 параметров адреса для преобразований
• Автоматическое определение формата
• Отличная документация

Цена: от 25 $ в месяц по данным страницы цен провайдера, зависит от тарифа и использования.

Какой CDN подходит вам?

Большинству наших клиентов мы советуем Cloudflare как CDN плюс оптимизацию изображений в Next.js для адаптивных картинок. Cloudinary берём только в проектах, очень насыщенных изображениями (магазины, фотография).

Оптимизация атрибута alt для SEO

Текст alt важен дважды: он делает изображения доступными для программ чтения с экрана и помогает поисковым системам понять, что на картинке. И всё же на большинстве сайтов им не занимаются.

Что Google говорит про alt

Google использует alt, чтобы:

• Понять содержание изображения.
• Проиндексировать изображения в поиске по картинкам Google.
• Лучше понять смысл страницы.
• избранные фрагменты с изображениями

Правила хорошего текста alt

1. Описывайте то, что на изображении видно, а не то, что вам хотелось бы
2. Вставляйте ключевые слова естественно, без перебора
3. Держитесь в пределах 80-125 знаков, точно, но полно
4. Без шаблонных слов вроде «изображение…» или «на фото…», программы чтения и так говорят «изображение»
5. Декоративные изображения получают пустой alt="" (атрибут не убирать)

Хороший и плохой alt

Хорошие тексты alt — обязательная часть нашей стратегии SEO и контента. Мы делаем их в каждом проекте веб-дизайна.

Проверка alt: как найти пропуски

Чтобы проверить сайт на отсутствующие или пустые alt, возьмите один из этих инструментов:

• Google Lighthouse: показывает отсутствующие alt прямо в разборе доступности
• Screaming Frog: обходит все изображения и перечисляет пропущенные alt
• Расширение WAVE: наглядная проверка доступности прямо в браузере

Core Web Vitals и изображения

Метрики Core Web Vitals — это показатели Google для пользовательского опыта. Изображения напрямую влияют на две из трёх.

LCP (largest contentful paint), самая частая беда

LCP измеряет, сколько времени загружается самый крупный видимый элемент. На примерно 73 процентах мобильных страниц это изображение по данным HTTP Archive Web Almanac 2024 (главное изображение, баннер, фото товара).

Оптимизация LCP для изображений:

1. Предзагружайте изображение LCP тегом link в head
2. Никакой отложенной загрузки для изображения LCP
3. fetchpriority="high" на изображении LCP
4. Уменьшайте размер файла: брать WebP или AVIF, качество 75-85 процентов
5. Использовать CDN: отдавать изображения с ближайшего сервера
6. Встроить критичный CSS: не ставить блокирующие таблицы стилей перед изображением LCP

CLS (cumulative layout shift), прыгающая вёрстка

CLS измеряет, насколько элементы смещаются во время загрузки. Изображения без заданного размера — самая частая причина.

Оптимизация CLS для изображений:

• Всегда указывать width и height (или aspect-ratio через CSS)
• CSS aspect-ratio как современная замена: aspect-ratio: 16/9
• Использовать заполнители (LQIP, основной цвет), чтобы занять место
• Не вставлять изображения позже так, чтобы они сдвигали содержимое

Хорошие значения Core Web Vitals

Полное руководство здесь: оптимизация Core Web Vitals.

Пакетная оптимизация для больших сайтов

На сайтах с сотнями и тысячами изображений оптимизировать вручную невозможно. Здесь нужны автоматические процессы.

Инструменты командной строки

Sharp (Node.js): самый быстрый инструмент обработки изображений для Node.js:

const sharp = require('sharp'); const glob = require('glob'); const files = glob.sync('images/**/*.{jpg,jpeg,png}'); for (const file of files) { const outputWebp = file.replace(/\.(jpg|jpeg|png)$/, '.webp'); await sharp(file) .resize(1600, null, { withoutEnlargement: true }) .webp({ quality: 80 }) .toFile(outputWebp); }

ImageMagick: проверенный инструмент для пакетной обработки:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp" done

Встраивание в конвейер сборки

Для проектов на Next.js (а именно их мы делаем в GoldenWing) советуем компонент Image в Next.js, который сам переводит изображения в WebP и AVIF, создаёт адаптивные варианты, включает отложенную загрузку и готовит размытые подложки.

Для сайтов на WordPress есть плагины вроде ShortPixel или Imagify, которые оптимизируют все имеющиеся изображения пакетом (смотрите также наше руководство по SEO для WordPress).

Чек-лист оптимизации для больших сайтов

• Все изображения переведены в WebP (и в AVIF, где возможно)
• Максимальная ширина ограничена 2000 px
• Адаптивный srcset для всех изображений в тексте
• Отложенная загрузка для всех изображений ниже первого экрана
• Изображение LCP с предзагрузкой и fetchpriority="high"
• Тексты alt для всех содержательных изображений
• width и height или aspect-ratio у всех изображений
• CDN настроен для доставки по всему миру
• Автоматическая оптимизация при загрузке файлов
• Регулярные проверки через PageSpeed Insights

Сжатие изображений: равновесие качества и размера

Сжатие изображений — это поиск равновесия: слишком сильное даёт заметные искажения, слишком слабое оставляет файлы без нужды большими. В этом разделе мы покажем, как найти золотую середину.

Сжатие с потерями и без потерь

В сжатии изображений различают два основных подхода:

Сжатие без потерь:

• Уменьшает размер файла без потери качества
• Типичная экономия: меньше, чем при сжатии с потерями
• Форматы: PNG (с инструментами оптимизации), WebP без потерь, AVIF без потерь
• Подходит для: логотипов, значков, снимков экрана, графики с текстом

Сжатие с потерями:

• Убирает те сведения, которые человеческий глаз почти не замечает
• Типичная экономия: значительно больше, в зависимости от изображения и уровня качества
• Форматы: JPEG, WebP с потерями, AVIF с потерями
• Подходит для: фотографий, фоновых и главных изображений

Как найти оптимальный уровень качества

По нашему опыту сотен веб-проектов лучшим компромиссом оказались такие значения:

Качество для JPEG и WebP:

• Главные изображения и баннеры шапки: качество 80-85 процентов, они показываются крупно и искажения быстро бросаются в глаза
• Изображения внутри текста: качество 70-80 процентов, хороший компромисс для большинства случаев
• Миниатюры и превью: качество 60-70 процентов, при малом размере разница в качестве почти не видна
• Фоновые изображения с наложением: качество 50-65 процентов, если поверх лежит текст или градиент, качество можно смело снижать

Качество для AVIF:

При том же видимом качестве AVIF даёт файлы, которые могут быть меньше, чем у WebP. Поэтому значения качества тут другие:

• Главные изображения: качество 65-75 процентов
• Изображения в тексте: качество 55-65 процентов
• Миниатюры: качество 45-55 процентов

Метрики воспринимаемого качества

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

• SSIM (structural similarity index): значения выше 0,95 считаются визуально неотличимыми от оригинала. Цель: минимум 0,90 для изображений в тексте.
• DSSIM (structural dissimilarity): обратная величина к SSIM, значения ниже 0,015 почти не заметны.
• Butteraugli: разработан в Google, измеряет воспринимаемую разницу в качестве. Чем ниже значение, тем меньше заметная разница.

Инструменты вроде Squoosh (squoosh.app) от Google позволяют сравнивать качество на глаз и одновременно следить за размером файла. Для пакетной обработки советуем Sharp (Node.js) или libvips, оба подходят для пакетной обработки.

Рабочий порядок для хорошего сжатия

Вот порядок работы, который мы советуем:

1. Подготовить исходник: всегда начинайте с максимального качества (RAW или несжатый TIFF либо PNG)
2. Подогнать размер: уменьшите изображение до нужного максимума (например, ширина 1920 px для картинок во всю ширину)
3. Выбрать формат: фотографии в WebP или AVIF, графика в PNG или SVG
4. Сжать: начните с качества 80 процентов и снижайте шагами, пока не станут заметны искажения
5. Проверить: сравните оригинал и сжатый вариант при увеличении 100 процентов
6. Создать адаптивные варианты: сделайте разные размеры (320, 640, 960, 1280, 1920 px)

Автоматическая оптимизация изображений в конвейерах CI/CD

Оптимизировать изображения вручную долго и легко ошибиться. Для профессиональных проектов советуем встроить оптимизацию в автоматическую сборку.

Зачем автоматизировать оптимизацию изображений?

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

• Редактор загружает JPEG на 5 МБ прямо из фотоаппарата
• Дизайнер выгружает PNG в 300 точек на дюйм вместо 72
• Разработчик забывает сделать адаптивные варианты

Итог: разное качество и без нужды большие файлы. Автоматический конвейер снимает эти проблемы.

Оптимизация при сборке через Sharp

Sharp — самая быстрая библиотека обработки изображений для Node.js, построена на libvips. Вот пример конвейера на этапе сборки:

Пример настройки

Обычная схема в приложении Next.js использует встроенный оптимизатор изображений, который внутри опирается на Sharp. Настройки в next.config.js позволяют задать форматы (WebP, AVIF), уровни качества и размеры устройств централизованно.

Для статических сайтов советуем скрипт сборки на Sharp, который делает следующее:

• Просматривает все изображения в исходной папке
• Создаёт адаптивные варианты (например, 640, 960, 1280, 1920 px)
• Готовит версии в WebP и AVIF
• Подбирает качество автоматически (по SSIM)
• Складывает результат в выходную папку

Оптимизация на стороне CMS

Если изображения загружают через CMS (WordPress, Payload, Strapi), оптимизация должна идти на сервере:

WordPress:

• ShortPixel или Imagify: сжимают изображения автоматически при загрузке
• WebP Express: создаёт варианты WebP на лету
• Стоимость: примерно от 5 евро в месяц за 5000 изображений

Payload CMS (наш выбор):

• Встроенная оптимизация через Sharp
• Автоматическое создание адаптивных вариантов через настройку imageSizes
• Перевод в WebP возможен через собственные хуки

Headless CMS (Contentful, Sanity, Cloudinary):

• Эти сервисы дают CDN для изображений с автоматической оптимизацией
• Параметры адреса управляют форматом, качеством и размером
• Особенно много преобразований предлагает Cloudinary

Наблюдение и контроль качества

После внедрения автоматического конвейера результаты нужно регулярно проверять:

• Lighthouse CI: встройте Lighthouse в конвейер CI/CD, чтобы автоматически замечать ухудшения скорости
• Bundlesize и size-limit: задайте пределы размера для изображений и пусть сборка падает, если изображение их превышает
• Проверка визуальных изменений: инструменты вроде Percy или Chromatic сравнивают снимки экрана и замечают визуальные перемены от слишком сильного сжатия

Оптимизация изображений для магазинов: как правильно показать товар

В электронной коммерции изображения — главный фактор конверсии. Фотографии товара сильно влияют на решение о покупке. При этом изображения должны быстро грузиться, ведь даже небольшие задержки могут снизить конверсию (Akamai: 7 процентов при задержке в 100 миллисекунд).

Требования к фотографиям товара по площадкам

У разных каналов продаж свои требования к фотографиям товара:

Собственный магазин (WooCommerce, Shopify, Medusa):

• Главное изображение: минимум 1200 × 1200 px (для увеличения)
• Фон: чистый белый (#FFFFFF) или прозрачный (PNG)
• Минимум 3-5 изображений на товар (разные углы, деталь, в жизни)
• Размер файла: меньше 200 КБ на изображение после оптимизации

Amazon:

• Главное изображение: минимум 1000 × 1000 px, чистый белый фон
• Цветовое пространство RGB (не CMYK)
• Не больше 10 МБ на изображение (JPEG, PNG, GIF, TIFF)
• Товар должен занимать минимум 85 процентов площади кадра

Google Shopping:

• Рекомендуется около 1500 × 1500 px, с 31 января 2027 года минимум 500 × 500 px для всех товаров
• Без водяных знаков и рекламного текста на изображении
• Качественные фотографии товара без лишних элементов
• Поддерживаемые форматы: JPEG, WebP, PNG, GIF, BMP, TIFF

Увеличение и изображения высокого разрешения

Возможность увеличить изображение помогает покупателю увидеть детали: структуру материала, швы, текстуру. Для хорошего увеличения нужно:

• Минимальное разрешение: 2000 × 2000 px для двукратного увеличения
• Рекомендуем: 3000 × 3000 px для трёхкратного
• Формат: WebP с качеством 85 процентов (по данным Google, на 25-34 процента меньше сопоставимого JPEG)
• Отложенная загрузка: загружать изображения для увеличения только когда пользователь его включил
• Постепенная загрузка: сразу показать превью низкого разрешения, а полное догрузить в фоне

Обзор на 360 градусов и видео о товаре

Продвинутые магазины делают обзоры на 360 градусов, чтобы покупатель мог посмотреть товар со всех сторон. Здесь оптимизация особенно важна:

• Число кадров: 24-36 изображений для плавного поворота
• Размер одного кадра: максимум 50-80 КБ (WebP, качество 70 процентов)
• Общий размер: лучше меньше 2 МБ на все кадры
• Порядок предзагрузки: первые 4-8 кадров сразу, остальные при взаимодействии

Видео о товаре лучше давать в MP4 (H.264) в нескольких уровнях качества. Используйте элемент video из HTML5 с атрибутом poster, чтобы до загрузки видео показывался оптимизированный кадр.

Разметка Schema для фотографий товара

Структурированные данные помогают Google правильно показывать фотографии товара в результатах поиска. Используйте схему Product со следующими свойствами, относящимися к изображениям:

• image: адрес главного изображения товара (минимум одно, лучше до пяти)
• additionalImage: адреса остальных изображений
• Указывайте полные адреса и проверьте, что изображения доступны для обхода (не закрыты в robots.txt)

Доступные изображения: не только alt

Доступность изображений выходит далеко за пределы текста alt. С вступлением в силу австрийского закона о доступности (BStG) эта тема становится для многих компаний юридической обязанностью.

Как правильно писать alt

Текст alt — главная мера доступности для изображений, но его часто применяют неверно. Вот правила:

Содержательные изображения (фотографии, иллюстрации со смыслом):

• Описывайте содержание и назначение изображения
• Пишите точно, но не слишком длинно (80-125 знаков оптимально)
• Избегайте «изображение…» или «на фото…», программы чтения и так говорят «изображение»
• Плохо: «Изображение команды». Хорошо: «Пять веб-дизайнеров вместе работают над проектной доской в венском офисе»

Декоративные изображения (фоны, разделители, украшения):

• Используйте пустой текст alt (alt="")
• Это говорит программам чтения пропустить изображение
• Ещё лучше: подключить изображение через CSS как background-image, тогда alt вообще не нужен

Функциональные изображения (изображения-ссылки, кнопки с картинкой):

• Текст alt описывает действие, а не картинку
• Плохо: «Красная стрелка». Хорошо: «Перейти к следующему проекту»
• Для логотипа со ссылкой: «На главную страницу GoldenWing» вместо «Логотип GoldenWing»

Сложные изображения (схемы, инфографика, диаграммы):

• Текст alt даёт краткое описание содержания
• Дополнительно: подробное описание в тексте рядом или через aria-describedby
• Пример: alt «Столбчатая диаграмма: время загрузки сайтов по CMS» плюс подробная таблица данных ниже

Как улучшить описания для программ чтения с экрана

Кроме alt есть и другие приёмы, чтобы сделать изображения доступными:

Figure и figcaption:

Используйте элемент figure с figcaption для изображений с подписями. Программы чтения произносят и alt, и подпись, поэтому следите, чтобы они дополняли друг друга, а не повторялись.

Aria-describedby для подробных описаний:

Для инфографики и схем можно через aria-describedby указать на подробный текст, который либо визуально скрыт, либо раскрывается по нажатию.

Доступность SVG:

SVG требуют особого внимания. Используйте элемент title внутри SVG для короткого описания и элемент desc для подробного. Поставьте role="img" на элемент SVG и свяжите title и desc через aria-labelledby.

Контраст и нарушения цветового зрения

Примерно 8 процентов мужчин и 0,5 процента женщин плохо различают цвета. Это нужно учитывать при работе с изображениями:

• Никогда не передавайте сведения только цветом: добавляйте формы, узоры или подписи. Круговая диаграмма только из цветов для таких людей нечитаема, поэтому добавьте подписи или узоры.
• Проверяйте контраст: текст на изображении должен иметь контраст минимум 4,5:1 (обычный текст) или 3:1 (крупный текст). Используйте, например, WebAIM Contrast Checker.
• Моделируйте нарушения зрения: проверяйте изображения в Color Oracle или во вкладке Rendering в Chrome DevTools, которая умеет изображать разные нарушения цветового зрения.

Анимированные изображения и чувствительность к движению

GIF и анимации могут вызывать трудности у людей с нарушениями равновесия или с эпилепсией. Учитывайте:

• Никаких анимаций, которые запускаются сами: дайте кнопку запуска и остановки
• Уважайте prefers-reduced-motion: через媒 медиа-запрос CSS проверьте, предпочитает ли пользователь меньше движения, и в этом случае покажите статичное изображение
• Частота вспышек: в анимации не должно быть больше 3 вспышек в секунду (WCAG 2.3.1)
• Давайте замену: для анимированного содержимого всегда предлагайте статичный вариант или текстовое описание

Чек-лист доступных изображений

Пользуйтесь этим списком для каждого изображения на сайте:

• Текст alt есть и описывает суть (или пустой у декоративных)
• Подписи оформлены через figure и figcaption
• Сложные изображения дополнены подробным описанием
• Текст на изображениях с достаточным контрастом
• Сведения не передаются только цветом
• У анимаций есть остановка и поддержка reduced-motion
• У SVG есть title, desc и верные атрибуты ARIA
• Изображения правильно масштабируются при увеличении 200 процентов без потери смысла

Оптимизация изображений для соцсетей и тегов OG

Когда вы делитесь материалами сайта в соцсетях, картинка предпросмотра во многом определяет долю переходов. Теги Open Graph (OG) задают, какое изображение покажут Facebook, LinkedIn, Twitter/X и другие площадки при отправке ссылки. Поэтому продуманная работа с изображениями для соцсетей — часто недооценённый рычаг для трафика и заметности.

Главные размеры изображений OG

У каждой площадки свои требования к размеру. Если их не учесть, изображение обрежут автоматически, часто неудачно:

• Facebook и LinkedIn: 1200 × 630 пикселей (соотношение 1,91:1)
• Twitter/X (summary large image): 1200 × 628 пикселей
• Twitter/X (summary card): минимум 120 × 120 пикселей
• Pinterest: 1000 × 1500 пикселей (вертикально, 2:3)
• Instagram (лента): 1080 × 1080 пикселей (квадрат) или 1080 × 1350 пикселей (вертикально)
• Предпросмотр в WhatsApp: минимум 300 × 200 пикселей

Проверенный подход для немецкоязычных стран — сделать одно универсальное изображение OG в 1200 × 630 пикселей. Этот формат приемлемо работает почти везде. Для Pinterest и Instagram лучше сделать отдельные варианты.

Как правильно внедрить теги OG

Технически всё делается в области <head> вашей страницы. Для изображений важны такие метатеги:

• og:image — полный адрес изображения предпросмотра
• og:image:width и og:image:height — точные размеры в пикселях
• og:image:type — тип MIME (например, image/jpeg, image/png, image/webp)
• og:image:alt —替 текст-замена для доступности
• twitter:card — тип карточки для Twitter/X (советуем summary_large_image)
• twitter:image — отдельное изображение для Twitter/X (необязательно, если отличается)

Аккуратно оформленное изображение предпросмотра делает опубликованные ссылки заметнее и солиднее, особенно в сфере B2B, важной для австрийского рынка.

Форматы и сжатие для соцсетей

Для изображений OG правила другие, чем для обычных картинок сайта. JPEG здесь остаётся предпочтительным, потому что его надёжно поддерживают все площадки. WebP большинство сборщиков уже распознаёт, но на старых клиентах он может давать сбои.

Старайтесь делать файлы OG как можно меньше. Facebook советует не меньше 1200 × 630 пикселей для экранов высокого разрешения и не меньше 600 × 315 пикселей для крупных превью ссылок, меньшие изображения показываются заметно мельче. Следите, чтобы самое важное было в центральной безопасной зоне, потому что края кадра на некоторых площадках обрезают.

Автоматическое создание изображений для соцсетей

Компаниям немецкоязычного рынка, которые регулярно выпускают материалы, автоматизация себя оправдывает. Инструменты вроде Cloudinary, Imgix или собственные решения умеют создавать изображения OG на ходу. Шаблон заполняется переменными: заголовком, логотипом, фоновым изображением.

Особенно действенный подход — создание изображений OG на ходу в Next.js через библиотеку @vercel/og или похожие решения на стороне сервера. Они готовят для каждой страницы своё изображение предпросмотра с её заголовком и элементами бренда.

Проверка и отладка изображений OG

После внедрения изображения OG обязательно проверьте. Для этого есть официальные инструменты площадок:

• Facebook Sharing Debugger — показывает нынешний предпросмотр и сохранённые версии
• Twitter Card Validator — проверяет вид карточки Twitter
• LinkedIn Post Inspector — проверяет предпросмотр LinkedIn
• Расширения для браузера — инструменты вроде «Social Share Preview» показывают все варианты сразу

Учтите, что площадки запоминают изображения OG. После изменения нужно через их же инструменты сбросить сохранённую версию, иначе новое изображение не появится.

Оптимизация изображений с ИИ: новые инструменты и возможности

Искусственный интеллект меняет оптимизацию изображений в самой основе. То, что раньше делали руками, от сжатия через обрезку до улучшения качества, сегодня берут на себя умные алгоритмы, причём часто с лучшим результатом, чем обычные способы.

Умное сжатие нейронными сетями

Классические алгоритмы вроде JPEG или WebP работают по математическим моделям и не смотрят на содержание кадра. Сжатие на основе ИИ разбирает смысловое содержание изображения и решает по контексту, какие области можно сжать сильнее.

Пример: на фотографии товара ИИ сжимает фон сильнее, чем сам товар. В итоге файлы меньше при сопоставимом качестве. Такие инструменты, как ShortPixel Smart Compression, Imagify AI и Squoosh (с опытными возможностями ИИ), уже используют эту технологию.

Одно из самых сильных применений ИИ в работе с изображениями — автоматический поиск главного объекта. Вместо того чтобы вручную задавать удачную обрезку для каждого кадра, ИИ сам находит главный сюжет и обрезает изображение под разные форматы.

Эта технология особенно полезна для:

• Адаптивных изображений — автоматическая обрезка под настольные компьютеры, планшеты и телефоны
• Магазинов — единый вид товаров при разных исходных фотографиях
• Работы с контентом — редакторам больше не нужно вручную готовить кадры под разные форматы
• Соцсетей — автоматическая подгонка под форматы площадок

Увеличение разрешения и улучшение качества с ИИ

Современные инструменты увеличения вроде Topaz Gigapixel, Adobe Super Resolution или Real-ESRGAN умеют увеличивать изображения в 4-8 раз без заметных искажений. Для компаний немецкоязычного рынка это важно, когда старые архивы изображений нужно подготовить для экранов высокого разрешения.

Кроме того, инструменты ИИ умеют улучшать качество автоматически:

• Снижение шума без потери деталей
• Повышение резкости с учётом контекста краёв
• Цветокоррекция и автоматический баланс белого
• Удаление искажений на сильно сжатых JPEG
• Удаление фона на фотографиях товара

Создание текста alt с помощью ИИ

Автоматическое создание текстов alt моделями вроде GPT-4 Vision, Claude или Google Gemini доросло до уровня, которого для многих задач достаточно. Для немецкоязычного рынка важно, чтобы созданные тексты были грамматически верными и уместными по смыслу.

Как лучше работать с текстами alt от ИИ:

• Просите ИИ писать alt сразу по-немецки, переводы с английского часто выходят неуклюжими
• Проверяйте созданные тексты на ключевые слова для SEO
• Добавляйте названия бренда и товаров, которые ИИ может не распознать
• Используйте созданные тексты как основу и доводите их вручную

Затраты и польза для австрийского рынка

Вложение в оптимизацию изображений с ИИ оправдывается у большинства компаний начиная с 500 изображений в месяц. Стоимость в зависимости от инструмента от 10 до 100 евро в месяц, а ручная работа при 2-5 минутах на изображение быстро съедает несколько рабочих часов в неделю.

Защита данных и GDPR при инструментах ИИ

Проверьте до начала работы с инструментом:

• Где обрабатываются изображения (ЕС или третьи страны)?
• Используются ли изображения для обучения ИИ?
• Есть ли договор об обработке данных?
• Сколько времени изображения хранятся?

Решения на своих серверах или европейские сервисы с серверами в ЕС дают здесь больше всего правовой уверенности.

Вывод: изображения как рычаг скорости

Оптимизация изображений — самый действенный рычаг для ускорения сайта. С правильными форматами (WebP и AVIF), адаптивными изображениями, отложенной загрузкой и CDN вес страницы можно сократить заметно без видимой потери качества.

Главные меры коротко:

1. Использовать WebP как формат по умолчанию, AVIF как дополнение
2. Внедрить адаптивные изображения через srcset и элемент picture
3. Отложенная загрузка для изображений ниже первого экрана, обычная загрузка для изображения LCP
4. Проработать тексты alt для всех содержательных изображений
5. Использовать CDN для быстрой доставки по миру
6. Настроить автоматические конвейеры для пакетной оптимизации
7. Регулярно проверять через PageSpeed Insights и инструменты веб-аналитики

Если нужна помощь с оптимизацией изображений или со скоростью сайта в целом, свяжитесь с нашей командой. Как опытное агентство веб-дизайна в Вене мы с командой с опытом более 13 лет ускоряем сайты и добиваемся лучших результатов в поиске.

Читайте также:

• Оптимизация Core Web Vitals
• Руководство по SEO для WordPress
• Адаптивная вёрстка в словаре
• Наши услуги веб-дизайна