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

Фигма умеет экспортировать один и тот же слой сразу в нескольких форматах и разрешениях, поэтому советую настраивать экспорт и в джипег, и в ПНГ: после экспорта выберете файл поменьше.

Чтобы настроить экспорт отдельного изображения, найдите вкладку Export:

Если нужно сохранить оригинал изображения, а не его кропнутую или изменённую версию, переключитесь во вкладку Inspect, включите свойста элемента таблицей и кликните по имени файла:

СВГ можно экспортировать аналогично или сразу копировать в буфер обмена её код:

Изображения можно экспортировать локально, слой за слоем, или глобально: все изображения, для которых вы настроили экспорт, разом. Чтобы экспортировать все изображения в документе, нажмите ⌘+Shift+E:

После экспорта Фигма отдаст архив с изображениями. Советую обязательно прогнать их через ImageOptim или TinyPNG: они умело оптимизируют и чистят джипеги, ПНГ и даже СВГ

ПНГ‑24 и ПНГ‑8

Когда я говорю о ПНГ, то подразумеваю полноцветный ПНГ‑24. Есть ещё ПНГ‑8 с палитрой: вместо хранения цвета каждого пикселя он хранит его номер в палитре. Размер палитры ограничен 256 цветами. Палитра может быть меньше 256 цветов, а чем она меньше, тем меньше занимает номер цвета отдельного пикселя. Соответственно, если изображение позволяет, ПНГ‑8 даёт хорошую экономию:

ПНГ‑24
234 Кб
ПНГ‑8
120 Кб

Фигма экспортирует в ПНГ‑24, способа экспортировать в ПНГ‑8 нет. Поэтому советую обязательно после экспорта прогонять пнгшки через программы, оптимизирующие изображения: они не только сжимают ПНГ‑24, но и могут поменять формат на ПНГ‑8, если он подходит.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы