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

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

Маркетинговый сайт хорошо проходит все проверки, кроме размера изображений. Главные баннеры сохранены в PNG шириной 2800 пикселей, а фотографии добавлены как JPEG прямо с камеры в полном разрешении. CDN кеширует файлы, но не уменьшает их. Перед публикацией подгоните размеры изображений под макет, выберите подходящий формат и настройте качество.

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

Браузеры загружают полный вес файла, даже если CSS визуально уменьшает размер показа. Большие исходники ухудшают LCP, расход мобильного трафика и упираются в лимиты загрузки CMS.

Проблема	Типичная причина
Тяжёлый баннер	PNG или JPEG более чем вдвое шире области показа в CSS
Размыто на Retina	Исходник слишком маленький, а не слишком большой
Неверный формат	Фото сохранено в PNG без потерь
Нет запасного варианта	Только WebP без резервного JPEG

Начните с правила про размер показа из статьи как сжать изображения на Mac . Всегда уменьшайте размер перед конвертацией формата.

Выбор формата для веба

Подбирайте формат под содержимое и поддержку браузеров в вашем стеке.

Содержимое	Основной формат	Запасной вариант
Фотобаннер	WebP с потерями	JPEG
Интерфейс с прозрачностью	PNG или WebP без потерь	PNG
Плоская иконочная графика	SVG, если есть векторный исходник	PNG
Встраивание в email	JPEG	нет

Прочитайте статью сжатие с потерями и без потерь: в чём разница , прежде чем сохранять каждое фото без потерь. Для баннеров после уменьшения размеров обычно достаточно WebP или JPEG с потерями и качеством 80-85.

Для перехода от PNG к WebP смотрите статью PNG в WebP на Mac . Сохраняйте резервный JPEG в <picture> или в конфигурации вашего статического генератора сайта.

Размер, качество и адаптивная доставка

Экспортируйте ширину примерно в 2 раза больше ширины колонки в CSS для экранов с высоким DPI.

Ширина показа в CSS	Рекомендуемая ширина экспорта
Баннер 960 px	1600-1920 px
Колонка контента 720 px	1440 px
Карточка 400 px	800 px
Полноширинный макет 1280 px	до 2560 px, если требует изображение

Рекомендации по качеству после уменьшения размера:

Фотобаннеры: WebP или JPEG с качеством 80-85
Встроенные фото в блоге: 75-82
Скриншоты с текстом: проверяйте при масштабе 100%, предпочитайте PNG или WebP с более высоким качеством

Адаптивные изображения в HTML используют srcset с несколькими вариантами ширины. Генерируйте варианты 1x и 2x из одного мастер-экспорта, если это поддерживает ваш процесс сборки.

Рекомендации Google для изображений в поиске советуют использовать стандартные элементы изображений, адаптивные варианты с резервным src, понятные имена файлов и полезный альтернативный текст. Сжатие ускоряет загрузку, а для индексации по-прежнему нужны доступная разметка и точное описание изображения.

Ленивая загрузка улучшает ощущение скорости, но не уменьшает общий объём скачанных байт, если каждый посетитель долистывает статью до конца. Меньшие исходники всё равно важны для лимитов мобильного трафика и счетов за CDN, даже если изображения загружаются ниже видимой области.

После замены баннеров протестируйте страницу в инструментах разработчика браузера с ограничением скорости до 4G. На вкладке Network проверьте фактический размер каждого файла и убедитесь, что его размеры соответствуют макету.

Процесс экспорта на Mac

Повторяемый локальный процесс лучше разовых загрузок:

Экспортируйте из дизайна с шириной макета, а не с размером захвата экрана монитора.
Уменьшите размер в Preview, если экспорт получился больше нужного (Tools → Adjust Size…).
Конвертируйте баннеры в WebP с помощью cwebp в Terminal:

brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp

Экспортируйте соответствующий резервный JPEG из того же уменьшенного исходника PNG.
Проверьте результат на вкладке Network в инструментах разработчика браузера перед объединением изменений.

oxipng после уменьшения размера помогает с прозрачными ассетами в PNG, которые должны остаться в PNG:

oxipng -o 4 --strip safe icon.png

Задокументируйте правила по ширине, качеству и формату в репозитории, чтобы следующая кампания не вернулась к экспорту артбордов в 3x.

Локальная обработка для непубличных материалов

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

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

Удаляйте геолокационные данные EXIF из баннеров, если GPS-метки не предназначены для публичных страниц. Удаление метаданных: отдельный шаг. Он не относится напрямую к уменьшению размера, но важен для конфиденциальности.

Когда GetCompress подходит для подготовки веб-ассетов

Preview, cwebp или плагина сборки достаточно для одного изображения. Когда дизайнеры регулярно передают разработчикам исходники в PNG, JPEG, HEIC и других форматах, GetCompress помогает привести их к нужным размерам и подготовить варианты для веба. Пресеты и пакетная очередь обрабатывают файлы локально до добавления в сборку.

Адаптивная разметка, CDN, кеширование и измерение производительности остаются отдельными шагами. Проверяйте опубликованную страницу и храните исходные мастер-файлы отдельно от сгенерированных веб-ассетов.