Как экспортировать из Photoshop для веба
Картинка в Photoshop выглядит идеально, а на сайте — тусклая, мыльная и весит три мегабайта. Знакомо? Разбираем, каким инструментом экспортировать, как выбрать между PNG и JPG, куда крутить ползунок качества и почему одна галочка «sRGB» спасает цвета.
«Экспортировать как» против Save for Web
В Photoshop два инструмента для веб-экспорта, и они живут в меню File → Export. Оба сводят слои в плоскую картинку, но устроены по-разному.
«Экспортировать как» (Export As) — современный движок. Он умеет то, чего требует нынешний веб: экспорт в удвоенном и утроенном разрешении для Retina (@2x, @3x), выгрузку в SVG, живое превью размера файла и быстрый экспорт отдельных слоёв. Это выбор по умолчанию.
«Save for Web (Legacy)» — старый инструмент, который Adobe прямо пометила словом «устаревший». Но списывать его рано: он даёт более тонкий контроль над оптимизацией, показывает картинку в режиме «до/после» с точным весом, умеет PNG-8 с ручной настройкой палитры и — важный нюанс — единственный экспортирует анимированный GIF.
| Возможность | Экспортировать как | Save for Web |
|---|---|---|
| @2x / @3x для Retina | Да | Нет |
| Экспорт в SVG | Да | Нет |
| Анимированный GIF | Нет | Да |
| Тонкая настройка палитры PNG-8 | Базовая | Полная |
| Превью «до/после» с весом | Только размер | Да |
Короткий вывод
Для 90% задач берите «Экспортировать как». Переключайтесь на Save for Web только ради анимированного GIF или когда нужно выжать каждый килобайт из PNG-8 вручную.
PNG или JPG: как выбрать формат
Это главная развилка экспорта, и выбор зависит от содержимого картинки, а не от привычки.
JPG сжимает с потерями и блестяще справляется с фотографиями и сложными изображениями с плавными переходами. При этом файл получается в разы легче. Минус: JPG не умеет прозрачность и оставляет артефакты на резких контрастных краях — например, вокруг текста.
PNG сжимает без потерь и создан для графики с чёткими границами: логотипов, иконок, скриншотов интерфейса, текста. Главный козырь — поддержка прозрачности (альфа-канал). Расплата — вес: фотография в PNG будет в несколько раз тяжелее того же кадра в JPG.
Это фотография?
Плавные градиенты, много деталей, нет прозрачности → JPG.
Резкие края или прозрачность?
Логотип, иконка, текст, объект без фона → PNG (PNG-24 с альфой).
Нужен минимальный вес?
И для фото, и для графики современные WebP/AVIF обычно легче обоих.
Мы намеренно не углубляемся в вечный спор PNG против JPG — ему посвящён отдельный разбор. Здесь важно одно: выбирайте формат под содержимое, а не наугад.
Ползунок качества: где золотая середина
При экспорте в JPG Photoshop показывает ползунок Quality (0–100). Соблазн выкрутить его на 100 велик, но это почти всегда лишний вес без видимой пользы.
На практике диапазон 60–80 — та самая золотая середина: разницу с оригиналом глаз уже не ловит, а файл легче в 2–3 раза. Значения ниже 50 начинают выдавать характерные «квадратики» JPEG на границах и в мелких деталях. Лучший способ найти порог — смотреть превью и следить за цифрой веса, снижая качество, пока картинка не начнёт заметно портиться.
Почему 100 — это перебор
JPEG на качестве 100 хранит детали, которые всё равно не видны на экране, но раздувают файл. Экспорт на 75 часто визуально неотличим, а весит вдвое меньше — прямой выигрыш к скорости загрузки страницы.
sRGB — галочка, которая спасает цвета
Самая частая причина «на сайте цвета не те» — это цветовой профиль. Фотографы и дизайнеры нередко работают в широких пространствах Adobe RGB или ProPhoto RGB, где цвета насыщеннее. Проблема в том, что браузеры по умолчанию трактуют картинку как sRGB. Если отдать файл в Adobe RGB, браузер покажет его «плоско» — цвета станут тусклее, чем в Photoshop.
Решение — одна галочка. В «Экспортировать как» это «Преобразовать в sRGB» (Convert to sRGB), в Save for Web — «Convert to sRGB» плюс «Embed Color Profile». Photoshop пересчитает цвета в sRGB, и на экране пользователя они совпадут с тем, что вы видели.
Тема цветовых пространств глубже, чем одна галочка: чем RGB отличается от CMYK, как работают ICC-профили и экранная цветопроба — в нашей статье «Цвет в Photoshop».
Retina и @2x: чтобы не было мыла
На обычном экране один пиксель картинки = один пиксель дисплея. На Retina и других плотных экранах в том же месте помещается вдвое-втрое больше физических пикселей. Если отдать изображение «один в один», на таком дисплее оно будет выглядеть слегка размытым — не хватает деталей.
Выход — экспортировать @2x (и при желании @3x): копию в удвоенном разрешении. Её подставляют через атрибут srcset, и браузер сам выбирает нужную по плотности экрана. «Экспортировать как» умеет выгрузить сразу 1x, 2x и 3x за один проход — просто добавьте нужные масштабы в списке размеров.
Готовые рецепты под задачу
Чтобы не держать всё в голове, вот короткие «пресеты» для типовых случаев.
Как дожать вес после экспорта
Даже аккуратный экспорт из Photoshop оставляет запас по весу. Финальный штрих для быстрого сайта — конвертация в современный формат. Перевод готового PNG или JPG в WebP или AVIF нередко экономит 25–50% размера без заметной потери качества, а значит — ускоряет загрузку и улучшает показатели Core Web Vitals, которые учитывает поиск.
Если Photoshop под рукой нет, а нужно быстро получить веб-картинку из макета, весь путь можно пройти онлайн: открыть PSD и сразу выгрузить лёгкий файл.
Из PSD — сразу в готовую веб-картинку
Конвертер FormatZ откроет PSD в браузере и отдаст PNG с прозрачностью или лёгкий JPG — без Photoshop, установки и регистрации. Дальше картинку легко перевести в WebP для скорости.
Конвертировать PSD в PNGДля фото удобнее PSD → JPG, а больше о том, как ускорить сайт лёгкими форматами, — в статье «WebP для скорости сайта». Все доступные конвертации — на странице всех форматов.
